Pesto UI

Gradient Mark

A token gradient standing in for an identity — an account, a workspace, an app — where a photo or initials would claim more than the mark needs to. Round for identities, a squircle for tiles that carry an action.

tsx
import { GradientMark } from "@pestoui/core"

Shapes & sizes

size is the edge in px. A square takes the rounded-box-* step for that edge, so its corner holds the same proportion at every size instead of collapsing into a circle.

With a glyph

Children are centred. The glyph's ink comes from className — dark on a green-into-lime run, where white would hold on the first stop and vanish on the second.

Beside a name

The pairing it is built for. The mark is hidden from assistive tech by default; the name beside it is what tells two workspaces apart.

  • Support agentsCustomer replies
  • Research workspaceWeb and document search
  • Team workspaceShared runs

Without the hairline

hairline={false} drops the faint shadow — for a mark on a tinted surface, where the drop would read as a smudge.

Props

PropTypeDefaultDescription
tintstring—The from-* and to-* utilities, written in full at the call site so Tailwind sees them. Required.
shape"circle" | "square""circle"Round for identities; square takes the rounded-box-* step for its edge.
size"16" | "24" | "28" | "36" | "40" | "48""40"The edge in px. Sets size-* and, on a square, the matching rounded-box-*.
hairlinebooleantrueThe faint drop shadow that lifts the mark off a surface of the same lightness.
childrenReactNode—An optional glyph, centred. Size it yourself; its ink comes from className.
classNamestring—The glyph's ink. Inside a menu item force it (text-selected-foreground!), because the item recolours descendants on focus.
PreviousGoal MeterNext Heat Grid

Pesto UI · 117 documented components