Components
Card
A surface that changes shape depending on the page behind it.
On canvasOutline
An outline and radius/lg — the page behind it is white, so the edge is what separates them.
On subtleShadow
Radius/xl and a raised shadow instead. The tone difference already separates it, so an outline would draw the edge twice.
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/card.jsonThe page decides
on="canvas" gives an outline and radius/lg. on="subtle" drops the outline,
takes radius/xl and a raised shadow instead.
That is not decoration. On a white page an outline is the only thing separating card from background. On a grey page the tone difference already does that work, and adding an outline draws the same edge twice — which is what makes an interface look like a wireframe.
| Prop | Type | Default | Description |
|---|---|---|---|
| on | "canvas" | "subtle" | "canvas" | Which page surface the card sits on. |