System
All four slots present: icon → badge → title → description. The icon is a slot, so the caller owns its size and color. One width prop governs the whole measure, and the vertical rhythm is baked to an 8 / 20 / 8 cadence.
Describe the screen in plain language, get a real layout back in seconds, then refine every token by hand until it looks like you drew it.
Every slot but titleis optional. Drop the ones a moment doesn't need. The first visible element never carries a top margin, so the cadence holds no matter what's present.
Change a value once and it propagates to Figma, the component library, and production on the next build.
With no icon, the badge becomes the first element and loses its top margin.
align="center" (default) for hero moments and empty states; align="left" or align="right" when the lock-up anchors to one edge of a column or sits beside other content.
It proposes layouts, states, and copy. You keep taste and final say.
Tokens, components, and usage docs move in lockstep, no more drift between the file and the code.
Variables map to code tokens on every sync, so the handoff is just a pull.
width sets the container measure the whole lock-up inherits: sm · md · lg · xl · 2xl (default). Narrow it to keep a supporting line from running too wide.
Short, punchy microcopy for a focused prompt.
Enough room for a sentence of supporting context about how the model fits into your workflow without running edge to edge.
Use it for the payoff moment where the copy needs to breathe across the full column, like the closing pitch on a landing page for an AI-native design tool.
A wrapping title uses the type scale's paired leading (24/32 at desktop size). multilineTitle pulls the wrapped lines one grid step tighter (24/28) so a multi-line headline reads as one unit instead of drifting apart.
Paired leading leaves the wrapped lines more open.
Tighter leading pulls the wrapped lines into one headline.
Every prop the component accepts.
| Prop | Type | Default | Notes |
|---|---|---|---|
title | ReactNode | required | The headline; the only required slot |
icon | ReactNode | none | Icon slot above the badge; caller owns size, color, animation |
badge | ReactNode | none | Eyebrow text, rendered in a secondary Badge |
description | ReactNode | none | Muted supporting line under the title |
width | sm · md · lg · xl · 2xl | 2xl | Container measure the whole lock-up inherits |
align | center · left · right | center | Horizontal alignment of every slot |
multilineTitle | boolean | false | Tighten title leading for a multi-line headline |
titleAs | h1 · h2 · h3 | h2 | Heading element for the title (semantics) |
className | string | none | Page-specific positioning (overlap offsets, z-index) |