Card

Standard container surface with concentric panel radius and hairline borders.

// Plain markup
import { Card, CardList, CardListItem, CardRow, StatCard } from "@shavin/ui";

Card (Padding Spectrum: none to 3xl)

none (0px)

xs (8px)

sm (16px)

md (20px)

lg (24px)

xl (32px)

2xl (40px)

3xl (48px)

<Card padding="none">none (0px)</Card>
<Card padding="xs">xs (8px)</Card>
<Card padding="sm">sm (16px)</Card>
<Card padding="md">md (20px)</Card>
<Card padding="lg">lg (24px)</Card>
<Card padding="xl">xl (32px)</Card>
<Card padding="2xl">2xl (40px)</Card>
<Card padding="3xl">3xl (48px)</Card>

StatCard

Due this month

Outstanding· amount

$1,240

Overdue

Paid this month· 4 cleared

$860

<StatCard label="Due this month" value="12" />
<StatCard label="Outstanding" value="$1,240" sub="amount" />
<StatCard label="Overdue" value="3" alert />

CardList + CardListItem (clickable rows)

Netflix subscriptionTomorrow

Car EMIin 3 days

<CardList>
  <CardListItem className="cursor-pointer">
    <span className="flex-1">Netflix subscription</span>
    <span className="text-sm text-fg-muted">Tomorrow</span>
  </CardListItem>
</CardList>

CardRow (settings-style form)

Name

Jordan Rivera

jordan@example.com

<div className="divide-y divide-hairline rounded-[var(--radius-panel)] border border-hairline bg-surface">
  <CardRow label="Name"><span>Jordan Rivera</span></CardRow>
  <CardRow label="Email"><span className="text-fg-muted">jordan@example.com</span></CardRow>
</div>

Product / Catalog Card (with Image & Details)

★

Catalog Item

A premium surface layout option with centered media header.

<Card className="w-64 overflow-hidden border border-hairline bg-surface shadow-sm">
  <div className="h-32 bg-surface-hover/30 border-b border-hairline flex items-center justify-center relative overflow-hidden">
    <div className="h-12 w-12 rounded-full bg-accent/15 border border-accent flex items-center justify-center text-accent">★</div>
  </div>
  <div className="p-4 space-y-2">
    <div className="text-sm font-semibold text-fg">Catalog Item</div>
    <div className="text-xs text-fg-muted">A premium surface layout option with centered media header.</div>
  </div>
</Card>

API Reference

Card is a plain styling primitive. All props listed below apply to the root element.

Prop	Type	Default
`padding` Internal padding preset applied to the card surface (xs=8px, sm=16px, md=20px, lg=24px, xl=32px, 2xl=40px, 3xl=48px).	`"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl"`	`"md"`
`className` Additional Tailwind classes merged via cn().	`string`	—
`children`required Content rendered inside the card.	`ReactNode`	—

StatCard API Reference

Prop	Type	Default
`label`required Short label shown above the metric value.	`string`	—
`value`required The primary metric value displayed prominently.	`string`	—
`sub` Optional secondary subtitle beneath the value.	`string`	—
`alert` When true, renders the value in the danger color.	`boolean`	`false`
`padding` Internal padding preset.	`"sm" \| "md"`	`"sm"`