Premium components
Live docs, props and variants for the premium component library.
KpiCard
Compact KPI tile with optional sparkline, delta badge and a hero (dark) variant. Use inside grid/flex rows.
import { KpiCard, KpiCardSkeleton } from "@/components/premium/KpiCard";Tones
primary · indigo · emerald · amber · dark (hero)
With sparkline
Pass a `spark` array (numeric) to render a 7-day trend.
Loading skeleton
Pass `loading` (or render `KpiCardSkeleton` directly). Shape-matched, zero layout shift.
Clickable
Pass `onClick` to make the whole card a button.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Uppercase label above the value. |
| value | string | — | Big tabular-nums display value. |
| icon | LucideIcon | — | Lucide icon shown in the rounded badge. |
| tone | "primary" | "indigo" | "emerald" | "amber" | "dark" | "primary" | Color treatment. `dark` produces the hero variant with glow. |
| delta | string | — | Optional success-tinted trend pill (e.g. `+8%`). |
| caption | string | — | Neutral caption shown when `delta` is absent. |
| spark | number[] | — | Sparkline data; needs at least 2 points. |
| onClick | () => void | — | Makes the card behave as a button. |
| loading | boolean | false | Render a shape-matched skeleton during fetch. |
ExpandableCard
Animated reveal card. Pairs with SectionHeading and a row of KpiCards. Supports controlled or uncontrolled state.
import { ExpandableCard, ExpandableCardSkeleton } from "@/components/premium/ExpandableCard";Default (uncontrolled)
Click the header to expand. `defaultOpen` controls initial state.
Hidden details only render when expanded.
Body uses muted background and border-top divider automatically.
Accent + controlled
`accent` adds a left rail (any bg-* class). `open` + `onOpenChange` make it controlled.
- Hilton Berlin — BAFO due Friday
- Marriott Lisbon — awaiting CFO sign-off
- NH Madrid — chase scheduled tomorrow
Loading skeleton
Pass `loading` or render `ExpandableCardSkeleton`. Matches the collapsed shape exactly.
| Prop | Type | Default | Description |
|---|---|---|---|
| header | ReactNode | — | Always-visible header content. |
| children | ReactNode | — | Hidden content revealed on expand. |
| accent | string | — | Tailwind `bg-*` class for the left accent bar. |
| actions | ReactNode | — | Trailing actions to the right of the chevron. |
| defaultOpen | boolean | false | Initial expanded state (uncontrolled). |
| open | boolean | — | Controlled open state. |
| onOpenChange | (open: boolean) => void | — | Fires whenever expansion toggles. |
| className | string | — | Extra classes on the root card. |
| loading | boolean | false | Render skeleton matching the collapsed shape. |
SectionHeading
Consistent header for cards, sections and panels. Three sizes: small caps title, eyebrow, or large gradient display.
import { SectionHeading } from "@/components/premium/SectionHeading";Small caps title (default)
The primary form. Use as the standard panel header.
Today's actions
Quick wins to clear before end of day
Eyebrow + small title
Use when you need a colored kicker above the title.
Pipeline value
Deals scheduled to close this quarter
Display title (gradient)
Use sparingly — page or hero-section level.
Sourcing performance
Multi-year savings and adoption trends
Tones
primary · success · warning · urgent — recolors the icon badge.
Tone: primary
Tone: success
Tone: warning
Tone: urgent
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Required uppercase small-caps title. |
| eyebrow | string | — | Optional gradient kicker rendered above the title. |
| display | string | — | Replaces `title` with a large gradient display heading. |
| icon | LucideIcon | — | Lucide icon shown in a rounded tinted badge on the left. |
| tone | "primary" | "success" | "warning" | "urgent" | "primary" | Color treatment for the icon badge. |
| trailing | ReactNode | — | Right-aligned slot for badges, buttons or links. |
| description | string | — | One-line subtitle below the title. |
| className | string | — | Extra classes on the root flex container. |
StatusPill
Tone-coded short-label indicator. Single source for stage chips, urgency badges, semantic states.
import { StatusPill } from "@/components/StatusPill";Tones
success · primary · warning · destructive · muted
Sizes
xs · sm · md — same tone, different vertical rhythm
TopsisScoreBadge
Composite score 0-100 badge. Tone thresholds match vanilla v56: ≥75 green · 60-74 purple · 45-59 amber · <45 red.
import { TopsisScoreBadge } from "@/components/TopsisScoreBadge";Tone progression
Same component, different composite values
Brand-voiced SVG illustrations
Purpose-built per moment. Use as the illustration prop on EmptyState/ErrorState.
import { NoProposalsIllustration, AllDoneIllustration, CompassLostIllustration, AwaitingResponsesIllustration } from "@/components/illustrations";All five
Each is purpose-built for a specific empty/error moment.
NoProposalsAllDoneCompassLostAwaitingResponsesScoreUnavailable