Loading placeholders shaped like the content they stand in for, with a soft shimmer.
Skeleton draws a block, a text line or a circle. Size each one to the real content (the Table does this per column) so nothing jumps when data arrives.
Installation
npx shadcn@latest add KezLahd/rime/skeletonAlso installs: base.
Usage
import { Skeleton, SkeletonText } from "@/components/ui";
<Skeleton width={180} height={20} />
<SkeletonText lines={3} />Examples
Shapes
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
Skeleton
| Prop | Type | Default | Description |
|---|---|---|---|
| width | number | string | "100%" | Size to the real content it stands in for, not a generic block. |
| height | number | string | ||
| variant | "text" | "block" | "circle" | "block" | text = a line of text at the given font size's height; circle = avatar. |
| radius | number | string | ||
| className | string | ||
| style | CSSProperties |
SkeletonText
| Prop | Type | Default | Description |
|---|---|---|---|
| lines | number | 3 | |
| lastLineWidth | string | "62%" | Last line is shorter, as real paragraphs are. |
| lineHeight | number | 14 | |
| className | string |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --r-circle | 50% | … |
| --r-flat | var(--skeleton-radius) | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --ease | tokens.css | … |
| --r-2xs | tokens.css | … |
| --r-xs | tokens.css | … |
| --rgb-brand-deep | tokens.css | … |
| --rgb-white | tokens.css | … |
| --skeleton-radius | tokens.css | … |
Accessibility
- Hidden from assistive tech; mark the loading region aria-busy instead.
Do and don't
Do
- Match the real layout's dimensions.
Don't
- Don't show grey blocks with no relation to the content.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open skeleton.md