卡片 | MkSaaS - 最好的 AI SaaS 模板

Learn More about Caching and Revalidation

使用方法

将其添加到您的 MDX 组件中。

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

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

有关用法，请参见 Markdown。

卡片的容器。

基于 Next.js 的 <Link />。

图标的树摇优化

如果您没有使用 Fumadocs MDX 来渲染 MDX（例如，使用 Contentlayer），请确保树摇优化正常工作。

大多数图标库支持单独导入图标。

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

作为解决方法，您也可以将图标传递给 MDX 组件。（这使用 Next.js 打包器而不是内容源）

page.tsx

import { HomeIcon } from 'lucide-react';

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