ComponentsFoundations

Skeleton

Placeholders while content loads. Skeletons are hidden from assistive tech; SkeletonGroup announces the region once. The shimmer follows reading direction and stops under reduced motion.

components/skeleton.tsxtheme · material · accent · density · font

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { Skeleton, SkeletonGroup, SkeletonText } from "@vamos-ui/react";

<SkeletonGroup>
  <Skeleton className="h-4 w-32" />
  <SkeletonText lines={3} />
</SkeletonGroup>

Examples

Text

shape="text" sizes lines from the font size (0.8em); SkeletonText ends on a shorter line.

List (HR team)

SkeletonAvatar matches the Avatar sizes.

Table rows (CRM)

SkeletonRow follows --row-h and --cell-px, so it matches the table in every density.

ContactCompanyStageValue

Loading → content

SkeletonGroup sets aria-busy and one hidden status while loading.

Spring menu launch

Draft · edited 2 hours ago

API

Skeleton

Prop	Type	Default
`shape` Block, one text line (height 0.8em), or circle.	`"rect" \| "text" \| "circle"`	`"rect"`
`shimmer` Animated sweep (RTL-aware, off under reduced motion).	`boolean`	`true`
`className` Size it with classes, e.g. h-4 w-32.	`string`	`—`

SkeletonText

Prop	Type	Default
`lines` Number of lines.	`number`	`3`
`lastLineWidth` Width of the last line.	`string`	`"62%"`
`lineClassName` Classes for every line.	`string`	`—`

SkeletonAvatar

Prop	Type	Default
`size` 20 / 24 / 32 / 40 / 56 px.	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`
`shape` Square for organisation logos.	`"circle" \| "square"`	`"circle"`

SkeletonRow

Prop	Type	Default
`columns` Columns; the first is twice as wide.	`number`	`4`
`avatar` Avatar + two lines in the first column.	`boolean`	`false`

SkeletonGroup

Prop	Type	Default
`loading` aria-busy and the hidden status while true.	`boolean`	`true`
`label` Announced text (dictionary skeleton.loading).	`string`	`"Loading…"`

Site shell

SLA timer