Card

Hello World

Learn More about Caching and Revalidation

Usage

Add it to your MDX components.

import { Card, Cards } from 'fumadocs-ui/components/card';
 
<MDX
  components={{
    Card: (props) => <Card {...props} />,
    Cards: (props) => <Cards {...props} />,
  }}
/>

Cards

The container of cards.

Based on <Link />.

Prop	Type	Default
`prefetch`	`boolean`	`true`
`icon`	`ReactNode`	-
`replace`	`boolean`	`false`
`external`	`boolean`	-
`href`	`string`	-
`description`	`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>

Tree Shaking

If you're using Contentlayer, or other libraries for rendering MDX, ensure that tree shaking is working properly.

Most of the icon libraries support importing icons individually.

import HomeIcon from 'lucide-react/dist/esm/icons/home';

As a workaround, you can pass icons to MDX Components too.

import { HomeIcon } from 'lucide-react';
 
const components = {
  ...defaultComponents,
  HomeIcon,
};

Home

Go back to home

Card

Hello World

Usage

Cards

Card

Example

Fetching, Caching, and Revalidating

With Icons

Home

On this page