Persona
Persona pairs an Avatar (or just a presence dot) with a name and up to three lines of details about a person.
Use it in people lists, profile cards and search results. The Avatar size and font size follow size; textPosition and textAlignment adjust the layout.
Alex ChenDesign leadKyoto · 9:30 AM
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { Persona } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Maria Garciaextra-small
Maria Garciasmall
Maria Garciamedium
Maria Garcialarge
Maria Garciaextra-large
Maria Garciahuge
Size
extra-small → huge; Avatar 20 → 64px.
Sam Leeafter
Sam Leebefore
Sam Leebelow
Text position
after (default), before, below.
Priya PatelProduct managerIn a meetingFree at 3:00 PM
Priya PatelProduct manager
Text alignment & four lines
textAlignment start (default) aligns the text with the top edge of the Avatar; center centers it vertically.
Jordan KimAvailable
Taylor NguyenAway
Chris NovakOffline
Presence only
presenceOnly replaces the Avatar with a presence dot, which suits dense lists.
Usage
Do
- Keep secondary lines short: job title, status, local time.
- Pick size by density: small/medium for lists, huge for profile pages.
- When presence matters, always show it as text too.
Don't
- Don't use more than four lines of text.
- Don't use presenceOnly when people need the photo to recognize someone.
- Don't give names the brand color.
Props
| Prop · Type | Default | Description |
|---|---|---|
| namestring | Default: — | Name: the default primaryText and the Avatar's name. |
| primaryText / secondaryText / tertiaryText / quaternaryTextReactNode | Default: — | Four lines of text; the first is semibold, the others are caption in foreground-2. |
| size"extra-small" | "small" | "medium" | "large" | "extra-large" | "huge" | Default: "medium" | Avatar 20 / 24 / 32 / 40 / 48 / 64px. |
| presence"available" | "busy" | "away" | "offline" | Default: — | Presence shown on the Avatar. |
| presenceOnlyboolean | Default: false | Shows only the presence dot. |
| avatar{ src, color, shape } | Default: — | Options passed to the Avatar. |
| textPosition"after" | "before" | "below" | Default: "after" | Position of the text block relative to the Avatar. |
| textAlignment"start" | "center" | Default: "start" | Alignment of the text block. |