Gesso
Components

Card

Surface container with header, content, footer, and metric slots.

A surface container ported from Atlas. --card and --popover both bind to --sys-surface-raised (the paper token). default is that fill with a light border and shadow-sm. elevated keeps the same fill and adds a stronger border, larger radius, and shadow-lg. A menu on a card does not lift in fill, only in overlay.

Default

Surface, border, and ink from the chrome tier.

One elevation step, cast in the tinted shadow ink.

Elevated

Raised paper, stronger border, larger radius, shadow-lg.

For pulled-forward, hero-level surfaces.

Also exports CardHeaderRow, CardMetric, and CardSubtext for metric layouts.

Install

shadcn add @gesso/card

On this page