Skeleton

Shimmering placeholder for loading states. Renders a single block or a stack of lines, with configurable width, height, and border radius.

Import

tsx

import { Skeleton } from '@velocityuikit/velocityui'

Preview

Single block

Multi-line text

Card skeleton

Props

Prop	Type	Default	Description
width	`string \| number`	—	Width of the skeleton block. Defaults to 100% for multi-line stacks.
height	`string \| number`	`'1rem'`	Height of each skeleton block.
radius	`string \| number`	—	Border radius. Defaults to --vui-radius-sm.
lines	`number`	—	When greater than 1, renders a stacked column of blocks. The last line renders at 75% width.
gap	`string \| number`	`'0.5rem'`	Gap between lines when using multi-line mode.

Examples

Single block

tsx

import { Skeleton } from '@velocityuikit/velocityui'

export default function Example() {
  return <Skeleton width={200} height={20} />
}

Multi-line text

tsx

import { Skeleton } from '@velocityuikit/velocityui'

export default function Example() {
  return <Skeleton lines={4} height={14} />
}

Card skeleton

tsx

import { Skeleton } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', width: 280 }}>
      <Skeleton height={160} radius={12} />
      <Skeleton height={18} width="60%" />
      <Skeleton lines={3} height={13} />
    </div>
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

css

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */