Components · shadcn skeleton, spinner, empty

Loading and empty

Static shapes while loading, one plain sentence when there is nothing to show. No shimmer, no illustrations.

Skeleton

Static surface shapes matching the real layout, with aria-busy="true" on the container. Never a shimmer or a pulse.

Preview

Show code

<ol aria-busy="true">
  <li><Skeleton className="h-16 w-24" /> <Skeleton className="h-6 w-2/3" /></li>
</ol>

Spinner

Only for loading: inside a busy button, or a field checking a student ID. Decorative by default (the label carries the state); pass label when it stands alone. It stops under reduced motion.

Preview

Loading schedule…

Show code

<Spinner label="Loading schedule" />

Empty state

One plain sentence plus a link. No illustrations, so the shadcn EmptyMedia slot is gone.

Preview

No upcoming events yet.

Follow our Instagram for the latest news.

Show code

<Empty>
  <EmptyHeader>
    <EmptyTitle>No upcoming events yet.</EmptyTitle>
    <EmptyDescription>Follow <a href="…">our Instagram</a> for the latest news.</EmptyDescription>
  </EmptyHeader>
</Empty>

Other empty states follow the same shape: “No news yet.”, “No photos for this event yet.”