Component
Skeleton
A lilac placeholder with 8px corners that breathes softly while content loads.
npx -y github:anwarlemu/inkbox-brand-cli#release add skeletonUsage
Use in the shape of what will load (rows of the email list, a table's rows, an avatar), matching each part's size and corners (rounded-pill for a button, rounded-xs for the avatar tile). Show it only for loads longer than about 300ms.
Avoid
- Shimmer gradients
- Skeletons for content already on screen
- A skeleton for a single button
Exports: Skeleton. Read the examples for composition and props.
Example
import { Skeleton } from "@/components/ui/skeleton";export function Preview() { return ( <div className="grid w-full max-w-96 gap-1" aria-busy="true" aria-label="Loading emails"> {[0, 1, 2].map((i) => ( <div key={i} className="grid gap-2.5 p-3"> <div className="flex justify-between"> <Skeleton className="h-4 w-20" /> <Skeleton className="h-4 w-12" /> </div> <Skeleton className="h-4 w-11/12" /> <Skeleton className="h-4 w-3/4" /> </div> ))} </div> );}export function Row() { return ( <div className="flex w-full max-w-120 items-center gap-4" aria-busy="true" aria-label="Loading mailbox"> <Skeleton className="size-5.5 rounded-xs" /> <Skeleton className="h-4 flex-1" /> <Skeleton className="h-10 w-28 rounded-pill" /> </div> );}Source
import { cn } from "@/lib/utils";// A placeholder while content loads: the lilac with 8px corners, breathing between full and 55 percent (1.6s, the// in-out curve). With reduced motion it holds still.function Skeleton({ className, ...props }: React.ComponentProps<"div">) { return <div data-slot="skeleton" aria-hidden className={cn("animate-pulse-soft rounded-control bg-subtle motion-reduce:animate-none", className)} {...props} />;}export { Skeleton };Reference: Extrapolated from the Inkbox console (Figma 427:2715): the lilac fill and 8px corners of its wells.