Component

Skeleton

Loading placeholder with a pulse that stops under reduce motion.

Skeleton rendered on iOS, dark mode — iPhone, zinc preset. Captured from the example app.

npx @eoria/cli add skeleton

Usage

import { Skeleton } from '@/components/ui/skeleton'

<HStack gap={3} accessible accessibilityState={{ busy: true }} accessibilityLabel="Loading post">
  <Skeleton shape="circle" style={{ width: 40, height: 40 }} />
  <VStack gap={2} flex={1}>
    <Skeleton shape="text" style={{ width: '60%' }} />
    <Skeleton shape="text" />
  </VStack>
</HStack>

Props

Prop	Values	Default
`shape`	`rect`, `circle`, `text`	`rect`
`animated`	boolean	`true`

The pulse is a 700 ms opacity loop. useReducedMotion turns it off, since a repeating animation under reduce motion would otherwise still run. Skeletons are hidden from assistive technology; announce the loading state on the container.

Source

registry/ui/skeleton.tsx