Primitives
User
Composite component that combines an Avatar with a name and optional description. Ideal for user cards, comments, and author bylines.
Installation
npm install @trinkui/reactImport
import { User } from "@trinkui/react";Usage
JC
Jane Cooper
Software Engineer
Alex Johnson
Product Designer
Sizes
SU
Small User
sm size
MU
Medium User
md size
LU
Large User
lg size
Without Description
Jane Cooper
Props
| Prop | Type | Default | Description |
|---|---|---|---|
namerequired | string | — | User display name |
description | string | — | Secondary text (role, email, etc.) |
avatarSrc | string | — | Image URL for the avatar; falls back to initials if omitted |
avatarProps | AvatarProps | — | Additional props forwarded to the inner Avatar component |
size | "sm" | "md" | "lg" | "md" | Size of the avatar and text |
className | string | — | Additional CSS classes |
Accessibility
- The avatar image receives the user's
nameas alt text. - When no image is provided, the initials fallback includes an
aria-labelwith the full name. - Text truncation is handled with CSS to avoid layout overflow while keeping content readable.