Primitives
Progress · Skeleton · Spinner
Linear progress bar (determinate + indeterminate), shimmer-skeletons, and an SVG-less CSS spinner in three sizes.
installnpx shadcn@latest add https://ds.bartoszrychlicki.com/r/br-primitives.json
Preview
Progress · 62%
Indeterminate
Spinners
Skeletons
import { Progress, Skeleton, Spinner } from "@/components/br/primitives";
<Progress value={62} label="Upload progress" />
<Progress indeterminate label="Sync in progress" />
<Spinner size="sm" />
<Spinner />
<Spinner size="lg" />
<Skeleton w={44} h={44} r="50%" />
<Skeleton h={12} w="40%" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| Progress.value | number (0–100) | — | Width of the filled bar. |
| Progress.indeterminate | boolean | — | Animated shimmer. |
| Progress.label | string | "Progress" | "Loading" | Accessible name for screen readers. |
| Skeleton.w / h / r | string | number | — | width, height, border-radius. |
| Spinner.size | "sm" | "lg" | — | Defaults to 28px. |