nalarx-uiComponents
Card
An elevated surface with a hairline, plus optional parts for a header, content and footer.
bunx shadcn@latest add @nalarx/cardSurface only
Card has no layout of its own; lay out its content with className.
Card content
Card content
With parts
Sales agent
Answers pricing questions from the catalogue.
12 conversations this week.
Updated 2 hours ago
Sales agent
Answers pricing questions from the catalogue.
12 conversations this week.
Updated 2 hours ago
<Card>
<CardHeader>
<CardTitle>Sales agent</CardTitle>
<CardDescription>Answers pricing questions from the catalogue.</CardDescription>
<CardAction><Button size="sm">Edit</Button></CardAction>
</CardHeader>
<CardContent>12 conversations this week.</CardContent>
<CardFooter>Updated 2 hours ago</CardFooter>
</Card>Parts
| Part | Element | |
|---|---|---|
Card | div | Surface: --bg-elev, --line hairline, --r-md radius |
CardHeader | div | 20px sides; places CardAction on the right |
CardTitle | h2 | text-title-3 |
CardDescription | p | 12px, --ink-3 |
CardAction | div | |
CardContent | div | |
CardFooter | div | Hairline on top, 12px --ink-3 |
Accessibility
A clickable card should hold a real button or link; do not put onClick on the surface alone.
Replaces
NxCard in both apps and the Platform's base/Card.tsx.