Lucent UI
← StatsRowEmptyStateCardCollapsibleCard →
✦ LLM-ready

EmptyStateCard

pattern

Empty state card composed from Card, EmptyState, Icon, Text, and Button. Features an icon illustration, heading, description, and a call-to-action button. Three variants: no results, getting started, and error.

"Create an EmptyStateCard using lucent-ui: Card wrapping EmptyState with an Icon illustration, title, description, and a CTA Button. Use three variants: no results, getting started, and error."

Usage

React / JSX
import { Card, EmptyState, Icon, Button } from 'lucent-ui'

<EmptyStateCard Card variant="outline" />

Installation

pnpm add lucent-ui

API Reference

EmptyStateCard props — * required

PropTypeDefaultDescription
Card variant"ghost" | "outline" | "filled" | "elevated""outline"Elevation level of the outer card.
EmptyState title*string—Heading text.
EmptyState descriptionstring—Supporting description text.
EmptyState illustrationReact.ReactNode—Icon or image above the title.
EmptyState actionReact.ReactNode—CTA button or link.