Components

Every component of the kit with a live preview, the code that produced it, the command to add it and its props.

Foundation

Button

Button and buttonVariants, from shadcn/ui, with the look of the kit.

Read

Foundation

ToneBadge

The only way to show a status color.

Read

Foundation

Icon

A lucide icon by its kebab-case name, or a brand logo as brand:<slug>.

Read

Layout

SectionHeader

Mono eyebrow, heading and lede.

Read

Layout

Hero

Badge, headline, lede, command and actions.

Read

Layout

CtaBand

Closing headline with a command and actions.

Read

Layout

SiteFooter

Brand, link columns and a legal bar.

Read

Content

ItemCard

ItemCard and CardGrid for catalogs.

Read

Content

FeatureGrid

Icon, eyebrow, title and text.

Read

Content

StatRow

Two to five numbers, each with a label and a note.

Read

Content

FlowDiagram

Steps in a row that stack on small screens.

Read

Content

Callout

A note, a tip, an important point, a warning or a caution.

Read

Content

SideCard

A card of metadata, links and tags beside the text of a detail page, collapsed on a phone.

Read

Reference and commands

ReferenceTable

A table for a reference: names in code, a type, a default, allowed values and a text, in a scrollable region.

Read

Reference and commands

CommandTable

A command and what it does.

Read

Reference and commands

CommandBox

A copyable shell command.

Read

Navigation and page

Breadcrumbs

Breadcrumb trail for a page.

Read

Navigation and page

CatalogFilter

A text field and tag buttons that narrow the cards of an index page, with the state in the address.

Read

Navigation and page

PageInfo

The line at the foot of a page: an edit link and the date of the last change.

Read