Fanvue API Documentation

import { CreatorCard } from "@fanvue/ui";
import type { CreatorCardProps } from "@fanvue/ui";

Examples

Without Description

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

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

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

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

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.

ReactNode

required

Decorative background media rendered behind the creator content.

string

required

Creator display name shown as the heading.

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.

Avatar props forwarded to the inner Avatar.

string

Optional secondary line shown below the name (e.g. role or tagline).

Exported types

Also exported from @fanvue/ui: CreatorCardProps.

Setup: Installation · Theming

Getting Started

Actions

Forms & Inputs

Overlays & Dialogs

Navigation

Data Display

Feedback & Status

Layout

Media & Audio

Creator & Social

Charts

Icons & Flags

Utility

CreatorCard

Examples

Without Description

Two Buttons

One Button

No Buttons

Avatar Options

Props

CreatorCard

Exported types

​Examples

​Without Description

​Two Buttons

​One Button

​No Buttons

​Avatar Options

​Props

​CreatorCard

​Exported types

Examples

Without Description

Two Buttons

One Button

No Buttons

Avatar Options

Props

CreatorCard

Exported types