Lucent UI
← OnboardingFlowDashboardHeaderConfirmationDialog →
✦ LLM-ready

DashboardHeader

pattern

Page header with breadcrumb navigation, page title with icon action buttons, and a row of stat cards with trend chips. Composes Breadcrumb, Text, Row, Stack, Card, Chip, Button, and Tooltip.

"Build a DashboardHeader pattern from lucent-ui with Breadcrumb, page title, action buttons, and stat cards with trend Chips."

Usage

React / JSX
import { Breadcrumb, Text, Row, Stack, Card, Chip, Button, Tooltip } from 'lucent-ui'

<DashboardHeader />

Installation

pnpm add lucent-ui

API Reference

DashboardHeader props — * required

PropTypeDefaultDescription
Breadcrumbcomponent—Navigation trail (e.g. Home > Dashboard).
Textcomponent—Page title and stat labels/values.
Buttoncomponent—Action buttons (Export, New report).
Cardcomponent—Stat cards for key metrics.
Chipcomponent—Trend indicators (+12%, -3%).
Rowcomponent—Horizontal layout for title row and stat cards.
Stackcomponent—Vertical layout for the full header.