Skeleton | Tuff Docs

Usage

lines sets the line count; variant="circle" with equal width and height draws a true circle.

Loading demo...

Loading demo...

Side summaries beside the table keep their structure with TxSkeleton and TxLayoutSkeleton.

Loading demo...

Match width, height, line count, and radius to the final content so loading doesn't create a second layout.
Use TxCardSkeleton or TxListItemSkeleton only when their fixed structure matches the final UI.
Hand off to real content with loading=false rather than keeping skeleton and content in separate branches.
If the final structure is unknown, use an empty or loading state with copy instead.
For tables, use TxDataTable with loadingVariant="skeleton" instead of composing skeleton rows.

Property	Type	Default	Description
loading			Shows the skeleton; `false` renders the default slot.
lines			Number of placeholder items; at least 1.
variant			Shape of each placeholder item.
width			Width; numbers are px.
height			Height; numbers are px.
radius			Corner radius of non-circle items; numbers are px.
gap			Gap between lines; numbers are px.

Component	Slot	Props	Description
`TxSkeleton`	`default`	-	Real content, rendered when `loading=false`.
`TxCardSkeleton`	-	-	Fixed card placeholder; no slots.
`TxListItemSkeleton`	-	-	Fixed list-row placeholder; no slots.

Export	Purpose
`TxSkeleton` / `Skeleton`	Configurable text, rectangle, or circle placeholder.
`TxCardSkeleton` / `CardSkeleton`	Card or feed placeholder: icon, title, badge, and description.
`TxListItemSkeleton` / `ListItemSkeleton`	List-row placeholder: icon, name, meta, and trailing badge.
`TxRowSkeleton` / `RowSkeleton`	Settings-row placeholder: optional icon, description, and trailing control.

Property	Type	Default	Description
rows			Number of rows; at least 1.
leading			Reserves space for a leading icon.
description			Adds a narrower description bar under the title.
trailing			Reserves space for a trailing control (switch, button, chip).
separated			Draws a hairline between rows on the same pixel as the real list separator.
titleWidth			Base width of the title bar, varied slightly per row; numbers are px.
descWidth			Width of the description bar; numbers are px.

Turns a raw loading flag into a skeleton flag that doesn't flicker.

Parameter	Type	Default	Description
`source`	`MaybeRefOrGetter<boolean>`	-	The raw loading flag.
`options.delay`	`number`	`150`	Milliseconds before the skeleton shows; data that arrives sooner never shows one.
`options.minDuration`	`number`	`400`	Minimum milliseconds the skeleton stays once shown.
Returns	`Ref<boolean>`	-	Whether to show the skeleton.

variant="circle" fixes the radius at 999px and ignores radius.
TxCardSkeleton and TxListItemSkeleton have fixed shapes and no props, events, or slots.
The root is aria-hidden="true"; the host region announces loading, for example with aria-busy or a polite live region.

packages/tuffex/packages/components/src/skeleton/index.ts