Skeleton
Placeholder surface for the wait, in three shapes and two animations — both of which stop under reduced motion.
- Source
- 1 file
- Dependencies
- none
- Playground
- yes
Examples
Every variant of the shipped component, live. Switch the layout to read them as a table or one at a time, and open Code for the file behind them.
01Shapes
<Skeleton shape="rect | circle | text" />02Text lines
<Skeleton shape="text" lines={4} />03Animation
pulse
shimmer
none
<Skeleton animation="pulse | shimmer | none" />04Profile card
aria-busy card placeholder05List rows
map(rows) → <Skeleton />06Media
image + text block07Stat cards
grid → stat tiles08Table
header + body rows09Form
label + input + button10Chat
avatar + bubble rowsInstallation
One package for the whole library — run this once and every component on this site is importable. Adding the tokens to your stylesheet is the other half; the installation guide covers it.
npm install kipuiimport { Skeleton } from "kipui";- Peer dependencies
react 19
react-dom 19
tailwindcss 4
- Bundled dependencies
None beyond the peers above.
Usage
skeleton-example.tsx
import { Skeleton } from "kipui";
<Skeleton shape="text" lines={3} animation="shimmer" />- Match the skeleton to the shape of the content it stands in for — a wrong-shaped placeholder reads as a layout bug when the real content lands.
- `lines` only applies to `shape="text"`; the last line is shortened for you.
Playground
Change the props and the snippet underneath updates with them.
Preview
<Skeleton />Props
2<Skeleton shape="text" animation="shimmer" />API reference
Transcribed from the component's own types. Props with no default are required.
| Prop | Default | Description |
|---|---|---|
| shape"rect" | "text" | "circle" | "rect" | Silhouette of the placeholder. |
| animation"pulse" | "shimmer" | "none" | "pulse" | Both stop under `prefers-reduced-motion`. |
| linesnumber | 1 | Stacked text lines. Text shape only. |