SoarStarter TanStack
Components

Card

Display content in a card layout.

Usage

Card Title

Card description with details.

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

<Card title="Card Title" description="Card description with details." />

Link Card

Beautifully designed documentation template. Customizable. Compatible. Open Source.

<Card
  title="Link Card"
  description="Click to navigate."
  href="https://github.com"
/>

Card Group

<Cards>
  <Card title="Components" description="..." href="/docs/components/callout" />
  <Card title="Essentials" description="..." href="/docs/essentials/markdown" />
</Cards>

Props

Card

PropTypeDefault
titlestring-
descriptionstring-
hrefstring-
iconReactNode-
externalboolean-

Cards

PropTypeDefault
childrenReactNode-

On this page