Skeleton

Skeleton

<Skeleton shape="circle" />
<Skeleton shape="text" width="70%" />
<Skeleton width={120} height={20} />

Install: @helixui/core

import { Skeleton } from '@helixui/core'

status: stable · since: 0.1.0

Tags: loading, placeholder, shimmer

Anatomy

▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
▒▒▒▒▒▒▒▒▒▒
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒    ← shimmer animation

Layout

• display — block
• width — fill
• height — content
• intrinsicSize — sized by props (width/height)
• stackable — true
• fullBleed — false

Visual

A flat block (radius.md) with a moving shimmer gradient. Common shapes: rectangular line, circle (avatar), and full row block. Animation respects prefers-reduced-motion.

Props

Name	Type	Default	Description
shape	'rect' | 'circle' | 'text'	rect	Skeleton shape.
width	number | string	—	Override CSS width.
height	number | string	—	Override CSS height.

Tokens used

color.bg.action.neutral.default, color.bg.action.neutral.hover, radius.md, radius.sm, radius.full

Accessibility

Notes

• Skeleton is aria-hidden. It must be paired with a aria-live region elsewhere if the loading state is meaningful (e.g. “Loading messages…”).
• Animation respects prefers-reduced-motion.

Composes with

Component	Relation	Note
List	child	Used as placeholder rows while loading.
Card	child	Inside Cards as placeholder content.
Spinner	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

list loading state

“5 skeleton rows while loading”

{Array.from({ length: 5 }).map((_, i) => (
  <Skeleton key={i} height={48} />
))}

Related

• Spinner