Skeleton

Displays a placeholder preview of content before the data gets loaded to reduce load-time frustration.

Examples

Variant

State

Animate

import { Skeleton } from 'kalki-design'

<Skeleton></Skeleton>

npx kalki-design add skeleton

import { Skeleton } from 'kalki-design'

export default function Example() {
  return <Skeleton />
}

Name	Type	Default	Description
Name`variant`	Type`'text' \| 'circular' \| 'rectangular' \| 'rounded'`	Default`'text'`	DescriptionThe visual style of the skeleton.
Name`width`	Type`string \| number`	Default`—`	DescriptionOverrides the default width.
Name`height`	Type`string \| number`	Default`—`	DescriptionOverrides the default height.
Name`count`	Type`number`	Default`1`	DescriptionNumber of repeating skeleton lines to render.
Name`animate`	Type`boolean`	Default`true`	DescriptionWhether to show the pulse animation.