Card

Container, Stats Card (KPI), Info Card, Action Card, List Card, User Card, Alert Card, Progress Card, Feature Card, and Product Card (image on top) for ecommerce and catalogs.

Basic Card

Card content.

Simple Info Card

You have 12 pending invoices

System maintenance scheduled at 2 AM

New feature released

Action Card

Create New Order

Start a new order from scratch

Add Product

Add a new product to the catalog

Invite Team Member

Send an invitation to join the team

Generate Report

Export data as a report

List Card

Recent Orders

View All

  • Order #2841

    2 items · $45.00

    $45

  • Order #2840

    1 item · $12.99

    $13

  • Order #2839

    3 items · $89.50

    $90

Latest Transactions

View All

  • Payment received

    Stripe · 2 min ago

    +$120

  • Refund processed

    PayPal · 1 hr ago

    −$25

  • Subscription renewed

    Stripe · 2 hrs ago

    +$29

Top Products

View All

  • Wireless Earbuds

    Electronics

    124 sold

  • Leather Wallet

    Accessories

    89 sold

  • Desk Lamp

    Office

    56 sold

Recent Activities

View All

  • New user signed up

    john@example.com

    Just now

  • Order shipped

    Order #2840

    5 min ago

  • Report generated

    Sales Q1

    1 hr ago

Profile / User Card

JD

Jane Doe

jane@company.com

MK

Mike Kim

Designer

AL

Alex Lee

alex@customer.com · Acme Inc.

Notification / Alert Card

Payment failed

Your card was declined. Please update your payment method.

Backup completed

Your data was successfully backed up at 2:30 AM.

Subscription expiring soon

Your plan renews in 5 days. Update billing to avoid interruption.

New feature available

Check out the new analytics dashboard in Settings.

Progress Card

Project progress

70%

Storage used

45%

Monthly target

82%

Feature Card

Inventory Management

Track stock levels, reorder points, and warehouse locations in real time.

AI Analytics

Predict trends and get actionable insights powered by machine learning.

CRM Module

Manage contacts, deals, and pipelines in one unified workspace.

Marketing Automation

Create campaigns, segment audiences, and automate follow-ups.

Product Card (Image Top)

Sale

Wireless Earbuds Pro

Noise-cancelling, 24h battery

$89.00$119.00

Leather Laptop Bag

Water-resistant, fits 15″

$129.00
New

Desk Organizer Set

Bamboo, 5 pieces

$45.00

Premium Subscription

Annual plan, all features

$199.00

Stats Card (KPI)

Revenue

$24,500

+12%

Orders

1,245

+4%

New Users

320

-2%

Conversion Rate

3.2%

How to use

Card, StatsCard, InfoCard, ActionCard, ListCard, UserCard, AlertCard, ProgressCard, FeatureCard, ProductCard. Copy the examples below.

1. Import

tsx
import {
  Card,
  StatsCard,
  InfoCard,
  ActionCard,
  ListCard,
  UserCard,
  AlertCard,
  ProgressCard,
  FeatureCard,
  ProductCard,
  Avatar,
  Button,
  IconButton,
  Badge,
} from "@/app/components/ui";
import { FileText, Plus, DollarSign, CheckCircle, Package, Percent, XCircle, AlertTriangle, Info } from "lucide-react";

2. Card

tsx
<Card className="max-w-xs">
  <p className="text-sm text-gray-700 dark:text-gray-300">Card content.</p>
</Card>

3. StatsCard

tsx
<StatsCard
  title="Revenue"
  value="$24,500"
  change="+12%"
  trend="up"
  icon={<DollarSign className="w-4 h-4" />}
/>
<StatsCard
  title="Conversion Rate"
  value="3.2%"
  icon={<Percent className="w-4 h-4" />}
/>

4. InfoCard

tsx
<InfoCard icon={<FileText className="w-4 h-4" />}>
  You have 12 pending invoices
</InfoCard>

5. ActionCard

tsx
<ActionCard
  title="Create New Order"
  description="Start a new order from scratch"
  primaryAction={{ label: "Create order" }}
  icon={<Plus className="w-4 h-4" />}
/>

6. ListCard

tsx
<ListCard
  title="Recent Orders"
  viewAll={{ href: "#" }}
  items={[
    <div key="1">Order #2841 · $45.00</div>,
    <div key="2">Order #2840 · $12.99</div>,
  ]}
/>

7. UserCard

tsx
<UserCard
  avatar={<Avatar size="lg">JD</Avatar>}
  name="Jane Doe"
  roleOrEmail="jane@company.com"
  actions={<Button variant="secondary" className="!py-1.5 !min-h-0 text-xs">View profile</Button>}
/>

8. AlertCard

tsx
<AlertCard
  variant="error"
  title="Payment failed"
  description="Your card was declined. Please update your payment method."
  icon={<XCircle className="w-5 h-5" />}
/>
<AlertCard variant="success" title="Backup completed" description="Done." icon={<CheckCircle className="w-5 h-5" />} />
<AlertCard variant="warning" title="Expiring soon" description="Renews in 5 days." icon={<AlertTriangle className="w-5 h-5" />} />
<AlertCard variant="info" title="New feature" description="Check Settings." icon={<Info className="w-5 h-5" />} />

9. ProgressCard

tsx
<ProgressCard title="Project progress" value={70} />
<ProgressCard title="Storage used" value={45} variant="info" />
<ProgressCard title="Monthly target" value={82} variant="success" />

10. FeatureCard

tsx
<FeatureCard
  icon={<Package className="w-5 h-5" />}
  title="Inventory Management"
  description="Track stock levels and reorder points in real time."
  cta={{ label: "Learn more", href: "#" }}
/>

11. ProductCard

tsx
<ProductCard
  image={<div className="h-full w-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center"><Package className="w-12 h-12" /></div>}
  title="Wireless Earbuds Pro"
  description="Noise-cancelling, 24h battery"
  price="$89.00"
  compareAtPrice="$119.00"
  href="#"
  action={{ label: "Add to cart", onClick: () => {} }}
  badge={<Badge variant="default">Sale</Badge>}
/>