16aaf55a91
- Updated content collections to include new schemas for better document handling. - Added new documentation files for comparisons, customization, and internationalization. - Introduced a manual installation guide and improved markdown support. - Updated package.json with new dependencies for enhanced functionality. - Added new images for documentation and improved layout components for better user experience. - Adjusted TypeScript configurations for better path management.
57 lines
1.0 KiB
Plaintext
57 lines
1.0 KiB
Plaintext
---
|
|
title: Card
|
|
description: Use the Card component in your MDX documentation
|
|
preview: card
|
|
---
|
|
|
|
## Usage
|
|
|
|
Add it to your MDX components.
|
|
|
|
```tsx
|
|
import { Card, Cards } from 'fumadocs-ui/components/card';
|
|
|
|
<MDX
|
|
components={{
|
|
Card,
|
|
Cards,
|
|
}}
|
|
/>;
|
|
```
|
|
|
|
See [Markdown](/docs/markdown#cards) for usages.
|
|
|
|
### Cards
|
|
|
|
The container of cards.
|
|
|
|
### Card
|
|
|
|
Based on Next.js `<Link />`.
|
|
|
|
<AutoTypeTable path="./content/docs/props.ts" name="CardProps" />
|
|
|
|
<Callout title="Tree Shaking on icons" type="warn">
|
|
|
|
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.
|
|
|
|
```tsx
|
|
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)
|
|
|
|
```tsx title="page.tsx"
|
|
import { HomeIcon } from 'lucide-react';
|
|
|
|
const components = {
|
|
...defaultComponents,
|
|
HomeIcon,
|
|
};
|
|
```
|
|
|
|
</Callout>
|