Card

Boxed content block with icon, title, and slot — group with CardGrid for responsive layouts.

Installation

npx nimbus-docs add card

yarn dlx nimbus-docs add card

pnpm dlx nimbus-docs add card

bunx nimbus-docs add card

Preview

Edit anywhere

Components live in your repo. Edit Tailwind classes, layout, or props — no fork needed.

<Card title="Edit anywhere" icon="ph:pencil-simple">
Components live in your repo. Edit Tailwind classes, layout, or props — no fork needed.
</Card>

Examples

Solo

A single card without an icon — useful for prose callouts that need a heading.

You own everything

Every component lives in your repo. No upstream API to break compatibility.

<Card title="You own everything">
Every component lives in your repo. No upstream API to break compatibility.
</Card>

With icon

Iconify slugs work out of the box — use any ph:* (Phosphor) name.

Agent-ready

Every page ships a markdown alternate so agents read content without parsing chrome.

<Card title="Agent-ready" icon="ph:robot">
Every page ships a markdown alternate so agents read content without parsing chrome.
</Card>

Card grid

Wrap multiple cards in CardGrid for a responsive landing-page block.

Fast

Astro static output. Pagefind search. No runtime framework tax.

Owned

Components copy into your repo. Edit freely.

Agent-first

Markdown alternates and llms.txt out of the box.

Composable

Install only what you need via nimbus-docs add.

<CardGrid>
<Card title="Fast" icon="ph:lightning">
  Astro static output. Pagefind search. No runtime framework tax.
</Card>
<Card title="Owned" icon="ph:package">
  Components copy into your repo. Edit freely.
</Card>
<Card title="Agent-first" icon="ph:robot">
  Markdown alternates and llms.txt out of the box.
</Card>
<Card title="Composable" icon="ph:puzzle-piece">
  Install only what you need via `nimbus-docs add`.
</Card>
</CardGrid>

API reference

Every prop the component accepts, sourced from a single declaration.

Prop	Type
`title` required	`string`
`icon`	`string`