[ [UI.10] Components ] Card

Card

> Terminal-styled card component with header code prefix, optional icons, and flexible content areas. Uses the [ [0xXX] TITLE ] pattern for consistency.

Import

[ [0x5B] IMPORT ]

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

Preview

[ [0x00] CARD ]

[0x00] CARD TITLECard description

This is the card content area where you can place any content.

1<Card className="w-[350px]">
2  <CardHeader code="0x00" title="CARD TITLE" meta="Card description" />
3  <CardContent>
4    <p className="text-sm">This is the card content area where you can place any content.</p>
5  </CardContent>
6  <CardFooter>
7    <Button variant="outline">&gt; ACTION</Button>
8  </CardFooter>
9</Card>

Variants

[ [0x00] SIMPLE CARD ]

Simple card with just content, no header or footer.

1<Card className="w-[350px]">
2  <CardContent>
3    <p className="text-sm">Simple card with just content, no header or footer.</p>
4  </CardContent>
5</Card>

[ [0x00] CARD WITH ICON ]

[0x01] SETTINGS

Card with icon in the header area.

1<Card className="w-[350px]">
2  <CardHeader
3    code="0x01"
4    title="SETTINGS"
5    icon={<Settings className="h-4 w-4" />}
6  />
7  <CardContent>
8    <p className="text-sm">Card with icon in the header area.</p>
9  </CardContent>
10</Card>

[ [0x00] CARD WITH FOOTER ]

[0x02] CONFIRM ACTIONAre you sure?

1<Card className="w-[350px]">
2  <CardHeader code="0x02" title="CONFIRM ACTION" meta="Are you sure?" />
3  <CardFooter>
4    <Button variant="outline">&gt; CANCEL</Button>
5    <Button>&gt; CONFIRM</Button>
6  </CardFooter>
7</Card>

[ [0x00] INTERACTIVE CARD ]

[0x03] INTERACTIVE CARDClick or hover

This card has hover effects with the interactive prop.

1<Card className="w-[350px]" interactive>
2  <CardHeader code="0x03" title="INTERACTIVE CARD" meta="Click or hover" />
3  <CardContent>
4    <p className="text-sm">This card has hover effects with the interactive prop.</p>
5  </CardContent>
6</Card>

[ [0x00] CARD TONES ]

[0x04] PRIMARY TONE

Card with primary border tone.

[0x05] SUCCESS TONE

Card with success border tone.

[0x06] WARNING TONE

Card with warning border tone.

1<Card tone="primary">
2  <CardHeader code="0x04" title="PRIMARY TONE" />
3  <CardContent>
4    <p className="text-sm">Card with primary border tone.</p>
5  </CardContent>
6</Card>
7
8<Card tone="success">
9  <CardHeader code="0x05" title="SUCCESS TONE" />
10  <CardContent>
11    <p className="text-sm">Card with success border tone.</p>
12  </CardContent>
13</Card>

[ [0x00] GRID LAYOUT ]

[0x07] CARD 1

First card in grid

[0x08] CARD 2

Second card in grid

1<div className="grid grid-cols-2 gap-4">
2  <Card>
3    <CardHeader code="0x07" title="CARD 1" />
4    <CardContent>
5      <p className="text-sm">First card in grid</p>
6    </CardContent>
7  </Card>
8  <Card>
9    <CardHeader code="0x08" title="CARD 2" />
10    <CardContent>
11      <p className="text-sm">Second card in grid</p>
12    </CardContent>
13  </Card>
14</div>

[ [0x00] METRICCARD ]

[0x1A] UI_COMPONENTS

77+

UI Components

[0x1B] THEMES

Themes

[0x1C] API_ROUTES

API Routes

[0x1D] TYPESCRIPT

100%

TypeScript

1<MetricCard
2  code="0x1A"
3  title="UI_COMPONENTS"
4  value="77+"
5  label="UI Components"
6  icon={<Box className="size-5" />}
7/>

[ [0x00] FEATURECARD ]

[0x10] AUTH_SYSTEM

PRODUCTION-READY AUTH

NextAuth v5 with JWT sessions, social providers, and role-based access control.

SETUP TIME

5 MIN

PROVIDERS

[INCLUDES]:

✓OAuth (Google, GitHub)
✓Email/Password auth
✓Role-based permissions

> AUTH DOCS→

[0x30] EMAIL_SYSTEM

TRANSACTIONAL EMAIL

Resend integration with React Email templates.

TEMPLATES

SETUP

2 MIN

[INCLUDES]:

✓React Email templates
✓Resend API integration

> EMAIL DOCS→

