All components
Skeleton
Loading placeholders with pulse and shine animations that respect reduced motion.
Variants
pulse
shine
none
Install
zsh — skeleton
1bunx stylexblocks add skeletonUsage — Base UI
skeleton.tsx
12345678910111213141516171819import { Skeleton } from "#components/ui/base-ui/skeleton.tsx";
export function Example({ loaded }: { loaded: boolean }) { return ( <> {/* variant + loading props resolve through the StyleX recipe and are exposed as data-variant / data-loading attributes */} <Skeleton variant="pulse" />
{/* flip loading off to fade the loaded content back in; the render prop wraps your real element */} <Skeleton variant="shine" loading={loaded ? "false" : "true"} render={<p>Ready when you are.</p>} /> </> );}