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

# CreatorCard

> A portrait media card highlighting a creator with avatar, name, optional tagline, and up to two stacked action buttons over a background image.

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

## Examples

## Without Description

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

```tsx theme={null}
import { Button, CreatorCard } from "@fanvue/ui";

const SAMPLE_IMAGE =
  "https://images.unsplash.com/photo-1517841905240-472988babdf9?w=580&h=900&fit=crop";

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

<CreatorCard
  background={<img src={SAMPLE_IMAGE} alt="" loading="lazy" />}
  name="Jane Doe"
  avatar={{
    src: SAMPLE_AVATAR,
    alt: "Jane Doe",
    fallback: "JD",
  }}
  actions={<Button variant="primary" size="32" fullWidth>
    Follow for Free
  </Button>}
/>
```

## Two Buttons

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

```tsx theme={null}
import { Button, CreatorCard } from "@fanvue/ui";

const SAMPLE_IMAGE =
  "https://images.unsplash.com/photo-1517841905240-472988babdf9?w=580&h=900&fit=crop";

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

<CreatorCard
  background={<img src={SAMPLE_IMAGE} alt="" loading="lazy" />}
  name="Jane Doe"
  description="MODEL & PODCASTER"
  avatar={{
    src: SAMPLE_AVATAR,
    alt: "Jane Doe",
    fallback: "JD",
  }}
  actions={<>
    <Button variant="brand" size="32" fullWidth>
      Join for free for 3 days
    </Button>
    <Button variant="primary" size="32" fullWidth>
      Follow for Free
    </Button>
  </>}
/>
```

## One Button

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

```tsx theme={null}
import { Button, CreatorCard } from "@fanvue/ui";

const SAMPLE_IMAGE =
  "https://images.unsplash.com/photo-1517841905240-472988babdf9?w=580&h=900&fit=crop";

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

<CreatorCard
  background={<img src={SAMPLE_IMAGE} alt="" loading="lazy" />}
  name="Jane Doe"
  description="MODEL & PODCASTER"
  avatar={{
    src: SAMPLE_AVATAR,
    alt: "Jane Doe",
    fallback: "JD",
  }}
  actions={<Button variant="primary" size="32" fullWidth>
    Follow for Free
  </Button>}
/>
```

## No Buttons

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

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

const SAMPLE_IMAGE =
  "https://images.unsplash.com/photo-1517841905240-472988babdf9?w=580&h=900&fit=crop";

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

<CreatorCard
  background={<img src={SAMPLE_IMAGE} alt="" loading="lazy" />}
  name="Jane Doe"
  description="MODEL & PODCASTER"
  avatar={{
    src: SAMPLE_AVATAR,
    alt: "Jane Doe",
    fallback: "JD",
  }}
/>
```

## Avatar Options

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

```tsx theme={null}
import { Button, CreatorCard } from "@fanvue/ui";

const SAMPLE_IMAGE =
  "https://images.unsplash.com/photo-1517841905240-472988babdf9?w=580&h=900&fit=crop";

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

<CreatorCard
  background={<img src={SAMPLE_IMAGE} alt="" loading="lazy" />}
  name="Jane Doe"
  description="MODEL & PODCASTER"
  avatar={{
    src: SAMPLE_AVATAR,
    alt: "Jane Doe",
    fallback: "JD",
    onlineIndicator: true,
    platinumShow: true,
  }}
  actions={<Button variant="primary" size="32" fullWidth>
    Follow for Free
  </Button>}
/>
```

## Props

## CreatorCard

A portrait media card highlighting a creator with avatar, name, optional tagline, and up to two stacked action buttons over a background image.

Pass zero, one, or two `Button` elements via `actions` to render the no-button, single-button, or two-button variants.

<ParamField path="background" type="ReactNode" required>
  Decorative background media rendered behind the creator content.
</ParamField>

<ParamField path="name" type="string" required>
  Creator display name shown as the heading.
</ParamField>

<ParamField path="actions" type="ReactNode">
  Action buttons rendered at the bottom of the card. Pass zero, one, or two `Button` elements to render variants with no, one, or two CTAs.
</ParamField>

<ParamField path="avatar" type={"Omit<AvatarProps & RefAttributes<HTMLSpanElement>, \"ref\">"}>
  Avatar props forwarded to the inner `Avatar`.
</ParamField>

<ParamField path="description" type="string">
  Optional secondary line shown below the name (e.g. role or tagline).
</ParamField>

## Exported types

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

***

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