Card

Layout

Stablev1.0.0

Flexible container component for grouping related content with optional header, content, and footer sections

Preview

Default Card

A simple card with default styling

Card content goes here.

Elevated Card

Card with shadow

This card has elevation.

Outline Card

Card with prominent border

This card has a border.

Hoverable Card

Interactive card

Hover over me!

Installation

npx @component-labs/cli add card

This will:
- Install required dependencies
- Copy the Card component to your project
- Add utility functions (cn helper)

Make sure you've initialized Component Labs first:
```bash
npx @component-labs/cli init
```

Usage

import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@component-labs/ui";

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content goes here.</p>
  </CardContent>
</Card>

Props

Name	Type	Default	Description
`Card.variant`	`"default" \| "elevated" \| "outline"`	`"default"`	Visual style variant
`Card.hoverable`	`boolean`	`false`	Whether the card has hover effects (for interactive cards)
`CardHeader`	`Component`	`-`	Container for card header content (title and description)
`CardTitle.as`	`"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"`	`"h3"`	HTML heading level
`CardDescription`	`Component`	`-`	Optional description text below the title
`CardContent`	`Component`	`-`	Main content area of the card
`CardFooter`	`Component`	`-`	Footer area for actions or metadata
`className`	`string`	`-`	Additional CSS classes (applies to all components)

Examples

Basic

Simple card with content

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content goes here.</p>
  </CardContent>
</Card>

With Footer

Card with actions in the footer

<Card>
  <CardHeader>
    <CardTitle>Create Project</CardTitle>
    <CardDescription>
      Deploy your new project in one-click.
    </CardDescription>
  </CardHeader>
  <CardContent>
    <Input placeholder="Project name" />
  </CardContent>
  <CardFooter>
    <Button>Create</Button>
    <Button variant="outline">Cancel</Button>
  </CardFooter>
</Card>

Elevated

Card with shadow

<Card variant="elevated">
  <CardHeader>
    <CardTitle>Notifications</CardTitle>
    <CardDescription>You have 3 unread messages</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Message content...</p>
  </CardContent>
</Card>

Outline

Card with prominent border

<Card variant="outline">
  <CardHeader>
    <CardTitle>Settings</CardTitle>
  </CardHeader>
  <CardContent>
    <p>Configuration options...</p>
  </CardContent>
</Card>

Hoverable

Interactive card with hover effect

<Card hoverable onClick={() => navigate('/details')}>
  <CardHeader>
    <CardTitle>Product Card</CardTitle>
    <CardDescription>Click to view details</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Product information...</p>
  </CardContent>
</Card>

Custom Heading Level

Card with custom heading semantics

<Card>
  <CardHeader>
    <CardTitle as="h2">Main Section</CardTitle>
    <CardDescription>Important content</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Content...</p>
  </CardContent>
</Card>

Performance

Bundle Size

~1.5KB gzipped

Minified and gzipped

Dependencies

•class-variance-authority
•clsx
•tailwind-merge

Accessibility

•Semantic HTML structure
•Proper heading hierarchy
•Keyboard accessible when interactive
•Screen reader friendly