Feedback

Skeleton

A loading placeholder. Hidden from assistive tech — the live region announces state.

Server safeSource

Import

import { Skeleton } from '@the_viveksingh/vivek-ui'

Placeholders

lines renders a paragraph of decreasing widths. The shimmer stops entirely under prefers-reduced-motion.

<Skeleton variant="rect" height={120} />
<Skeleton lines={3} />

Match the shape of what is loading

A skeleton that mirrors the final layout avoids a second reflow when the content arrives.

<Stack direction="horizontal" gap={4} align="center">
  <Skeleton variant="circle" width={48} height={48} />
  <Stack gap={2} style={{ flex: 1 }}>
    <Skeleton variant="text" width="40%" />
    <Skeleton variant="text" width="70%" />
  </Stack>
</Stack>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Skeleton
Prop	Type	Default	Description
`variant`	`'text' \| 'rect' \| 'circle'`	—	—
`width`	`string \| number`	—	—
`height`	`string \| number`	—	—
`lines`	`number`	—	Number of stacked lines. Only meaningful for `variant="text"`.
`static`	`boolean`	—	Turn off the shimmer.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Server safe

Skeleton carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.