User
userCombines an avatar, display name, and supporting description into a compact user row.
Usage
Basic usage
Avatar + name + secondary description (email/role/@handle).
Hulianzhangzhiwei@hulian.dev
tsx
<User
name="Hulian"
description="zhangzhiwei@hulian.dev"
avatarProps={{ src: "/avatar.png", alt: "Hulian" }}
/>Initials
Use fallback to render the initial placeholder when there is no avatar image.
Li
Li SiProduct Manager
tsx
<User name="Li Si" description="Product Manager" avatarProps={{ fallback: "Li" }} />Name only
Only single line names are rendered when description is omitted.
U
No user description
tsx
<User name="User without description" avatarProps={{ fallback: "U" }} />Avatar size
Adjust avatar size via avatarProps.size.
S
Smallsize=sm
L
Large sizesize=lg
tsx
<>
<User name="small" description="size=sm" avatarProps={{ fallback: "S", size: "sm" }} />
<User name="Large" description="size=lg" avatarProps={{ fallback: "L", size: "lg" }} />
</>When to use
Use User for a person row or card containing an avatar, name, and email, role, or handle. Use [Avatar] for only an image, AvatarCircles for a group, or pass User into Comment's author area.
Import
ts
import { User } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| avatarProps | AvatarProps | — | Props forwarded to the built-in Avatar. |
| className | string | — | Custom class name. |
Slots
| Slot | Type | Description |
|---|---|---|
| name* | ReactNode | Primary name. |
| description | ReactNode | Secondary email, role, handle, or other context. |
Pitfalls
- Avatar behavior is configured through
avatarProps; providefallbackwhen no reliable image exists. - Omitting
descriptionrenders a single-line name.
Related
Sparkline · ImageViewer · LiveProductCard · DiffStat · ScoreRing · Badge