Card

Docs

Use the Card component in your MDX documentation

Usage

Add it to your MDX components.

import { Card, Cards } from 'next-docs-ui/mdx'
 
<MDX
  components={{
    Card: props => <Card {...props} />,
    Cards: props => <Cards {...props} />
  }}
/>

Cards

The container of cards.

The component to redirect users.

Prop	Type	Default
`title`	`string`	-
`description`	`string`	-
`icon`	`ReactNode`	-
`href`	`string`	-

Example

Pass the href, title and description.

<Cards>
  <Card
    href="https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating"
    title="Fetching, Caching, and Revalidating"
    description="Learn more about caching in Next.js"
  />
</Cards>

Fetching, Caching, and Revalidating

Learn more about caching in Next.js

With Icons

import { HomeIcon } from 'lucide-react'
 
<Cards>
  <Card
    icon={<HomeIcon />}
    href="/"
    title="Home"
    description="Go back to home"
  />
</Cards>

Home

Go back to home

Last updated on

Accordion

Code Block

Card

Usage

Cards

Card

Example

Fetching, Caching, and Revalidating

With Icons

Home

On this page