Card
Card
Card layout components for grouping content, plus LinkCard for navigation grids
Getting started
Install and configure DocsUI in minutes.
Run the CLI and pick your components.
Free and open source.
Installation
npx docsui-cli@latest add cardUsage
<Card>
<CardHeader>
<CardTitle>Getting started</CardTitle>
<CardDescription>Install and configure DocsUI in minutes.</CardDescription>
</CardHeader>
<CardContent>Run the CLI and pick your components.</CardContent>
</Card>Examples
Basic card
Getting started
Install and configure DocsUI 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.
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
| Prop | Type | Description |
|---|---|---|
title | string | Card heading (required) |
description | string | Optional subtitle below the title |
href | string | Link destination |
className | string | Extra classes on the <a> element |
children | ReactNode | Additional content below description |