All components
Surfaces
Card
An interactive surface whose hairline lights to the accent on hover — for grids of clickable items.
Preview
Preview
light
Interactive card
Hover me — the hairline lights to the accent.
dark
Interactive card
Hover me — the hairline lights to the accent.
Code
<Card>
<h3 className="text-[14px] font-bold">Interactive card</h3>
<p className="mt-1 text-[12.5px] text-text2">Hover me.</p>
</Card>Import from @/components/ui.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
interactive | boolean | true | Accent-on-hover border. |
Usage
Do
- Use for clickable tiles in a grid.
Don't
- Use for static content — reach for Panel instead.