Docscn

Card

Link cards with an icon, title and description.

Installation

npx shadcn@latest add @docscn/card

Usage

<Cards>
  <Card
    title="Getting started"
    href="/docs/getting-started"
    description="Add docs to your project."
  />
  <Card
    title="Fumadocs"
    href="https://fumadocs.dev"
    description="The framework docscn builds on."
  />
</Cards>
Getting started
Add docs to your project.
Fumadocs
The framework docscn builds on.

Props

PropTypeDescription
titleReactNodeThe card's title.
descriptionReactNodeText below the title.
iconReactNodeAn icon above the title.
hrefstringMakes the card a link.
externalbooleanOpen the link as an external link.

Children render below the description. Cards lays cards out in two columns, and one on narrow containers. Card is built on shadcn/ui card.

Callout

Highlight notes, tips and warnings.

Heading

Headings with anchor links.