Fanvue API Documentation

import { UserItem, UserItemTrailing } from "@fanvue/ui";
import type { UserItemProps, UserItemTrailingProps, UserItemUser } from "@fanvue/ui";

Examples

Default

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

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

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

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

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.

UserItemUser

required

The user to display.

boolean

default:"false"

Render an AI-disclosure badge after the display name.

string

default:"AI creator"

Accessible label for the AI-disclosure badge.

number

default:"48"

Desired avatar size in px; snapped to the nearest supported token.

boolean

default:"false"

Show the muted indicator in the bottom-left corner.

boolean

default:"false"

Whether the user is online (only shown when showOnlineStatus is also set).

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.

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.

boolean

default:"true"

Render the avatar.

boolean

default:"true"

Render the handle line under the display name.

boolean

Enable the avatar online indicator (combined with isOnline).

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.

boolean

default:"false"

Render a verified badge after the display name.

string

default:"Verified"

Accessible label for the verified badge.

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.

ReactNode

required

The headline figure — an amount, a count, a percentage.

ReactNode

Optional supporting line under the value, such as a timestamp.

Exported types

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

Setup: Installation · Theming

Getting Started

Actions

Forms & Inputs

Overlays & Dialogs

Navigation

Data Display

Feedback & Status

Layout

Media & Audio

Creator & Social

Charts

Icons & Flags

Utility

UserItem

Examples

Default

Online Indicator

Avatar Sizes

Without Avatar

Nickname

Props

UserItem

UserItemTrailing

Exported types

​Examples

​Default

​Online Indicator

​Avatar Sizes

​Without Avatar

​Nickname

​Props

​UserItem

​UserItemTrailing

​Exported types

Examples

Default

Online Indicator

Avatar Sizes

Without Avatar

Nickname

Props

UserItem

UserItemTrailing

Exported types