Components
Card
Display content in organized, clickable cards with icons or images
Overview
The <Card> component creates visual containers for content that support text, icons, images, and links. Perfect for showcasing features, documentation links, or any grouped content.
Basic Usage
<Card title="Getting Started" icon="book" href="/docs/installation">
Complete guide to setting up your documentation site.
</Card>Layout Options
Vertical Layout (Default)
Vertical cards display icon/image at the top with content below:
<Card title="Documentation" icon="book" href="/docs">
Browse through comprehensive guides and tutorials.
</Card>Horizontal Layout
Compact layout with icon/image on the left:
<Card
title="Quick Reference"
icon="terminal"
href="/docs/quick-start"
horizontal
>
Fast-track your way through essential features.
</Card>Card Groups
Use <CardGroup> to organize multiple cards in a responsive grid:
<CardGroup cols={3}>
<Card title="Installation" icon="download" href="/docs/installation">
Get started in minutes.
</Card>
<Card title="Configuration" icon="settings" href="/docs/configuration">
Customize your setup.
</Card>
<Card title="Components" icon="code" href="/docs/components">
Explore available components.
</Card>
</CardGroup>CardGroup Props
Number of columns in the grid layout.
Default: 2
Options: 1, 2, 3, 4
<CardGroup cols={3}>{/* Cards here */}</CardGroup>With Icons
Cards with icons are great for feature showcases:
Fast Search
Instant search powered by FlexSearch.
Beautiful UI
Modern design with Chakra UI v3.
Type Safe
Full TypeScript support throughout.
<CardGroup cols={3}>
<Card title="Fast Search" icon="search">
Instant search powered by FlexSearch.
</Card>
<Card title="Beautiful UI" icon="palette">
Modern design with Chakra UI v3.
</Card>
<Card title="Type Safe" icon="code">
Full TypeScript support throughout.
</Card>
</CardGroup>With Images
Vertical Image Cards
Images display as full-width banners at the top:
<Card
title="Feature Showcase"
img="https://placehold.co/400x200/6366f1/white?text=Feature"
href="/docs/features"
>
Explore all the powerful features available.
</Card>Horizontal Image Cards
Images display as square thumbnails on the left:
<Card
title="Latest Updates"
img="https://placehold.co/400x400/6366f1/white?text=News"
href="/changelog"
horizontal
>
Check out what's new in the latest release.
</Card>Props
The title displayed on the card.
<Card title="Installation Guide">Step-by-step installation instructions.</Card>Icon displayed on the card. Uses the icon registry.
Available icons: book, terminal, code, download, settings, search, palette, users, play, lightbulb, file-text, info, alert-circle, check-circle, package
<Card title="Quick Start" icon="terminal">
Get up and running quickly.
</Card>Image URL displayed at the top (vertical) or left (horizontal) of the card.
<Card title="Feature Preview" img="https://placehold.co/400x200">
Visual showcase of the feature.
</Card>URL to navigate to when the card is clicked. Supports both internal and external links.
<Card title="API Reference" icon="code" href="/api-reference">
Explore the complete API documentation.
</Card>Display the card in a compact horizontal layout instead of vertical.
Default: false
<Card title="Quick Tip" icon="lightbulb" horizontal>
Cards can be displayed horizontally too.
</Card>Description or content text displayed below the title.
<Card title="Feature" icon="code">
This is the description that appears below the title.
</Card>Next, explore the Callout Component for highlighting important information.