Components / Skeletons

Shared loading placeholders for app and brand surfaces.

Skeletons are the canonical loading treatment for blocking states across product and brand examples. The primitives come from `@gensudo/ui`, while motion and color come from shared brand tokens.

Primitive examples

Text

Use for headings, paragraphs, and compact metadata rows.

Block

Use for cards, media areas, panels, charts, and button-like regions.

Circle

Use for avatars, icon wells, and compact icon-button placeholders.

Composed app examples

Workspace layout example

Usage guidance

Use for blocking initial loads

Prefer skeletons when the user is waiting for a full page, section, or panel to resolve. Do not replace small inline loading labels or save states with full placeholder shells.

Match the final layout closely

Skeleton shapes should reserve the same approximate space as the loaded UI so the surface feels stable and avoids noticeable layout shift.

Keep placeholders non-interactive

Do not imply buttons, links, or hover affordances unless the final layout genuinely requires that shape. Loading surfaces should remain decorative rather than fake controls.

Use shared primitives only

Consume `Skeleton`, `SkeletonText`, `SkeletonBlock`, and `SkeletonCircle` from `@gensudo/ui`, while colors and shimmer behavior stay owned by shared brand tokens.