Skeleton

Loading placeholder components styled with the Tinted Trays glacier tint. Skeletons provide visual feedback during content loading states.

Basic Skeleton

Simple skeleton shapes with the glacier tint pulse animation.

Skeleton Variants

Different border radius variants and themed styles for various use cases.

Default (rounded-lg)

Rounded (rounded-xl)

Circular

Themed Variants

Skeleton variants styled as trays and capsules for the Tinted Trays theme.

Tray (with border & inner shadow)

Capsule (with subtle shadow)

Card Loading State

Skeleton placeholder for a typical card component in the tray container.

List Loading State

Skeleton for list items following the List Stack pattern.

Profile Loading State

Skeleton for user profile components.

Bento Grid Loading

Skeleton for bento-style dashboard grids using tray and capsule variants.

Form Loading State

Skeleton for form inputs and labels.

Table Loading State

Skeleton for data tables with headers and rows.

Capsule Items Loading

Skeleton using the capsule variant for loading capsule-styled content.