Not FoundElixir UI

Getting Started

Installation

Components

Templates

More

Card

A flexible card component for displaying content in a contained, elevated surface. Perfect for organizing information, featuring products, or creating layout sections.

Installation

Add the Card component to your project:

npx @elixir-labs/ui add card

Usage

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

Examples

Basic Card

Card Title

This is a basic card with a title and description.

Card content goes here. You can add any content you want.

<Card className="w-80">
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>
      This is a basic card with a title and description.
    </CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content goes here. You can add any content you want.</p>
  </CardContent>
</Card>

Card with Footer

Project Alpha

A revolutionary new approach to modern web development.

Status: In Progress

Team: 5 developers

Deadline: Q2 2024

<Card className="w-80">
  <CardHeader>
    <CardTitle>Project Alpha</CardTitle>
    <CardDescription>
      A revolutionary new approach to modern web development.
    </CardDescription>
  </CardHeader>
  <CardContent>
    <div className="space-y-2">
      <p>Status: In Progress</p>
      <p>Team: 5 developers</p>
      <p>Deadline: Q2 2024</p>
    </div>
  </CardContent>
  <CardFooter className="gap-2">
    <Button size="sm">View Details</Button>
    <Button variant="outline" size="sm">Edit</Button>
  </CardFooter>
</Card>

Product Card

Premium Plan

Everything you need to scale your business.

$29/mo
  • ✓ Unlimited projects
  • ✓ Priority support
  • ✓ Advanced analytics
  • ✓ Custom integrations
<Card className="w-80">
  <div className="h-48 bg-gradient-to-br from-blue-600 to-purple-700 rounded-t-lg"></div>
  <CardHeader>
    <CardTitle>Premium Plan</CardTitle>
    <CardDescription>
      Everything you need to scale your business.
    </CardDescription>
  </CardHeader>
  <CardContent>
    <div className="space-y-2">
      <div className="text-3xl font-bold text-blue-400">$29/mo</div>
      <ul className="space-y-1 text-sm">
        <li>✓ Unlimited projects</li>
        <li>✓ Priority support</li>
        <li>✓ Advanced analytics</li>
        <li>✓ Custom integrations</li>
      </ul>
    </div>
  </CardContent>
  <CardFooter>
    <Button className="w-full">Get Started</Button>
  </CardFooter>
</Card>

Stats Card

Total Users

12,483

+12% from last month

Revenue

$45,231

+8% from last month

Active Projects

27

-2% from last month

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
  <Card>
    <CardHeader className="pb-2">
      <CardDescription>Total Users</CardDescription>
      <CardTitle className="text-3xl">12,483</CardTitle>
    </CardHeader>
    <CardContent>
      <p className="text-green-400 text-sm">+12% from last month</p>
    </CardContent>
  </Card>
  
  <Card>
    <CardHeader className="pb-2">
      <CardDescription>Revenue</CardDescription>
      <CardTitle className="text-3xl">$45,231</CardTitle>
    </CardHeader>
    <CardContent>
      <p className="text-green-400 text-sm">+8% from last month</p>
    </CardContent>
  </Card>
  
  <Card>
    <CardHeader className="pb-2">
      <CardDescription>Active Projects</CardDescription>
      <CardTitle className="text-3xl">27</CardTitle>
    </CardHeader>
    <CardContent>
      <p className="text-red-400 text-sm">-2% from last month</p>
    </CardContent>
  </Card>
</div>

Form Card

Create Account

Enter your information to create a new account.

Already have an account? Sign in

<Card className="w-96">
  <CardHeader>
    <CardTitle>Create Account</CardTitle>
    <CardDescription>
      Enter your information to create a new account.
    </CardDescription>
  </CardHeader>
  <CardContent className="space-y-4">
    <div className="space-y-2">
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" placeholder="Enter your email" />
    </div>
    <div className="space-y-2">
      <Label htmlFor="password">Password</Label>
      <Input id="password" type="password" placeholder="Enter your password" />
    </div>
  </CardContent>
  <CardFooter className="flex-col gap-2">
    <Button className="w-full">Create Account</Button>
    <p className="text-xs text-muted-foreground text-center">
      Already have an account? <a href="#" className="text-primary">Sign in</a>
    </p>
  </CardFooter>
</Card>

API Reference

Card

PropTypeDefaultDescription
classNamestring-Additional CSS classes
childrenReactNode-Card content

CardHeader / CardContent / CardFooter

These components accept the same props as Card and provide semantic structure.

CardTitle

Renders as an <h3> element by default with title styling.

CardDescription

Renders as a <p> element with muted text styling.

Source Code

import React from 'react';
import { clsx } from 'clsx';

const Card = React.forwardRef(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={clsx(
      'rounded-lg border bg-card text-card-foreground shadow-sm',
      className
    )}
    {...props}
  />
));
Card.displayName = 'Card';

const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={clsx('flex flex-col space-y-1.5 p-6', className)}
    {...props}
  />
));
CardHeader.displayName = 'CardHeader';

const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
  <h3
    ref={ref}
    className={clsx(
      'text-2xl font-semibold leading-none tracking-tight',
      className
    )}
    {...props}
  />
));
CardTitle.displayName = 'CardTitle';

const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
  <p
    ref={ref}
    className={clsx('text-sm text-muted-foreground', className)}
    {...props}
  />
));
CardDescription.displayName = 'CardDescription';

const CardContent = React.forwardRef(({ className, ...props }, ref) => (
  <div ref={ref} className={clsx('p-6 pt-0', className)} {...props} />
));
CardContent.displayName = 'CardContent';

const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
  <div ref={ref} className={clsx('flex items-center p-6 pt-0', className)} {...props} />
));
CardFooter.displayName = 'CardFooter';

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

Accessibility

The Card components follow accessibility best practices:

  • Uses semantic HTML structure
  • CardTitle uses proper heading hierarchy (<h3>)
  • Maintains proper color contrast ratios
  • Works well with screen readers
  • Supports keyboard navigation when interactive

Best Practices

✅ Do

  • Use CardHeader for titles and descriptions
  • Keep card content focused and scannable
  • Use consistent spacing between cards
  • Provide clear calls-to-action in CardFooter

❌ Don't

  • Overcrowd cards with too much information
  • Make cards too wide or too narrow for content
  • Use cards for single pieces of text
  • Forget to test responsive behavior