Components / Skeleton

Skeleton

Placeholder blocks while real content loads. Mirror the shape of what will render so the layout does not jump when data arrives.

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

Rendered stock

House rules

  • Skeletons are the one exemption to the no-custom-Tailwind rule: size them with height and width classes (h-9 w-full).
  • A skeleton means loading, never a stand-in for missing data. Failed loads show an honest degraded state instead.