> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# UserItem

> A compact user row showing an avatar, display name (or nickname) and handle, with optional verified and AI-disclosure badges and online and muted indicators.

```tsx theme={null}
import { UserItem, UserItemTrailing } from "@fanvue/ui";
import type { UserItemProps, UserItemTrailingProps, UserItemUser } from "@fanvue/ui";
```

## Examples

## Default

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-useritem--default&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="260" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="UserItem — Default" />
</Frame>

```tsx theme={null}
import { UserItem } from "@fanvue/ui";

const SAMPLE_AVATAR =
  "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=128&h=128&fit=crop";

const sampleUser = {
  avatarUri: { url: SAMPLE_AVATAR },
  displayName: "Aitana Lopez",
  handle: "fit_aitana",
};

<UserItem
  user={sampleUser}
  isMuted={false}
  isOnline={false}
  showAvatar
  showHandle
  showOnlineStatus={false}
  aiDisclosure={false}
  verified={false}
/>
```

## Online Indicator

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-useritem--online-indicator&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="260" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="UserItem — Online Indicator" />
</Frame>

```tsx theme={null}
import { UserItem } from "@fanvue/ui";

const SAMPLE_AVATAR =
  "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=128&h=128&fit=crop";

const sampleUser = {
  avatarUri: { url: SAMPLE_AVATAR },
  displayName: "Aitana Lopez",
  handle: "fit_aitana",
};

<UserItem
  user={sampleUser}
  isMuted={false}
  isOnline
  showAvatar
  showHandle
  showOnlineStatus
  aiDisclosure={false}
  verified={false}
/>
```

## Avatar Sizes

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-useritem--avatar-sizes&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="260" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="UserItem — Avatar Sizes" />
</Frame>

```tsx theme={null}
import { UserItem } from "@fanvue/ui";

const SAMPLE_AVATAR =
  "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=128&h=128&fit=crop";

const sampleUser = {
  avatarUri: { url: SAMPLE_AVATAR },
  displayName: "Aitana Lopez",
  handle: "fit_aitana",
};

<div className="flex w-72 flex-col gap-2">
  {([16, 24, 32, 40, 48, 64, 88, 148] as const).map((avatarSize) => (
    <div key={avatarSize} className="flex flex-col gap-1">
      <UserItem
        user={sampleUser}
        isMuted={false}
        isOnline={false}
        showAvatar
        showHandle
        showOnlineStatus={false}
        aiDisclosure={false}
        verified={false}
        avatarSize={avatarSize}
      />
      <p className="typography-description-12px-regular pl-2 text-content-secondary">
        avatarSize={avatarSize}
      </p>
    </div>
  ))}
</div>
```

## Without Avatar

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-useritem--without-avatar&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="260" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="UserItem — Without Avatar" />
</Frame>

```tsx theme={null}
import { UserItem } from "@fanvue/ui";

const SAMPLE_AVATAR =
  "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=128&h=128&fit=crop";

const sampleUser = {
  avatarUri: { url: SAMPLE_AVATAR },
  displayName: "Aitana Lopez",
  handle: "fit_aitana",
};

<UserItem
  user={sampleUser}
  isMuted={false}
  isOnline={false}
  showAvatar={false}
  showHandle
  showOnlineStatus={false}
  aiDisclosure={false}
  verified={false}
/>
```

## Nickname

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-useritem--nickname&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="260" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="UserItem — Nickname" />
</Frame>

```tsx theme={null}
import { UserItem } from "@fanvue/ui";

const SAMPLE_AVATAR =
  "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=128&h=128&fit=crop";

const sampleUser = {
  avatarUri: { url: SAMPLE_AVATAR },
  displayName: "Aitana Lopez",
  handle: "fit_aitana",
};

<UserItem
  user={{ ...sampleUser, nickname: "Aitana" }}
  isMuted={false}
  isOnline={false}
  showAvatar
  showHandle
  showOnlineStatus={false}
  aiDisclosure={false}
  verified={false}
/>
```

## Props

## UserItem

A compact user row showing an avatar, display name (or nickname) and handle, with optional verified and AI-disclosure badges and online and muted indicators.

Pass `UserItemProps.trailing` to pin a value to the end of the row, the shape most list rows need — top spenders, most active fans, a recent-activity feed.

<ParamField path="user" type="UserItemUser" required>
  The user to display.
</ParamField>

<ParamField path="aiDisclosure" type="boolean" default="false">
  Render an AI-disclosure badge after the display name.
</ParamField>

<ParamField path="aiDisclosureLabel" type="string" default="AI creator">
  Accessible label for the AI-disclosure badge.
</ParamField>

<ParamField path="avatarSize" type="number" default="48">
  Desired avatar size in px; snapped to the nearest supported token.
</ParamField>

<ParamField path="isMuted" type="boolean" default="false">
  Show the muted indicator in the bottom-left corner.
</ParamField>

<ParamField path="isOnline" type="boolean" default="false">
  Whether the user is online (only shown when `showOnlineStatus` is also set).
</ParamField>

<ParamField path="primary" type="ReactNode">
  Replace the display-name line with arbitrary content, for rows that read as a sentence about the user rather than their name — an activity feed entry, for instance. Badges do not apply to custom content.
</ParamField>

<ParamField path="secondary" type="ReactNode">
  A supporting line under the name, mirroring `UserItemTrailing`'s `meta`. Both are block lines on the same 18px advance, so a row using `secondary` on the left and `meta` on the right reads as two aligned tiers. Prefer it over letting a long primary wrap, which mixes line heights and drifts out of step.
</ParamField>

<ParamField path="showAvatar" type="boolean" default="true">
  Render the avatar.
</ParamField>

<ParamField path="showHandle" type="boolean" default="true">
  Render the handle line under the display name.
</ParamField>

<ParamField path="showOnlineStatus" type="boolean">
  Enable the avatar online indicator (combined with `isOnline`).
</ParamField>

<ParamField path="trailing" type="ReactNode">
  Content pinned to the end of the row — a value, count, timestamp or action. It keeps its intrinsic width while the name block absorbs the remaining space, so trailing content stays aligned down the rows of a list.

  Prefer `UserItemTrailing` over composing the lines yourself.
</ParamField>

<ParamField path="verified" type="boolean" default="false">
  Render a verified badge after the display name.
</ParamField>

<ParamField path="verifiedLabel" type="string" default="Verified">
  Accessible label for the verified badge.
</ParamField>

## UserItemTrailing

The end-of-row block for a `UserItem`: a value with an optional supporting line beneath it, both aligned to the right edge so figures line up down a list.

Pass it to `UserItem`'s `trailing` slot rather than composing the two lines at each call site, so value and meta typography stay consistent wherever a list row carries a figure.

<ParamField path="value" type="ReactNode" required>
  The headline figure — an amount, a count, a percentage.
</ParamField>

<ParamField path="meta" type="ReactNode">
  Optional supporting line under the value, such as a timestamp.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `UserItemProps`, `UserItemTrailingProps`, `UserItemUser`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)