Card

Use the Card component in your MDX documentation

Historical Fumadocs template

Historical template documentation, retained for existing links. It is not current ClaudeSkills product guidance.

This article has no translation in the selected language. The English body is shown.

The navigation uses English labels. Article languages are shown separately; the interface is not a full translation of the documentation.

On this page

Usage

Add it to your MDX components.

import { Card, Cards } from 'fumadocs-ui/components/card';

<MDX
  components={{
    Card,
    Cards,
  }}
/>;

See Markdown for usages.

The container of cards.

Based on Next.js <Link />.

Tree Shaking on icons

If you're not using Fumadocs MDX for rendering MDX (e.g. using Contentlayer), 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. (this uses Next.js bundler instead of content source)

import { HomeIcon } from 'lucide-react';

const components = {
  ...defaultComponents,
  HomeIcon,
};