Loading...
Loading...
> Terminal-styled card component with header code prefix, optional icons, and flexible content areas. Uses the [ [0xXX] TITLE ] pattern for consistency.
1import { Card, CardHeader, CardContent, CardFooter, MetricCard } from "@/components/ui/card";
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">> ACTION</Button>8 </CardFooter>9</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>
Card with icon in the header area.
1<Card className="w-[350px]">2 <CardHeader3 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>
1<Card className="w-[350px]">2 <CardHeader code="0x02" title="CONFIRM ACTION" meta="Are you sure?" />3 <CardFooter>4 <Button variant="outline">> CANCEL</Button>5 <Button>> CONFIRM</Button>6 </CardFooter>7</Card>
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>
Card with primary border tone.
Card with success border 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>78<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>
First card in grid
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>
1<MetricCard2 code="0x1A"3 title="UI_COMPONENTS"4 value="77+"5 label="UI Components"6 icon={<Box className="size-5" />}7/>
NextAuth v5 with JWT sessions, social providers, and role-based access control.
SETUP TIME
5 MIN
PROVIDERS
6+
[INCLUDES]:
Resend integration with React Email templates.
TEMPLATES
8+
SETUP
2 MIN
[INCLUDES]:
1<FeatureCard2 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/>
| 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 |
✓ Use Card when:
✗ Don't use when:
Composition Guide: