Component
Card
A content container with the signature hard shadow. Cards can be static, interactive, or nested with variant-based depth.
Variants
Default — Card with hard shadow.
Flat — Border only, no shadow.
Inset — Gray background, no shadow.
Default (shadow), Flat (no shadow), Inset (gray background)
tsx
<Card variant="default">Default card with hard shadow.</Card>
<Card variant="flat">Flat card — border only, no shadow.</Card>
<Card variant="inset">Inset card — gray background, no shadow.</Card>
Padding
No padding
Small padding (12px)
Medium padding (20px)
Large padding (32px)
none, sm, md, lg
tsx
<Card padding="none">No padding</Card>
<Card padding="sm">Small padding</Card>
<Card padding="md">Medium padding</Card>
<Card padding="lg">Large padding</Card>
Interactive
Click me — I have hover and active shadow states.
Cards with onClick gain hover/active shadow effects
tsx
<Card onClick={() => alert('Clicked!')}>
Click me — I have hover and active states.
</Card>
Disabled
Disabled — No hover, no click.
Disabled interactive card
tsx
<Card onClick={() => {}} disabled>
I am disabled — no interactions.
</Card>
Composition Example
Online
Server Status
All systems operational. Last checked 2 minutes ago.
Card with Badge and Button
tsx
<Card padding="lg">
<Badge variant="success" dot>Online</Badge>
<h3>Server Status</h3>
<p>All systems operational.</p>
<Button variant="outline" size="sm">View Details</Button>
</Card>
Usage
Dashboard.tsx
import { Card, Badge } from 'starkit-ui';
function Dashboard() {
return (
<div style={{ display: 'grid', gap: 16 }}>
<Card padding="lg" as="article">
<Badge variant="info">Analytics</Badge>
<h2>Monthly Report</h2>
<p>Revenue increased by 24% this quarter.</p>
</Card>
<Card variant="inset" padding="md">
<p>Nested content with muted background.</p>
</Card>
</div>
);
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'flat' | 'inset' | 'default' | Visual style. Default has shadow, flat has none, inset has gray bg. |
| padding | 'none' | 'sm' | 'md' | 'lg' | 'md' | Internal padding preset. |
| as | 'div' | 'article' | 'section' | 'div' | Rendered HTML element for semantic markup. |
| disabled | boolean | false | Disables interactive cards (those with onClick). |
| onClick | () => void | — | Makes the card interactive with hover/active effects. |
| className | string | '' | Additional CSS classes. |
All standard <div> HTML attributes are also supported.