Card | Nimbus

Installation

Included in the starter. Every new site has it in src/components/ui/card/. Import it where you need it, or register it in src/components.ts to use it on every page. If your site predates it, install it:

npx @cloudflare/nimbus-docs add card

yarn nimbus-docs add card

pnpm nimbus-docs add card

bunx @cloudflare/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>

Linked

With href, the whole card is the link, for a row of places to start.

Quickstart

Install Nimbus and publish your first page.

<Card title="Quickstart" icon="ph:lightning" href="/quickstart/">
Install Nimbus and publish your first page.
</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`	`string`
`icon`	`string`
`href`	`string`