Data Display

User

Display a user profile with avatar, name, description, and optional status chip. Supports horizontal and vertical layouts, 9 sizes, and can render as a clickable link.

Playground

Experiment with different props in real-time.

John Doe

Software Engineer

Size

Orientation

Chip

Basic Usage

Provide a name, description, and avatar.

John Doe

Software Engineer

<script lang="ts">
  import { User } from 'sv5ui';
</script>

<User
  name="John Doe"
  description="Software Engineer"
  avatar={{ src: 'https://i.pravatar.cc/150?u=john', alt: 'John Doe' }}
/>

Sizes

9 sizes from 3xs to 3xl.

Jane

Designer

Jane

Designer

Jane

Designer

Jane

Designer

Jane

Designer

2xl

Jane

Designer

3xl

Jane

Designer

<User name="Jane" description="Designer" avatar={{ alt: 'Jane' }} size="xs" />
<User name="Jane" description="Designer" avatar={{ alt: 'Jane' }} size="sm" />
<User name="Jane" description="Designer" avatar={{ alt: 'Jane' }} size="md" />
<User name="Jane" description="Designer" avatar={{ alt: 'Jane' }} size="lg" />
<User name="Jane" description="Designer" avatar={{ alt: 'Jane' }} size="xl" />
<User name="Jane" description="Designer" avatar={{ alt: 'Jane' }} size="2xl" />
<User name="Jane" description="Designer" avatar={{ alt: 'Jane' }} size="3xl" />

Orientation

Switch between horizontal and vertical layouts.

John Doe

Software Engineer

John Doe

Software Engineer

<User
  name="John Doe"
  description="Software Engineer"
  avatar={{ alt: 'John Doe' }}
  orientation="horizontal"
/>

<User
  name="John Doe"
  description="Software Engineer"
  avatar={{ alt: 'John Doe' }}
  orientation="vertical"
/>

With Chip

Add a status indicator with chip. Pass true for default or an object to customize.

John Doe

Online

Jane Smith

Away

<script lang="ts">
  import { User } from 'sv5ui';
</script>

<!-- Simple online indicator -->
<User
  name="John Doe"
  description="Online"
  avatar={{ alt: 'John Doe' }}
  chip
/>

<!-- Custom chip -->
<User
  name="Jane Smith"
  description="Away"
  avatar={{ alt: 'Jane Smith' }}
  chip={{ color: 'warning' }}
/>

As Link

Provide href to render as a clickable link with hover state.

John Doe

View profile

<script lang="ts">
  import { User } from 'sv5ui';
</script>

<User
  name="John Doe"
  description="View profile"
  avatar={{ alt: 'John Doe' }}
  href="/profile/john"
/>

UI Slots

Use the ui prop to override classes on internal elements.

Slot	Description
`root`	`Root container — controls flex layout, alignment, gap`
`wrapper`	`Text content wrapper — controls text alignment and overflow`
`name`	`Name text element — controls font weight, size, color, truncation`
`description`	`Description text element — controls font size, color, truncation`
`avatar`	`Avatar wrapper — controls avatar sizing and shrink behavior`

Snippets

Use snippets to customize specific parts of the User.

Snippet	Description
`avatarSlot`	`Custom avatar content — overrides avatar prop`
`nameSlot`	`Custom name content — overrides name prop`
`descriptionSlot`	`Custom description content — overrides description prop`

Props

Prop	Type	Default	Description
`name`	`string`	`-`	`Display name (primary text)`
`description`	`string`	`-`	`Secondary text below the name`
`avatar`	`AvatarProps`	`-`	`Avatar component configuration`
`chip`	`boolean \| ChipProps`	`false`	`Status chip wrapping the avatar`
`size`	`'3xs' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl'`	`'md'`	`Component size`
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	`Layout orientation`
`href`	`string`	`-`	`Renders as a clickable link`
`as`	`keyof HTMLElementTagNameMap`	`'div'`	`HTML element (ignored when href provided)`
`ref`	`HTMLElement \| null`	`null`	`Bindable reference to root element`
`class`	`string`	`-`	`Additional CSS classes`
`ui`	`Record<Slot, Class>`	`-`	`Override slot classes`

Timeline Table