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,
    Cards,
  }}
/>;

See Markdown for usages.

Cards

The container of cards.

Based on Next.js <Link />.

Prop	Type	Default
`icon`	`ReactNode`	-
`prefetch`	`boolean`	`true`
`replace`	`boolean`	`false`
`external`	`boolean`	-
`href`	`string`	-
`description`	`string`	-

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

With Icons

Home

On this page