Status lines are typed out one at a time with a block caret and a spinner, then checked off with a timing as the next line scrolls in. Good for long jobs that should show what they are doing.
npx shadcn@latest add https://hyperblur.dev/r/loader-status-feed.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-status-feed.tsx.
import { LoaderStatusFeed } from "@/components/hyperblur/loader-status-feed"
<LoaderStatusFeed steps={["Reading files", "Planning", "Editing", "Running tests"]} />| Prop | Type | Default | Description |
|---|---|---|---|
| steps | string[] | six coding steps | Status lines shown in order. |
| step | number | Controlled index of the current step. A value equal to the number of steps shows everything done. Leave it out to loop on its own. | |
| visible | number | 4 | Number of lines visible at once, from 1 to 10. |
| typeSpeed | number | 26 | Milliseconds per typed character. |
| hold | number | 700 | Base milliseconds a finished line waits before the next one starts. |
| color | string | "#2f7bff" | Color of the spinner track and the check circle. |
| accent | string | "#7fb3ff" | Color of the spinner head, the caret and the check mark. |
| label | string | "Working" | Prefix for the screen reader announcement of each step. |