1<FeatureCard
2  code="0x10"
3  title="AUTH_SYSTEM"
4  icon={<Shield className="size-4" />}
5  headline="PRODUCTION-READY AUTH"
6  description="NextAuth v5 with JWT sessions..."
7  stats={[
8    { label: 'SETUP TIME', value: '5 MIN' },
9    { label: 'PROVIDERS', value: '6+' },
10  ]}
11  includes={[
12    'OAuth (Google, GitHub)',
13    'Email/Password auth',
14  ]}
15  ctaLabel="AUTH DOCS"
16  ctaHref="/docs/features/auth"
17/>

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
code	`string`	`"0x00"`	Hex code displayed in header brackets (e.g., '0x00', '0x01')
title	`string`	-	Title displayed in header in UPPERCASE_SNAKE_CASE format
icon	`React.ReactNode`	-	Optional icon displayed in header on the right side
meta	`React.ReactNode`	-	Optional metadata/description displayed in header
tone	`"neutral" \| "primary" \| "success" \| "warning" \| "danger"`	`"neutral"`	Border color tone for the card
interactive	`boolean`	`false`	Enable hover/focus states for clickable cards
as	`"div" \| "article" \| "section"`	`"div"`	Semantic HTML element to render the card as
padding	`"sm" \| "md" \| "lg"`	`"md"`	Padding size for CardContent (sm=8px, md=16px, lg=24px)
MetricCard.title	`string`	-	Header title in SNAKE_CASE format (e.g., "UI_COMPONENTS")
MetricCard.value	`string \| number`	-	Large display value (e.g., "77+", "$199", "100%")
MetricCard.label	`string`	-	Label text displayed below the value
MetricCard.icon	`React.ReactNode`	-	Icon displayed in header right side

Accessibility

[ [0x58] A11Y ]

Headers use the terminal pattern [ [0xXX] TITLE ] for consistent structure
Icons in headers should have appropriate aria-labels when interactive
The interactive prop adds hover states for clickable cards
Tone variants use border colors that meet WCAG contrast requirements
Use semantic HTML elements (article, section) via the 'as' prop when appropriate

When to Use

[ [0xE9] USAGE GUIDANCE ]

✓ Use Card when:

• Grouping related content into a contained unit
• Displaying summary information (stats, KPIs, metrics)
• Creating scannable layouts with multiple information blocks
• Interactive content that responds to clicks or hovers
• Terminal-style headers needed for consistent branding

✗ Don't use when:

• Simple text grouping (use div or semantic elements)
• Navigation items (use Navigation or Dropdown Menu)
• Critical alerts (use Alert or Alert Dialog)
• Temporary messages (use Toast notifications)

Composition Guide:

• CardHeader: Always use with code + title for terminal aesthetic
• CardContent: Main content area (required for most cards)
• CardFooter: Actions or metadata (optional)
• tone prop: Use primary/success/warning/danger for visual hierarchy
• interactive prop: Enable for clickable cards

Preview

[ [0x00] CARD ]

[0x00] CARD TITLECard description

This is the card content area where you can place any content.

1<Card className="w-[350px]">
2  <CardHeader code="0x00" title="CARD TITLE" meta="Card description" />
3  <CardContent>
4    <p className="text-sm">This is the card content area where you can place any content.</p>
5  </CardContent>
6  <CardFooter>
7    <Button variant="outline">&gt; ACTION</Button>
8  </CardFooter>
9</Card>

Variants

[ [0x00] SIMPLE CARD ]

Simple card with just content, no header or footer.

1<Card className="w-[350px]">
2  <CardContent>
3    <p className="text-sm">Simple card with just content, no header or footer.</p>
4  </CardContent>
5</Card>

[ [0x00] CARD WITH ICON ]

[0x01] SETTINGS

Card with icon in the header area.

1<Card className="w-[350px]">
2  <CardHeader
3    code="0x01"
4    title="SETTINGS"
5    icon={<Settings className="h-4 w-4" />}
6  />
7  <CardContent>
8    <p className="text-sm">Card with icon in the header area.</p>
9  </CardContent>
10</Card>

[ [0x00] CARD WITH FOOTER ]

[0x02] CONFIRM ACTIONAre you sure?

1<Card className="w-[350px]">
2  <CardHeader code="0x02" title="CONFIRM ACTION" meta="Are you sure?" />
3  <CardFooter>
4    <Button variant="outline">&gt; CANCEL</Button>
5    <Button>&gt; CONFIRM</Button>
6  </CardFooter>
7</Card>

[ [0x00] INTERACTIVE CARD ]

[0x03] INTERACTIVE CARDClick or hover

This card has hover effects with the interactive prop.

1<Card className="w-[350px]" interactive>
2  <CardHeader code="0x03" title="INTERACTIVE CARD" meta="Click or hover" />
3  <CardContent>
4    <p className="text-sm">This card has hover effects with the interactive prop.</p>
5  </CardContent>
6</Card>

[ [0x00] CARD TONES ]

[0x04] PRIMARY TONE

Card with primary border tone.

[0x05] SUCCESS TONE

Card with success border tone.

[0x06] WARNING TONE

Card with warning border tone.

