Skeleton

A hand-drawn placeholder whose hachure shading sweeps while content loads.

Text lines

Shapes

Card placeholder

Installation

Add Skeleton with the shadcn CLI.

npx shadcn@latest add https://sketchcn.chuwii.com/r/skeleton.json

Examples

Loading states for profiles, lists, and a slower drawing hand.

Profile loading

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

export function ProfileLoading() {
  return (
    <div className="flex items-center gap-3">
      <Skeleton className="size-10 rounded-full" />
      <div className="flex flex-col gap-2">
        <Skeleton className="h-4 w-32" />
        <Skeleton className="h-3 w-20" />
      </div>
    </div>
  );
}

List loading

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

export function NoteListLoading() {
  return (
    <ul className="flex w-full flex-col gap-3">
      {[0, 1, 2].map((row) => (
        <li key={row} className="flex flex-col gap-2">
          <Skeleton className="h-4 w-1/2" />
          <Skeleton className="h-3 w-full" />
        </li>
      ))}
    </ul>
  );
}

Wider hatching

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

export function CalmSkeleton() {
  return <Skeleton className="h-24 w-full [--sketch-bg-hachure-gap:8]" />;
}

Upright hatching

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

export function UprightSkeleton() {
  return (
    <Skeleton className="h-24 w-full [--sketch-bg-hachure-angle:90]" />
  );
}