API Reference
Cards
Navigation tiles that link to related pages, grouped into a responsive grid.
A Card is a navigation surface: a tile that links to a related page (or stands alone as an
informational block). Group them with CardGroup to lay out a 1–4 column grid.
When to use it
Use cards to point the reader at where to go next — a grid of related pages at the end of a
section, or a row of entry points on a landing page. Drop the href and a card reads as a plain
informational tile instead of a link.
Props
Card
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | — | The card heading |
description | ReactNode | — | A one-line gloss under the title |
icon | string | ReactNode | — | A lucide icon name (or a node) shown on the card |
href | string | — | Makes the card a link; omit for an informational tile |
children | ReactNode | — | Body content below the description |
CardGroup
| Prop | Type | Default | Description |
|---|---|---|---|
cols | 1 | 2 | 3 | 4 | 2 | Columns at desktop width (collapses on mobile) |
children | ReactNode | — | One or more <Card> elements |
Live example
With an icon + link
Optional icon, title, description, and href.
Plain card
Cards without an href read as informational tiles.