Components

Card

Reference for creating interactive cards with icons, images, and call-to-action buttons using the Card component.

Overview

Create visually appealing cards for navigation, features, products, or content previews. Cards support icons, images, CTAs, and can be arranged in vertical or horizontal layouts.

Common use cases:

Feature showcases with icons and descriptions
Navigation cards linking to documentation sections
Product or service listings with images
Quick links with visual hierarchy
Getting started guides and tutorials

Getting Started

Learn the fundamentals and get your project up and running in minutes.

API Reference

Explore our complete API documentation with interactive examples.

Basic syntax

Use the <Card> component to create clickable cards with titles, icons, and descriptions:

<Card title="Getting Started" icon="book-open" href="/docs/quickstart">
  Learn the fundamentals and get your project up and running in minutes.
</Card>

Getting Started

Learn the fundamentals and get your project up and running in minutes.

Cards are clickable links by default. The entire card area is interactive when an href is provided.

Card layouts

Vertical cards

Default layout with icon and content stacked vertically:

<Card title="Authentication" icon="lock" href="/docs/auth">
  Secure your application with built-in authentication features.
</Card>

Authentication

Secure your application with built-in authentication features.

Horizontal cards

Use horizontal prop for side-by-side icon and content layout:

<Card title="Team Collaboration" icon="users" href="/docs/teams" horizontal>
  Work together seamlessly with role-based access control.
</Card>

Team Collaboration

Work together seamlessly with role-based access control.

Horizontal layout works best for compact cards with shorter descriptions.

Card with images

Add visual appeal with header images:

<Card 
  title="Getting Started Guide" 
  icon="book-open" 
  href="/docs/quickstart"
  image="https://example.com/image.jpg"
>
  Learn the fundamentals and get your project up and running in minutes.
</Card>

Database Management

Master database operations with best practices for schema design and migrations.

Images are displayed at full width above the card content. Choose images with appropriate aspect ratios.

Call-to-action buttons

Add explicit CTAs to encourage user interaction:

<Card 
  title="Component Library" 
  icon="box" 
  href="/docs/components" 
  cta="Browse Components"
>
  Build beautiful UIs with our extensive collection of pre-built components.
</Card>

Component Library

Build beautiful UIs with our extensive collection of pre-built components.

CTAs with horizontal layout

<Card 
  title="Analytics Dashboard" 
  icon="bar-chart" 
  href="/docs/analytics" 
  horizontal 
  cta="Explore"
>
  Track user behavior and monitor application metrics in real-time.
</Card>

Analytics Dashboard

Track user behavior and monitor application metrics in real-time.

Using with Columns

Organize multiple cards in responsive grid layouts using the <Columns> component:

<Columns cols={2}>
  <Card title="Cloud Deployment" icon="cloud" href="/docs/deploy">
    Deploy your application to the cloud with step-by-step guides.
  </Card>
  <Card title="CLI Tools" icon="terminal" href="/docs/cli">
    Streamline your workflow with powerful command-line tools.
  </Card>
  <Card title="Configuration" icon="settings" href="/docs/config">
    Customize every aspect of your application.
  </Card>
</Columns>

Cloud Deployment

Deploy your application to the cloud with step-by-step guides.

CLI Tools

Streamline your workflow with powerful command-line tools.

Configuration

Customize every aspect of your application.

Columns supports cols={2}, cols={3}, cols={4}, or cols={5} for responsive grid layouts.

External links

Open links in new tabs using the target attribute:

<Card 
  title="GitHub Repository" 
  icon="github" 
  href="https://github.com/example/repo" 
  target="_blank"
  cta="View on GitHub"
>
  Explore the source code and contribute to the project.
</Card>

Use target="_blank" for external links to open them in new tabs.

Icons

Cards support Lucide icons for visual identification. Use icon names without the "Icon" suffix:

<Columns cols={3}>
  <Card title="Security" icon="shield" href="/docs/security">
    Implement industry-standard security measures.
  </Card>
  <Card title="Performance" icon="zap" href="/docs/performance">
    Optimize for speed and efficiency.
  </Card>
  <Card title="Analytics" icon="bar-chart" href="/docs/analytics">
    Track metrics and user behavior.
  </Card>
</Columns>

Security

Implement industry-standard security measures.

Performance

Optimize for speed and efficiency.

Analytics

Track metrics and user behavior.

Popular icons:
book-open, code, database, lock, users, zap, cloud, terminal, settings, shield, bar-chart, webhook, box, palette, github, rocket, arrow-right-left

View all available Lucide icons →

Attributes

titlestring

Required

Card heading text displayed prominently at the top.

hrefstring

Required

Link destination URL. Can be relative (/docs/guide) or absolute (https://example.com).

iconstring

Lucide icon name (without "Icon" suffix). Displays in brand color.

imagestring

Header image URL displayed above card content at full width.

ctastring

Call-to-action text displayed as a link with arrow icon.

horizontalboolean

Use horizontal layout with icon beside content (default: false).

targetstring

Link target: _self (same tab, default) or _blank (new tab).

Complete example

Combining all features for a rich card experience:

<Columns cols={2}>
  <Card 
    title="Getting Started Guide" 
    icon="book-open" 
    href="/docs/quickstart"
    cta="Read More"
    image="https://example.com/getting-started.jpg"
  >
    Learn the fundamentals and get your project up and running in minutes with our comprehensive quickstart guide.
  </Card>
  
  <Card 
    title="API Reference" 
    icon="code" 
    href="/docs/api"
    cta="View Docs"
    image="https://example.com/api-reference.jpg"
  >
    Explore our complete API documentation with interactive examples and detailed endpoint descriptions.
  </Card>
  
  <Card 
    title="Community Discord" 
    icon="message-circle" 
    href="https://discord.gg/example"
    target="_blank"
    cta="Join Now"
    horizontal
  >
    Connect with developers, get help, and share your projects.
  </Card>
  
  <Card 
    title="GitHub Repository" 
    icon="github" 
    href="https://github.com/example/repo"
    target="_blank"
    cta="View Source"
    horizontal
  >
    Explore the source code and contribute to the project.
  </Card>
</Columns>

Common patterns

Feature showcases - Grid of cards with icons highlighting product capabilities
Documentation navigation - Cards linking to major documentation sections
Getting started flows - Sequential cards with numbered icons or steps
Resource links - External links to GitHub, Discord, community resources
Product/service listings - Cards with images showing offerings
Tutorial series - Horizontal cards for compact tutorial navigation
API endpoint groups - Organized cards for different API categories
Mixed layouts - Combine vertical cards with images and horizontal cards for variety

Cards automatically adapt to mobile devices, stacking vertically regardless of the Columns configuration.