Skeleton

kai-skeleton

A pulsing placeholder that holds layout while content loads. It’s a low-level primitive — pick a variant and size it to match what’s coming, then compose several to mirror your own UI.

• Shadow DOM
• 3 variants
• Responsive width
• Recolor via ::part

Preview

When to use

Reach for <kai-skeleton> when you know the shape of what’s loading and want to reserve its space — an avatar, a few lines of body copy, a card. It’s a building block, not a preset: you place and size the shapes to your layout rather than picking a ready-made “comment skeleton”. For a busy indicator with no known shape, use Loader instead; to shimmer text that’s already on screen, use Text Shimmer.

Usage

Set variant to text, rect, or circle. Width is responsive by default (it fills its container); pass width / height to pin a size. For text, lines stacks multiple rows and shortens the last one so it reads like a paragraph.

<kai-skeleton variant="text" lines="3"></kai-skeleton>
<kai-skeleton variant="circle" width="2.5rem"></kai-skeleton>
<kai-skeleton variant="rect" height="10rem"></kai-skeleton>

The default shimmer is a low-contrast foreground tint that reads in both light and dark; recolor it or change its opacity via ::part(skeleton).

Examples

Text lines

lines stacks rows for body copy; the last line is shorter so it doesn’t look like a solid block.

Code

Rectangle

A block for images, cards, or media. Set height (and width, if you don’t want it full-bleed).

Code

Circle

A round placeholder for avatars and icons. width is the diameter.

Code

Styling

The shimmer block is a single ::part — recolor it or change its opacity from your own stylesheet, without piercing the shadow root.

Part	Purpose	Example
skeleton	The shimmer block(s). Recolor or change the opacity from outside; the default is a low-contrast foreground tint that reads in both light and dark.	kai-skeleton::part(skeleton) { background: var(--color-primary); opacity: 0.15 }

Props

Property	Type	Default	Notes
variant	"text" | "rect" | "circle"	'text'	`text` (one or more lines), `rect` (a block), or `circle` (round). Defaults to `text`.
width	string	—	CSS width (e.g. `'12rem'`, `'60%'`). Defaults to full width (responsive); for `circle` it is the diameter.
height	string	—	CSS height. Defaults per variant (a text line height; circle = width).
lines	number	—	`text` only: number of lines; the last is shorter. Defaults to 1.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

Skeleton

---

Need a hand? Report a bug Ask for help