Foundations
Loader
Spinner and thinking indicators in a few sizes, with an accessible label.
2 variantsMIT
Preview
LoadingLoadingLoading
Loading historyUploading 3 filesInstallation
Copies the component into components/ui and installs its dependencies and theme tokens.
pnpm dlx shadcn@latest add https://tuffui.com/r/loader.jsonUsage
Pass your own data and wire the callbacks to your agent runtime.
import { Spinner, Thinking } from "@/components/ui/loader";
<Spinner label="Loading history" showLabel />
<Thinking words={["Thinking", "Searching", "Writing"]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | Spinner and Thinking size. |
| label | string | "Loading" | Spinner: spoken label, also the visible text with showLabel. |
| showLabel | boolean | false | Spinner: show the label next to the ring. |
| words | string[] | [] | Thinking: verbs to cycle through next to the dots. Each swaps in from below. |
| interval | number | 1800 | Thinking: ms per word. |