EmptyState

molecule

Zero-data placeholder with an optional illustration, description, and a call-to-action button for guiding users to take action.

"Add an EmptyState from lucent-ui to an empty list. Include a search icon as the illustration, a title, description, and a 'New item' CTA button."

Usage

React / JSX

import { EmptyState } from 'lucent-ui'

<EmptyState title="EmptyState" description="EmptyState" />

pnpm add lucent-ui

EmptyState props — * required

Prop	Type	Default	Description
`title`*	`string`	—	Primary empty-state message.
`description`	`string`	—	Secondary hint below the title.
`illustration`	`React.ReactNode`	—	Icon or image above the title.
`action`	`React.ReactNode`	—	CTA button or link below the description.