Skeleton

A set of loading placeholder components that mimic content shapes while data is being fetched.

Installation

npx dafink-ui add skeleton

The base block. Compose it freely with width, height, and className to match any shape.

Mimics a card with a title bar and a configurable number of body lines.

Mimics a labelled form input. Pass label to include the label placeholder.

Stacks multiple labelled SkeletonInput fields; useful while a form section loads.

Rectangular image placeholder. Height derives from aspectRatio and the element's width.

A row of equal-width columns; stack several to simulate a full table body.

Name	Type	Default	Description
width	string	-	CSS width applied inline on the base Skeleton block.
height	string	-	CSS height applied inline on the base Skeleton block.
className	string	""	Additional classes for sizing and shaping (all variants).
lines	number	3	SkeletonCard: number of body text lines to render.
label	boolean	false	SkeletonInput: whether to show a label placeholder above the input.
fields	number	3	SkeletonForm: number of labelled input fields to render.
columns	number	4	SkeletonTableRow: number of equal-width column blocks per row.
aspectRatio	string	"16/9"	SkeletonImage: CSS aspect-ratio value controlling height relative to width.