Installation
You can add the skeleton using our CLI or manually:
Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.
The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.
npx boardui@latest add skeletonUsing a shared UI package or custom import aliases? Configure your installation paths before running the CLI. Copy-paste examples use the default imports.
Anatomy
Placeholders take their tint from the text colour, so they read on any surface in light and dark mode. A sheen of light sweeps each one, drawn in layers like Spinner and Progress: a crisp line leads, with a tight glow and a wide bloom trailing behind it, then it rests before the next pass.
Loading into content
Wrap the real content in a Skeleton and it measures the placeholder from it, so the layout never shifts. When isLoaded turns true, the block fades away while the content sharpens in from a soft blur.
<div aria-busy={!loaded}> <Skeleton shape="circle" isLoaded={loaded} className="size-10"> <Avatar size="lg" initials="MC" color="blue" className="size-10" /> </Skeleton> <Skeleton shape="text" isLoaded={loaded} className="w-fit"> <span className="text-body-medium text-text-primary">Maya Chen</span> </Skeleton> <Skeleton shape="text" isLoaded={loaded}> <p className="text-body-regular text-text-secondary">Shipped the new onboarding flow…</p> </Skeleton></div>Shapes and text
shape takes rect, text, or circle; size it with classes. SkeletonText draws a paragraph of lines with a shorter last one.
<Skeleton shape="circle" className="size-12" /> // avatars<Skeleton className="size-12" /> // rect: images, cards (radius 12)<Skeleton shape="text" className="h-5 w-40" /> // a line of text (radius 6)
<SkeletonText lines={2} /> // a paragraph, last line shorter<SkeletonText lines={4} lineClassName="h-3" /> // smaller textRight-to-left
Inside DirectionProvider, the sheen sweeps from right to left with its line still leading.
import { DirectionProvider } from "@/components/foundations/direction/direction";
<DirectionProvider locale="ar"> <Skeleton shape="circle" className="size-10" /> <SkeletonText lines={2} /></DirectionProvider>Accessibility
Placeholders are hidden from screen readers, and content waiting behind them is inert. Mark the region that is loading with aria-busy so assistive technology knows to wait.
Reduced motion replaces the sweep with a gentle pulse.