User Row

An identity row — avatar, name, one quiet second line and a trailing action. The row itself is inert; only the action is interactive, so an overflow menu never ends up nested inside a link.

tsx

1import { UserRow } from "@pestoui/core"

Plain and card

plain has no padding, for a container that already pads its children. card draws its own border and padding.

Product lead

product@example.com

Ops manager

Admin · manager@example.com

Small, and long values

size="sm" tightens the gap and the label. Both lines truncate before the action gives up any room.

Support lead, Operations and Customer Success

support.lead.operations@example.com

Props

Prop	Type	Default	Description
label	ReactNode	—	Required. The name; truncates.
sublabel	ReactNode	—	The quiet second line — an email, a plan name, a region.
avatar	ReactNode	—	Leading mark — an Avatar, an OrbAvatar, an initials tile.
action	ReactNode	—	Trailing slot. The only interactive part of the row.
variant	"plain" \| "card"	"plain"	Bare, or a bordered card with its own padding.
size	"sm" \| "default"	"default"	Gap, label size and, on the card variant, padding.

PreviousUsage Meter Next Workspace Switcher

Pesto UI · 117 documented components