User
Data DisplayA component combining avatar with user name and description. Use the User component to display user profiles in lists, cards, or inline contexts.
Import
import { User, UserCard, UserListItem } from "@/components/ui/user";Usage
Basic User
Simple user display with name and description
J
John DoeProduct Manager
Sizes
User component in different sizes
J
John DoeSmall
J
John DoeMedium (default)
J
John DoeLarge
User Card
User displayed in a card with actions
J
John Doejohn@sonance.com
User List
Users displayed in a selectable list
J
John DoeProduct Manager
J
Jane SmithDesigner
M
Mike JohnsonDeveloper
API Reference
name*—stringUser's display name
description—stringSecondary text (role, email, etc.)
avatarSrc—stringURL for the avatar image
avatarFallback—stringFallback initials for avatar
size"md""sm" | "md" | "lg"Size of the component
| Prop | Type | Default | Description |
|---|---|---|---|
name* | string | — | User's display name |
description | string | — | Secondary text (role, email, etc.) |
avatarSrc | string | — | URL for the avatar image |
avatarFallback | string | — | Fallback initials for avatar |
size | "sm" | "md" | "lg" | "md" | Size of the component |