Components

Skeleton

A pulsing placeholder that mirrors the shape of loading content.

Installation

npx shadcn@latest add @fujin/skeleton

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

<Skeleton className="h-4 w-40" />

The shape of what's loading is unknown, or the region is small - use spinner instead. A busy button already has <Button loading> built in.

Separator

A visual divider between groups of content.

Badge

A small status or count label with 7 variants.