> ## 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.

# UserHandle

> Renders a user handle prefixed with the `@` symbol as muted, truncated secondary text.

```tsx theme={null}
import { UserHandle } from "@fanvue/ui";
import type { UserHandleProps } from "@fanvue/ui";
```

## Examples

## Default

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

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

<UserHandle>fit_aitana</UserHandle>
```

## Long Handle

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

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

<UserHandle>an_extremely_long_handle_that_should_truncate_with_an_ellipsis</UserHandle>
```

## Props

## UserHandle

Renders a user handle prefixed with the `@` symbol as muted, truncated secondary text.

Takes no props of its own. Accepts all standard `span` attributes, including `className`.

## Exported types

Also exported from `@fanvue/ui`: `UserHandleProps`.

***

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