Skeleton

kai-skeleton

Mirrors the shape of what is coming, so the layout does not jump when it arrives.

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

Preview

When to use

When you know the shape of what’s loading and want to reserve its space: an avatar, a few lines of copy, a card. For a busy indicator with no shape, use Loader instead.

Usage

Set variant to text, rect, or circle. Width fills its container by default; pass width / height to pin a size. lines stacks rows for text and shortens the last one.

<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 shimmer is a low-contrast foreground tint, so it reads in both light and dark; recolor it or change its opacity via ::part(skeleton).

Examples

Text lines

Code

Rectangle

A block for images, cards, or media.

Code

Circle

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

Code

Styling

The shimmer block is a single ::part, so recolor it or change its opacity from your own stylesheet.

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
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
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