Skeleton
A restrained placeholder that retains a readable loading announcement.
Live — this one is real
Usage
import { Skeleton } from "mizu-ui";
export function Example() {
return <Skeleton lines={4} label="Loading release notes" />;
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Inspect status/Feedback.tsx
Source is included in the npm package under src/status/Feedback.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| lines | number | 3 | One to twenty placeholder rows. |
| label | string | "Loading content" | Loading announcement. |
Accessibility
One labelled status region; placeholder shapes are hidden from readers. Reduced motion disables the pulse.
Motion
CSS transitions explain state changes. Reduced motion removes travel.