Card

Basic usage

<Card title="Quick Start" href="/quickstart">
  Get your first docs site deployed in under 5 minutes.
</Card>

Quick Start

Get your first docs site deployed in under 5 minutes.

Icons

The icon prop accepts three formats and picks the right renderer automatically.

Lucide icon name

Pass any registered Lucide icon name (see the full list at Icon component) and the card renders a themed tinted icon block:

<Card title="Launch" icon="rocket" href="/quickstart">
  Get started in 5 minutes.
</Card>

<Card title="API Reference" icon="code" href="/api-reference">
  Complete REST API documentation.
</Card>

<Card title="Guides" icon="book-open" href="/guides">
  Deep dives and tutorials.
</Card>

Launch

Get started in 5 minutes.

API Reference

Complete REST API documentation.

Guides

Deep dives and tutorials.

Image URL

Pass a URL (starting with http://, https://, or /) and the card renders it as an <img>:

<Card title="Custom logo" icon="/logo.svg" href="/">
  Branded card with your own image.
</Card>

Emoji (backward compatible)

Any other string is rendered as text — perfect for emoji:

<Card title="Fast" icon="⚡" href="/performance">
  Edge-cached on every deploy.
</Card>

Fast

Edge-cached on every deploy.

Custom icon color

Override the tint color of a Lucide icon with the iconColor prop:

<Card title="Deploy" icon="rocket" iconColor="#10B981" href="/deploy">
  Shipped in seconds.
</Card>

Image card

Set img to display a hero image at the top of the card:

<Card title="Deployment Guide" img="/images/deploy-preview.png" href="/guides/deploy">
  Learn how the build pipeline works.
</Card>

Horizontal layout

Set horizontal for a side-by-side layout — image or icon on the left, text on the right:

<Card title="Quick Start" icon="rocket" horizontal href="/quickstart">
  Get your docs site live in 5 minutes.
</Card>

<Card title="Deployment Guide" img="/images/deploy-preview.png" horizontal href="/guides/deploy">
  Learn how the build pipeline works.
</Card>

Custom styling with className

Pass className to add Tailwind utility classes or your own CSS classes to the card container:

<Card title="Highlighted" icon="star" className="border-yellow-500/50 bg-yellow-500/5">
  This card has a custom border and background tint.
</Card>

Card grid

Use <CardGroup> with 1-4 columns to create a responsive grid.

<CardGroup cols={2}>
  <Card title="Configuration" icon="settings" href="/configuration/config-file">
    Learn how to configure your docs site.
  </Card>
  <Card title="Components" icon="layers" href="/components/callout">
    Explore built-in MDX components.
  </Card>
  <Card title="API Reference" icon="code" href="/api-reference/introduction">
    Integrate with the NookDocs API.
  </Card>
  <Card title="Custom Domain" icon="globe" href="/deploy/custom-domain">
    Set up docs.yoursite.com.
  </Card>
</CardGroup>

Configuration

Learn how to configure your docs site.

Components

Explore built-in MDX components.

API Reference

Integrate with the NookDocs API.

Custom Domain

Set up docs.yoursite.com.

Props

Prop	Type	Required	Description
`title`	`string`	Yes	Card heading
`icon`	`string`	No	Icon name (Lucide, Tabler, Font Awesome), image URL, or emoji
`iconType`	`string`	No	Font Awesome style, when the icon comes from that library: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`
`type`	`info` \| `warning` \| `note` \| `tip` \| `check` \| `danger`	No	Give the card a callout theme — background and border take that signal color, so a warning card and a warning callout read as the same thing
`iconColor`	`string`	No	Override icon tint color (hex)
`color`	`string`	No	Alias for `iconColor` (Mintlify compat)
`img`	`string`	No	Hero image URL displayed at the top (or left in horizontal mode)
`horizontal`	`boolean`	No	Side-by-side layout: image/icon left, text right
`href`	`string`	No	Link destination — if set, the whole card is clickable
`cta`	`string`	No	Call-to-action button text shown at the bottom
`arrow`	`boolean`	—	Show/hide link arrow (default: shows when `cta` is set)
`className`	`string`	No	Additional CSS class names applied to the card container

CardGroup

Prop	Type	Default	Description
`cols`	`1 \| 2 \| 3 \| 4`	`2`	Number of columns on desktop (responsive collapses to 1 on mobile)