Noarka UI logonoarka ui

Card

Default single border, or the double-border KPI style.

Default card
Single border.

Card body.

Installation

npx @noarka/cli add card

Usage

tsx
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@noarka/ui";
tsx
<Card>  <CardHeader>    <CardTitle>Project overview</CardTitle>    <CardDescription>Updated 2 hours ago.</CardDescription>  </CardHeader>  <CardContent>    <p className="text-sm text-muted-foreground">12 tasks completed this week.</p>  </CardContent></Card>

Examples

Single border

The default card with a single border.

Default card
Single border.

Card body.

Double border

The KPI style with a double-border frame.

Border card

Double border effect.

$12,408

API reference

Card

PropTypeDefault
variant

Default is a single border. Border wraps content in a second inner frame.

"default" | "border""default"
size

Density. sm tightens gaps and padding across header, content and footer.

"default" | "sm""default"
children

Card parts or free-form content. Border variant accepts anything.

ReactNode-
className

Additional classes merged with the variant styles.

string-

CardHeader

PropTypeDefault
className

Additional classes. Pairs with CardTitle and CardDescription, plus optional CardAction.

string-

CardTitle

PropTypeDefault
className

Additional classes merged with the title styles.

string-

CardDescription

PropTypeDefault
className

Additional classes merged with the muted description styles.

string-

CardAction

PropTypeDefault
className

Slot in the header corner, e.g. for a button. Header switches to two columns when present.

string-

CardContent

PropTypeDefault
className

Additional classes merged with the content padding.

string-

CardFooter

PropTypeDefault
className

Additional classes. Always renders the muted band with a top border.

string-