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

Basic Usage

Provide a name, description, and avatar for a simple user display.

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, each scaling avatar and text proportionally.

3xs

Jane

Designer

2xs

Jane

Designer

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

Use the chip prop to add a status indicator on the avatar. Pass true for default or an object for custom styling.

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 an href prop to render the User as a clickable link.

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 specific internal elements of the User.

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 Svelte 5 snippets to customize specific parts of the User.

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

Props

Prop	Type	Default	Description
`as`	`keyof HTMLElementTagNameMap`	`'div'`	HTML element to render as (ignored when href is provided)
`name`	`string`	`-`	Display name rendered as primary text
`description`	`string`	`-`	Secondary text displayed 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 link when provided
`class`	`string`	`-`	Additional CSS classes
`ui`	`Record<Slot, Class>`	`-`	Override classes on internal UI slots

Timeline Checkbox