Skeleton

Atomshadcn/ui, restyled with tokens

A grey placeholder in the shape of content that is still loading.

components/atoms/skeleton.tsx
Use it for
A loading.tsx or Suspense fallback that keeps the layout from jumping.
Not for
An action in progress. Use Button loading or a Spinner.

States

Text
Circle
Rectangle
Composed: a Member row

Usage

import { Skeleton } from '@/components/atoms/skeleton';

<div aria-busy="true" aria-label="Loading profile" className="flex items-center gap-3">
  <Skeleton shape="circle" />
  <Skeleton className="w-40" />
</div>

Props

Skeleton props
PropTypeDefaultDescription
shape'text' | 'circle' | 'rectangle''text'A line of text, an avatar, or a block. Size it with className.
...restComponentProps<'div'>—className sets the exact size of what it stands in for.

Accessibility

  • Hidden from screen readers. Put aria-busy on the loading region instead.
  • The pulse stops for people who ask for reduced motion.