Card

Card is a title, optional meta, and whatever body content is passed as children - the container most content on the site sits in. It grows into an image card or an icon-tile card from props rather than a variant enum, and renders as a link when given href.

Why it is built this way

An image card and an icon-tile card are not a variant prop - they are what Card grows into when given an image or an iconIconThe glyph set, generated from a Markdown table where every drawing carries its reason. One component, typed names, no icon font.@sushindustries/ui · content, because a card with an image is the image variant. Images crop to a fixed ratio so a grid of cards holds a line regardless of what was uploaded. The heading level is a prop (as) rather than a fixed h3, because a card's place in the document outline is the page's business, not the card's - getting it wrong is one of the few styling mistakes a screen reader actually punishes.

What it does not do

It does not pick its own heading level. The default h3 assumes the card sits under an h2 section; a different nesting needs as set explicitly.

Install

tanstack add https://adamjurek.com/r/tanstack/card.json

pnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/card.json

pnpm add @sushindustries/ui @sushindustries/atoms

What you get