jsp-dsv0.1

Skeletonshadcn

A placeholder while content loads.

Data display
Install
npx shadcn add skeleton
Import from
@/components/ui/skeleton
Guidance
draft · v0.1.0

Examples

As installed from shadcn – rendering in jsp-ds tokens through the bridge.

The shape of content while it loads. Mark the region aria-busy.

Guidance

When to use

  • While content loads and its shape is known: cards, rows, profile blocks.

When not to use

  • For actions – disable or show a spinner in the button instead.
  • For waits under about 300ms – show nothing.

Rules

  • Match the shape of what's coming so the page doesn't jump.
  • Mark the region aria-busy="true" with role="status" and a label.

Install

Terminal
npx shadcn add skeleton
Import
import { Skeleton } from "@/components/ui/skeleton"

From shadcn’s own registry. Don’t edit the installed file – jsp-ds styles it through the bridge, and fixes go in styles/overrides.css with an issue.