Reduced-motion-aware placeholders for lines, blocks, circles, and table rows.
LineBlockCircleTable rows
<Skeleton variant="table-row" rows={5} />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { Skeleton } from '@chanrg/4ui';<Skeleton variant="table-row" rows={5} />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | line | block | circle | table-row | line | Placeholder geometry. |
rows | number | 4 | Rows in table mode. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Decorative placeholders are hidden from assistive technology.