/>
MDX UI
$ init
Card

Card

Card layout components for grouping content, plus LinkCard for navigation grids

Installation

npx @ravikumarsurya/mdx-ui add card

Usage

<Card>
  <CardHeader>
    <CardTitle>Getting started</CardTitle>
    <CardDescription>Install and configure mdx-ui in minutes.</CardDescription>
  </CardHeader>
  <CardContent>Run the CLI and pick your components.</CardContent>
</Card>

Examples

Basic card

Getting started

Install and configure mdx-ui in minutes.

Run the CLI and pick your components.
Free and open source.

Card with footer

Tabs

Tabbed content with keyboard navigation.

Supports ArrowLeft, ArrowRight, Home, and End for accessibility.

View docs →

Navigation grid with LinkCard

Common pattern for docs homepages — link cards in a grid:

<div className="grid grid-cols-2 gap-4">
  <LinkCard
    href="/docs/components/callout"
    title="Callout"
    description="Alert boxes for important information"
  />
  <LinkCard
    href="/docs/components/tabs"
    title="Tabs"
    description="Tabbed content sections"
  />
  <LinkCard
    href="/docs/components/accordion"
    title="Accordion"
    description="Collapsible sections"
  />
  <LinkCard
    href="/docs/components/code-block"
    title="Code Block"
    description="Syntax highlighted code"
  />
</div>
Callout
Alert boxes for important information
Tabs
Tabbed content sections
Accordion
Collapsible sections
Code Block
Syntax highlighted code

Props

Card, CardHeader, CardContent, CardFooter

Standard div props plus className.

CardTitle

Standard heading props plus className. Renders an <h3>.

CardDescription

Standard paragraph props plus className.

LinkCard

PropTypeDescription
titlestringCard heading (required)
descriptionstringOptional subtitle below the title
hrefstringLink destination
classNamestringExtra classes on the <a> element
childrenReactNodeAdditional content below description
PreviousBlockquote
NextCallout