1<Card tone="primary">
2  <CardHeader code="0x04" title="PRIMARY TONE" />
3  <CardContent>
4    <p className="text-sm">Card with primary border tone.</p>
5  </CardContent>
6</Card>
7
8<Card tone="success">
9  <CardHeader code="0x05" title="SUCCESS TONE" />
10  <CardContent>
11    <p className="text-sm">Card with success border tone.</p>
12  </CardContent>
13</Card>

[ [0x00] GRID LAYOUT ]

[0x07] CARD 1

First card in grid

[0x08] CARD 2

Second card in grid

1<div className="grid grid-cols-2 gap-4">
2  <Card>
3    <CardHeader code="0x07" title="CARD 1" />
4    <CardContent>
5      <p className="text-sm">First card in grid</p>
6    </CardContent>
7  </Card>
8  <Card>
9    <CardHeader code="0x08" title="CARD 2" />
10    <CardContent>
11      <p className="text-sm">Second card in grid</p>
12    </CardContent>
13  </Card>
14</div>

[ [0x00] METRICCARD ]

[0x1A] UI_COMPONENTS

77+

UI Components

[0x1B] THEMES

Themes

[0x1C] API_ROUTES

API Routes

[0x1D] TYPESCRIPT

100%

TypeScript

1<MetricCard
2  code="0x1A"
3  title="UI_COMPONENTS"
4  value="77+"
5  label="UI Components"
6  icon={<Box className="size-5" />}
7/>

[ [0x00] FEATURECARD ]

[0x10] AUTH_SYSTEM

PRODUCTION-READY AUTH

NextAuth v5 with JWT sessions, social providers, and role-based access control.

SETUP TIME

5 MIN

PROVIDERS

[INCLUDES]:

✓OAuth (Google, GitHub)
✓Email/Password auth
✓Role-based permissions

> AUTH DOCS→

[0x30] EMAIL_SYSTEM

TRANSACTIONAL EMAIL

Resend integration with React Email templates.

TEMPLATES

SETUP

2 MIN

[INCLUDES]:

✓React Email templates
✓Resend API integration

> EMAIL DOCS→

1<FeatureCard
2  code="0x10"
3  title="AUTH_SYSTEM"
4  icon={<Shield className="size-4" />}
5  headline="PRODUCTION-READY AUTH"
6  description="NextAuth v5 with JWT sessions..."
7  stats={[
8    { label: 'SETUP TIME', value: '5 MIN' },
9    { label: 'PROVIDERS', value: '6+' },
10  ]}
11  includes={[
12    'OAuth (Google, GitHub)',
13    'Email/Password auth',
14  ]}
15  ctaLabel="AUTH DOCS"
16  ctaHref="/docs/features/auth"
17/>

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
code	`string`	`"0x00"`	Hex code displayed in header brackets (e.g., '0x00', '0x01')
title	`string`	-	Title displayed in header in UPPERCASE_SNAKE_CASE format
icon	`React.ReactNode`	-	Optional icon displayed in header on the right side
meta	`React.ReactNode`	-	Optional metadata/description displayed in header
tone	`"neutral" \| "primary" \| "success" \| "warning" \| "danger"`	`"neutral"`	Border color tone for the card
interactive	`boolean`	`false`	Enable hover/focus states for clickable cards
as	`"div" \| "article" \| "section"`	`"div"`	Semantic HTML element to render the card as
padding	`"sm" \| "md" \| "lg"`	`"md"`	Padding size for CardContent (sm=8px, md=16px, lg=24px)
MetricCard.title	`string`	-	Header title in SNAKE_CASE format (e.g., "UI_COMPONENTS")
MetricCard.value	`string \| number`	-	Large display value (e.g., "77+", "$199", "100%")
MetricCard.label	`string`	-	Label text displayed below the value
MetricCard.icon	`React.ReactNode`	-	Icon displayed in header right side

Accessibility

[ [0x58] A11Y ]

Headers use the terminal pattern [ [0xXX] TITLE ] for consistent structure
Icons in headers should have appropriate aria-labels when interactive
The interactive prop adds hover states for clickable cards
Tone variants use border colors that meet WCAG contrast requirements
Use semantic HTML elements (article, section) via the 'as' prop when appropriate

When to Use

[ [0xE9] USAGE GUIDANCE ]

✓ Use Card when:

• Grouping related content into a contained unit
• Displaying summary information (stats, KPIs, metrics)
• Creating scannable layouts with multiple information blocks
• Interactive content that responds to clicks or hovers
• Terminal-style headers needed for consistent branding

✗ Don't use when:

• Simple text grouping (use div or semantic elements)
• Navigation items (use Navigation or Dropdown Menu)
• Critical alerts (use Alert or Alert Dialog)
• Temporary messages (use Toast notifications)

Composition Guide:

• CardHeader: Always use with code + title for terminal aesthetic
• CardContent: Main content area (required for most cards)
• CardFooter: Actions or metadata (optional)
• tone prop: Use primary/success/warning/danger for visual hierarchy
• interactive prop: Enable for clickable cards