Base
Components

Skeleton

The shape of content while it loads.

shadcn/uiFeedback and status
shadcn/ui docs (opens in a new tab)components/ui/skeleton.tsx

Preview

Installation

It's already in this Base. In another project, add it with the shadcn CLI, then switch its cn import to @/lib/utils, its icons to @/components/icons, and its text-sm and text-xs to text-ui-s and text-ui-xs.

npx shadcn@latest add skeleton

Examples

A list

Guidelines

Use it

  • The same shape as the content it stands for.

Don't

  • Leave it on screen when loading failed: show the error.

Used in

The screens in this Base that show it, found in the code.

Accessibility

  • Mark the loading region aria-busy, so screen readers wait for the content.