ComponentsLayout
Card
A bordered container with header, action, content and footer parts.
Theme
Motion
A bordered container with header, action, content and footer parts.
Last 30 days
48,210 requests
62% of your monthly limit.
<Card>
<CardHeader>
<CardTitle>Usage</CardTitle>
<CardDescription>Last 30 days</CardDescription>
<CardAction><Badge variant="outline">Pro</Badge></CardAction>
</CardHeader>
<CardContent>
<p className="text-2xl font-semibold tabular-nums">48,210 requests</p>
<p className="text-sm text-muted-foreground">62% of your monthly limit.</p>
</CardContent>
<CardFooter>
<Button size="sm" variant="outline">View details</Button>
</CardFooter>
</Card>The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.
npm i junco @junco/tailwindimport { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter } from "junco";
<Card>
<CardHeader>
<CardTitle>Usage</CardTitle>
<CardDescription>Last 30 days</CardDescription>
</CardHeader>
<CardContent>…</CardContent>
<CardFooter>…</CardFooter>
</Card>Depth comes from borders. Only elevated has a shadow, for things that float.
variant="outline"
variant="muted"
variant="elevated"
variant="ghost"
isInteractive adds hover and focus styles for a card that is itself a link.
Card#Also takes every <div> attribute.
variantisInteractive| Prop | Type | Default |
|---|---|---|
variantoutline is the default panel; muted groups inside another card; elevated floats; ghost has no border. | "outline" | "muted" | "elevated" | "ghost" | "outline" |
isInteractiveHover and focus styles for a card that is a link or button. | boolean | false |
CardTitle#as| Prop | Type | Default |
|---|---|---|
asHeading level, so the card fits the page outline. | "h1" … "h6" | "h3" |
CardHeader / CardDescription / CardAction / CardContent / CardFooter#Layout parts. CardAction sits top-right in the header (a menu or badge).
className| Prop | Type | Default |
|---|---|---|
classNameExtra classes for that part. | string | – |