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

# Avatar

> Displays a user avatar with optional online indicator, platinum border, and NSFW blur.

```tsx theme={null}
import { Avatar, AvatarFallback, AvatarImage, AvatarRoot } from "@fanvue/ui";
import type {
  AvatarFallbackProps,
  AvatarImageProps,
  AvatarProps,
  AvatarRootProps,
  AvatarSize,
} from "@fanvue/ui";
```

## Examples

## Default

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

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

const SRC = "https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?w=128&h=128&fit=crop";

<Avatar src={SRC} alt="User avatar" fallback="JD" />
```

## All Sizes

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

```tsx theme={null}
import type React from "react";
import { Avatar, CheckCircleIcon } from "@fanvue/ui";
import type { AvatarSize } from "@fanvue/ui";

const SRC = "https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?w=128&h=128&fit=crop";

const SIZES: AvatarSize[] = [16, 24, 32, 40, 48, 64, 88, 148];

const Row = ({ label, children }: { label: string; children: React.ReactNode }) => (
  <div className="flex flex-col gap-2">
    <span className="typography-description-12px-semibold text-content-tertiary">{label}</span>
    <div className="flex flex-wrap items-end gap-3">{children}</div>
  </div>
);

<div className="flex flex-col gap-6">
  <Row label="Image">
    {SIZES.map((size) => (
      <Avatar key={size} size={size} src={SRC} alt="User avatar" fallback="JD" />
    ))}
  </Row>
  <Row label="Initials">
    {SIZES.map((size) => (
      <Avatar key={size} size={size} fallback="AB" />
    ))}
  </Row>
  <Row label="Icon">
    {SIZES.map((size) => (
      <Avatar key={size} size={size} fallback={<CheckCircleIcon />} />
    ))}
  </Row>
  <Row label="Empty">
    {SIZES.map((size) => (
      <Avatar key={size} size={size} fallback="" />
    ))}
  </Row>
</div>
```

## Framework Agnostic

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

```tsx theme={null}
import { AvatarFallback, AvatarImage, AvatarRoot } from "@fanvue/ui";

const SRC = "https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?w=128&h=128&fit=crop";

<AvatarRoot size={40} onlineIndicator={true}>
  <AvatarImage src={SRC} alt="User avatar" />
  <AvatarFallback>JD</AvatarFallback>
</AvatarRoot>
```

## All Decorations

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

```tsx theme={null}
import type React from "react";
import { Avatar, CheckCircleIcon } from "@fanvue/ui";
import type { AvatarSize } from "@fanvue/ui";

const SRC = "https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?w=128&h=128&fit=crop";

const Row = ({ label, children }: { label: string; children: React.ReactNode }) => (
  <div className="flex flex-col gap-2">
    <span className="typography-description-12px-semibold text-content-tertiary">{label}</span>
    <div className="flex flex-wrap items-end gap-3">{children}</div>
  </div>
);

function Example() {
  const decorations = [
    { label: "Online indicator", props: { onlineIndicator: true } },
    { label: "Platinum", props: { platinumShow: true } },
    { label: "NSFW", props: { NSFWShow: true } },
    { label: "Platinum + NSFW", props: { platinumShow: true, NSFWShow: true } },
    {
      label: "All three",
      props: { platinumShow: true, NSFWShow: true, onlineIndicator: true },
    },
  ];
  return (
    <div className="flex flex-col gap-6">
      {decorations.map(({ label, props }) => (
        <Row key={label} label={label}>
          {([24, 40, 88] as AvatarSize[]).map((size) => (
            <Avatar key={size} size={size} src={SRC} alt="User avatar" fallback="JD" {...props} />
          ))}
          {([24, 40, 88] as AvatarSize[]).map((size) => (
            <Avatar key={`initials-${size}`} size={size} fallback="AB" {...props} />
          ))}
          <Avatar size={40} fallback={<CheckCircleIcon />} {...props} />
        </Row>
      ))}
    </div>
  );
}
```

## Props

## Avatar

Displays a user avatar with optional online indicator, platinum border, and NSFW blur. Pass `src` and `fallback` for the simple API, or compose your own layout with `AvatarRoot`, `AvatarImage`, and `AvatarFallback` as children.

<ParamField path="alt" type="string" default="Avatar">
  Alt text for the avatar image.
</ParamField>

<ParamField path="asChild" type="boolean" />

<ParamField path="fallback" type="ReactNode">
  Fallback content rendered when the image has not loaded (e.g. initials or an icon).
</ParamField>

<ParamField path="NSFWShow" type="boolean" default="false">
  Whether to apply the NSFW blur filter over the image.
</ParamField>

<ParamField path="onlineIndicator" type="boolean" default="false">
  Whether to show the online-status indicator dot.
</ParamField>

<ParamField path="platinumShow" type="boolean" default="false">
  Whether to show the platinum gradient border ring.
</ParamField>

<ParamField path="size" type="16 | 24 | 32 | 40 | 48 | 64 | 88 | 148" default="40">
  Pixel size of the avatar.
</ParamField>

<ParamField path="src" type="string">
  URL of the avatar image.
</ParamField>

## AvatarFallback

<ParamField path="asChild" type="boolean" />

## AvatarImage

<ParamField path="asChild" type="boolean" />

## AvatarRoot

<ParamField path="asChild" type="boolean" />

<ParamField path="NSFWShow" type="boolean" default="false">
  Whether to apply the NSFW blur filter over the image.
</ParamField>

<ParamField path="onlineIndicator" type="boolean" default="false">
  Whether to show the online-status indicator dot.
</ParamField>

<ParamField path="platinumShow" type="boolean" default="false">
  Whether to show the platinum gradient border ring.
</ParamField>

<ParamField path="size" type="16 | 24 | 32 | 40 | 48 | 64 | 88 | 148" default="40">
  Pixel size of the avatar.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `AvatarFallbackProps`, `AvatarImageProps`, `AvatarProps`, `AvatarRootProps`, `AvatarSize`.

***

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