Skeleton
Layout-preserving loading placeholders with text, rectangle, and circle shapes.
Contract
shape accepts text, rectangle, or circle and defaults to text. Skeletons shimmer by default; set animate={false} for a static placeholder. Dimensions come from layout or style.
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/skeleton.css';Scroll inside the code area to read long lines.
Imports
import { TRSkeleton } from '@tinyrack/ui/components/skeleton';Scroll inside the code area to read long lines.
Playground
Usage
Examples
One loading status, decorative children permalink
Unlabeled skeletons are aria-hidden by default. Put the accessible label on one region when the loading state needs an announcement.
API
TRSkeleton forwards native div props, events, styles, and React 19 ref.
| Prop | Type | Default | Purpose |
|---|---|---|---|
animate | boolean | true | Enables the shimmer animation |
shape | 'text' | 'rectangle' | 'circle' | 'text' | Selects the default dimensions and radius |
An unlabeled skeleton has aria-hidden="true". Add aria-label, aria-labelledby, aria-live, aria-busy, or role="status" to opt into one live region. The shimmer stops automatically when the user prefers reduced motion.
| CSS token | Default | Purpose |
|---|---|---|
--tr-skeleton-fill | --tinyrack-skeleton-fill | Placeholder fill |
--tr-skeleton-highlight | --tinyrack-skeleton-highlight | Shimmer highlight |
--tr-skeleton-height | shape recipe | Placeholder height |
--tr-skeleton-circle-size | --tinyrack-space-3xl | Circle width and height |
--tr-skeleton-radius | shape recipe | Corner radius |
--tr-skeleton-duration | --tinyrack-duration-loading | Shimmer duration |
--tr-skeleton-easing | --tinyrack-ease-linear | Shimmer easing |