Skeleton

atom

Pulsing placeholder shapes — text lines, circle, and rectangle — that mirror content layout during loading.

"Add Skeleton placeholders from lucent-ui to replicate a card layout while data loads. Use circle for the avatar, rectangle for the image, and text lines for the content."

Usage

React / JSX

import { Skeleton } from 'lucent-ui'

<Skeleton variant="text" lines={1} />

Installation

pnpm add lucent-ui

API Reference

Skeleton props — * required

Prop	Type	Default	Description
`variant`	`"text" \| "circle" \| "rectangle"`	`"text"`	Shape of the skeleton.
`lines`	`number`	`1`	Number of text lines (only for variant="text").
`width`	`number \| string`	—	Width override.
`height`	`number \| string`	—	Height override.

← PreviousSpinner Next →Progress

Skeleton

Text lines

Shapes

Card placeholder

Usage

Installation

API Reference