User
Identity pieces built on the atoms Avatar: User.Info is the avatar-plus-name row (role badge, optional description, audio ring) used by Bubble.Header and sidebar profiles; User.Pill is the compact mention chip.
Preview
Use the controls to explore the component's props.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
user (required) | TUserType | — | The identity: firstName / lastName drive the name and initials, role the badge, avatarUrl the photo, status the presence dot, verified the check. |
description | string | — | Info only — muted secondary line under the name (a handle, a status, a timestamp). |
size | TAvatarSize | "default" | Info only — avatar size for the row. |
direction | "sender" | "recipient" | "sender" | Info only — sender mirrors the row so it reads inward from a sender bubble's edge. |
audio | "muted" | "unmuted" | "speaking" | — | Info only — story-style ring around the avatar for live voice states. |
Example
User.Info — identity row
JH
Jenny HamiltonAdmin
EA
Exegia AgentAgent
Read the corpus 2 min agoimport User from "@corpora/ui"
<User.Info user={{ firstName: "Jenny", lastName: "Hamilton", role: "Admin" }} />
<User.Info user={user} description="Read the corpus 2 min ago" />User.Info — sizes, direction and the audio ring
JH
Jenny HamiltonAdmin
JH
Jenny HamiltonAdmin
JH
Jenny HamiltonAdmin
<User.Info user={user} size="default" />
<User.Info user={user} direction="sender" />
<User.Info user={user} audio="speaking" />User.Pill — mention chip
<User.Pill user={{ firstName: "jenny" }} />User currently uses a source import; it is not exported from the package entry point.
import User from "@/components/composed/user"
// The identity row — also the default header content of Bubble.Header.
<User.Info user={{ firstName: "Jenny", lastName: "Hamilton", role: "Admin" }} />
// A compact mention chip.
<User.Pill user={{ firstName: "jenny" }} />
// Inside a chat bubble header:
<Bubble.Header time="10 min ago" user={user} UserInfo={User.Info} />Last updated on
Logo
Brand lockup: a mark beside a wordmark. The mark is an SVG, an image, or a monogram tile derived from the name; variant="mark" folds the wordmark away with the same motion a collapsing rail uses. With href the whole lockup is a home link.
Verse
Corpus verse line: a chapter link plus inline spans and note markers, each opening a click popover.