Card

Basic usage

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

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>

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>

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>

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/authentication">
    Integrate with the CodivDocs API.
  </Card>
  <Card title="Custom Domain" icon="globe" href="/configuration/custom-domain">
    Set up docs.yoursite.com.
  </Card>
</CardGroup>

Props

Card

CardGroup