Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/shuding/nextra/llms.txt

Use this file to discover all available pages before exploring further.

The Cards component renders a responsive grid of clickable cards, each linking to an internal or external URL. Cards work well for navigation hubs, feature showcases, and related-content sections. Each individual card is exposed as Cards.Card so the two are always imported together from a single named export.

​
Import

import { Cards } from 'nextra/components'

​
Props

​
<Cards>

PropTypeDefaultDescription
numnumber3Number of columns in the grid.
classNamestring—Additional CSS class names for the grid container.

​
<Cards.Card>

PropTypeDefaultDescription
titlestring—Required. The card heading text.
hrefstring—Required. The URL the card links to. Supports Next.js <Link>.
iconReactElement—A React element rendered before the title — typically an SVG icon.
arrowbooleanfalseWhen true, appends an animated → to the title on hover.
childrenReactNode—Optional content (such as an image) rendered above the title row.
classNamestring—Additional CSS class names for the card.

​
Usage

​
Basic Grouped Cards

Wrap multiple <Cards.Card> elements in a <Cards> container to produce a uniform grid layout. 
import { Cards } from 'nextra/components'

<Cards>
  <Cards.Card title="Getting Started" href="/getting-started" />
  <Cards.Card title="API Reference" href="/api" />
  <Cards.Card title="Examples" href="/examples" />
</Cards>

​
Cards with Icons

Pass any React element to the icon prop to display it at the start of the card title row. You can import your own SVG icons or use a third-party icon library. 
import { Cards } from 'nextra/components'
import { RocketIcon, BookIcon, CodeIcon } from '../components/icons'

<Cards>
  <Cards.Card icon={<RocketIcon />} title="Quick Start" href="/quick-start" />
  <Cards.Card icon={<BookIcon />} title="Guides" href="/guides" />
  <Cards.Card icon={<CodeIcon />} title="API Reference" href="/api" />
</Cards>

​
Card with Arrow

The arrow prop adds a right-arrow indicator that translates slightly on hover, providing a clear affordance that the card is a link. 
import { Cards } from 'nextra/components'

<Cards>
  <Cards.Card arrow title="API Reference" href="/api" />
  <Cards.Card arrow title="Changelog" href="/changelog" />
</Cards>

​
Controlling Column Count

Use the num prop on <Cards> to override the default three-column layout. 
import { Cards } from 'nextra/components'

<Cards num={2}>
  <Cards.Card title="Docs Theme" href="/docs-theme" />
  <Cards.Card title="Blog Theme" href="/blog-theme" />
</Cards>

​
Cards with Images

Provide a children element — typically a Markdown image — to display a visual above the card title. The card automatically switches to a richer elevated style when children are present. 
import { Cards } from 'nextra/components'

<Cards num={2}>
  <Cards.Card title="Docs Theme" href="/docs-theme">
    <>![Docs theme screenshot](/assets/docs-theme.png)</>
  </Cards.Card>
  <Cards.Card title="Blog Theme" href="/blog-theme">
    <>![Blog theme screenshot](/assets/blog-theme.png)</>
  </Cards.Card>
</Cards>
Wrapping the image in a React fragment (<>…</>) prevents MDX from treating it as a direct child paragraph, which avoids unwanted margin or padding from prose styles.

​
Single Standalone Card

A <Cards.Card> used outside a <Cards> wrapper is rendered without the grid, useful for a single prominent call-to-action link. 
import { Cards } from 'nextra/components'

<Cards.Card
  arrow
  title="Read the migration guide"
  href="/migration"
/>

​
Complete Example

import { Cards } from 'nextra/components'
import { WarningIcon, CardsIcon, OneIcon } from '../components/icons'

<Cards>
  <Cards.Card
    icon={<WarningIcon />}
    title="Callout"
    href="/components/callout"
  />
  <Cards.Card
    icon={<CardsIcon />}
    title="Tabs"
    href="/components/tabs"
  />
  <Cards.Card
    icon={<OneIcon />}
    title="Steps"
    href="/components/steps"
    arrow
  />
</Cards>

Build docs developers (and LLMs) love

Get started for freeTalk to us