Card

A flexible container component for grouping related content. Uses a compound component pattern for maximum flexibility.

Installation

Terminal

ReactTailwind

TSX

npx @uiblox/cli add card

Visual Variations

Toggle between three different visual styles: elevated (shadow), outlined (border), and filled (background).

Basic Card

A simple card with just text content and padding.

With Image

Card with header image.

Profile Card

@username

Interactive card with avatar.

Basic Usage

Card Title

Card description goes here.

Your content here.

Copy & paste ready

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

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

With Footer

Account Settings

Update your account preferences.

Make changes to your account settings here.

Copy & paste ready

<Card>
  <CardHeader>
    <CardTitle>Account Settings</CardTitle>
    <CardDescription>Update your account preferences.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Make changes to your account settings here.</p>
  </CardContent>
  <CardFooter className="flex justify-between">
    <Button variant="outline">Cancel</Button>
    <Button>Save Changes</Button>
  </CardFooter>
</Card>

Examples

Pricing Card

Pro Plan

For growing teams

$29

per month

Unlimited projects
Priority support
Advanced analytics

ReactTailwind CSSCopy & paste ready

<Card className="w-[300px]">
  <CardHeader className="text-center pb-2">
    <CardTitle>Pro Plan</CardTitle>
    <CardDescription>For growing teams</CardDescription>
  </CardHeader>
  <CardContent className="text-center">
    <div className="text-4xl font-bold">$29</div>
    <p className="text-slate-500">per month</p>
    <ul className="mt-6 space-y-3 text-sm text-left">
      <li className="flex items-center gap-2">
        <svg className="w-5 h-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
        </svg>
        Unlimited projects
      </li>
      <li className="flex items-center gap-2">
        <svg className="w-5 h-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
        </svg>
        Priority support
      </li>
      <li className="flex items-center gap-2">
        <svg className="w-5 h-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
        </svg>
        Advanced analytics
      </li>
    </ul>
  </CardContent>
  <CardFooter>
    <Button className="w-full">Get Started</Button>
  </CardFooter>
</Card>

User Profile Card

Jane Doe

Product Designer

128

Projects

1.2k

Followers

Following

ReactTailwind CSSCopy & paste ready

<Card className="w-[320px]">
  <CardContent className="pt-6">
    <div className="flex items-center gap-4">
      <div className="h-12 w-12 rounded-full bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center text-white font-semibold text-lg">
        JD
      </div>
      <div>
        <p className="font-semibold">Jane Doe</p>
        <p className="text-sm text-slate-500">Product Designer</p>
      </div>
    </div>
    <div className="mt-4 flex gap-4 text-center">
      <div className="flex-1">
        <p className="text-2xl font-bold">128</p>
        <p className="text-xs text-slate-500">Projects</p>
      </div>
      <div className="flex-1">
        <p className="text-2xl font-bold">1.2k</p>
        <p className="text-xs text-slate-500">Followers</p>
      </div>
      <div className="flex-1">
        <p className="text-2xl font-bold">89</p>
        <p className="text-xs text-slate-500">Following</p>
      </div>
    </div>
  </CardContent>
  <CardFooter>
    <Button variant="outline" className="w-full">View Profile</Button>
  </CardFooter>
</Card>

Notification Card

New Update Available

Version 2.0 is now available with exciting new features.

ReactTailwind CSSCopy & paste ready

<Card className="border-l-4 border-l-purple-500">
  <CardHeader className="pb-2">
    <CardTitle className="text-base">New Update Available</CardTitle>
  </CardHeader>
  <CardContent>
    <p className="text-sm text-slate-600">Version 2.0 is now available with exciting new features.</p>
  </CardContent>
</Card>

Components

The Card uses a compound component pattern, giving you full control over the structure:

Card

The main container with border, background, and shadow.

CardHeader

Container for title and description, with proper padding.

CardTitle

The heading element styled as a card title.

CardDescription

Muted text for additional context.

CardContent

The main content area.

CardFooter

Bottom area, typically for actions.

Source Code

Copy this code into src/components/ui/card.tsx:

card.tsx

ReactTailwind

TSX

import * as React from "react";
import { cn } from "@/lib/utils";

const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn(
        "rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 shadow-sm",
        className
      )}
      {...props}
    />
  )
);
Card.displayName = "Card";

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

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

const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className, ...props }, ref) => (
    <p ref={ref} className={cn("text-sm text-gray-500 dark:text-gray-400", className)} {...props} />
  )
);
CardDescription.displayName = "CardDescription";

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

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

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