LogoMkSaaS Docs
LogoMkSaaS Docs
Homepage

Introduction

Quick StartWhat is FumadocsComparisons

Setup

Manual InstallationStatic Export

Writing

MarkdownInternationalization

UI

OverviewThemesSearch
Components
MDX
CalloutCardCode BlockHeading
X (Twitter)
MDX

Card

Use the Card component in your MDX documentation

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.

Card

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)

Callout

Add callout to your docs

Code Block

Adding code blocks to your docs

Table of Contents

Usage
Cards
Card
page.tsx
import { HomeIcon } from 'lucide-react';

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