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 — Ark UI
skeleton.tsx
12345678910111213141516import { Skeleton } from "#components/ui/ark-ui/skeleton.tsx";
export function Example({ loaded }: { loaded: boolean }) { return ( <> {/* variant + loading props resolve through the StyleX recipe */} <Skeleton variant="pulse" />
{/* flip loading off to fade the loaded content back in; asChild wraps your real element */} <Skeleton asChild variant="shine" loading={loaded ? "false" : "true"}> <p>Ready when you are.</p> </Skeleton> </> );}