Card

Loading component...

Installation

Usage

The Card component provides a flexible container for grouping related content and actions. It supports multiple sizes, variants, and includes specialized form helpers for common use cases.

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
  CardForm,
  CardField,
} from "@/components/redpanda-ui/card"

When to use

Use this decision tree to determine when to use the Card component:

Use Card when:

Grouping related information and actions
Creating forms with consistent layout
Displaying structured content with header/footer
Building dashboard widgets or panels
Containing interactive elements that belong together

Don't use Card for:

Single pieces of information (use Typography)
Navigation elements (use Navigation components)
Modal overlays (use Dialog/Sheet)
Simple dividers (use Separator)

Anatomy

The Card component is built with a flexible system of sub-components that work together:

Card Component Structure:
┌─────────────────────────────────────────────────────┐
│ <Card> (Container with padding, border, background) │
│ ┌─────────────────────────────────────────────────┐ │
│ │ <CardHeader> (Optional)                         │ │
│ │ ┌─────────────────┐ ┌─────────────────────────┐ │ │
│ │ │ Left Content    │ │ <CardAction> (Optional) │ │ │
│ │ │ ┌─────────────┐ │ │ - Buttons/Icons         │ │ │
│ │ │ │<CardTitle>  │ │ │ - Menu triggers         │ │ │
│ │ │ └─────────────┘ │ │                         │ │ │
│ │ │ ┌─────────────┐ │ │                         │ │ │
│ │ │ │<CardDesc>   │ │ │                         │ │ │
│ │ │ └─────────────┘ │ │                         │ │ │
│ │ └─────────────────┘ └─────────────────────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ <CardContent> (Main content area)               │ │
│ │                                                 │ │
│ │ For forms:                                      │ │
│ │ ┌─────────────────────────────────────────────┐ │ │
│ │ │ <CardForm> (Grid layout)                    │ │ │
│ │ │ ┌─────────────┐ ┌─────────────────────────┐ │ │ │
│ │ │ │ <CardField> │ │ <CardField>             │ │ │ │
│ │ │ │ [Label]     │ │ [Label]                 │ │ │ │
│ │ │ │ [Input]     │ │ [Select/Textarea/etc]   │ │ │ │
│ │ │ └─────────────┘ └─────────────────────────┘ │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ <CardFooter> (Actions/Navigation)               │ │
│ │ [Button] [Button] ... [Button]                  │ │
│ │ (justification: start|center|end|between)       │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘

Size System:
• sm: Max-width 384px, compact padding (px-12 py-8)
• md: Max-width 448px, standard padding (px-16 py-12)
• lg: Max-width 512px, generous padding (px-20 py-16)
• xl: Max-width 576px, spacious padding (px-24 py-20)
• full: Full width, standard padding (px-16 py-12)

Variant System:
• default: Standard card with border and shadow
• elevated: Enhanced shadow for prominence
• outlined: Thicker border, less shadow
• ghost: Transparent background, no border/shadow

Form Helpers:
• CardForm: Automatic grid layout with consistent spacing
• CardField: Vertical label/input layout with proper spacing

Basic Card

<Card size="md">
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>

Form Card (Simplified Layout)

<Card size="sm">
  <CardHeader>
    <CardTitle>Contact Form</CardTitle>
    <CardDescription>Get in touch with us</CardDescription>
  </CardHeader>
  <CardContent>
    <CardForm>
      <CardField>
        <Label htmlFor="name">Name</Label>
        <Input id="name" placeholder="Your name" />
      </CardField>
      <CardField>
        <Label htmlFor="email">Email</Label>
        <Input id="email" type="email" placeholder="your@email.com" />
      </CardField>
    </CardForm>
  </CardContent>
  <CardFooter>
    <Button>Submit</Button>
  </CardFooter>
</Card>

Variants

Card Sizes

The Card component supports multiple sizes to fit different use cases:

<Card size="sm">Small card (max-w-sm, p-4)</Card>
<Card size="md">Medium card (max-w-md, p-6)</Card>
<Card size="lg">Large card (max-w-lg, p-8)</Card>
<Card size="xl">Extra large card (max-w-xl, p-10)</Card>
<Card size="full">Full width card (w-full, p-6)</Card>

Card Variants

<Card variant="default">Default styling</Card>
<Card variant="elevated">Enhanced shadow</Card>
<Card variant="outlined">Thicker border</Card>
<Card variant="ghost">No background or border</Card>

Footer Layouts

<CardFooter justify="between">Buttons on sides</CardFooter>
<CardFooter justify="end">Buttons on right</CardFooter>
<CardFooter direction="column">Stacked buttons</CardFooter>

Form Helpers

The CardForm and CardField components eliminate the need for manual layout classes:

CardForm: Provides consistent grid layout and spacing for form elements
CardField: Handles label and input spacing automatically

// Before (manual layout)
<div className="grid w-full items-center gap-4">
  <div className="flex flex-col space-y-1.5">
    <Label>Name</Label>
    <Input />
  </div>
</div>

// After (automatic layout)
<CardForm>
  <CardField>
    <Label>Name</Label>
    <Input />
  </CardField>
</CardForm>

Examples

Default

Open in

Loading component...

Open in

Loading component...

Credits

We take our inspiration from Shadcn UI for the card component and style.

Installation

Usage

When to use

Anatomy

Basic Card

Form Card (Simplified Layout)

Variants

Card Sizes

Card Variants

Footer Layouts

Form Helpers

Examples

Default

Login example

Credits

On this page