Fanvue API Documentation

import { CreatorCover } from "@fanvue/ui";
import type { CreatorCoverProps, CreatorCoverSlot } from "@fanvue/ui";

Examples

Default

import { Button, CreatorCover } from "@fanvue/ui";

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

<CreatorCover
  imageSrc={sampleImage}
  imageAlt="Jane Doe"
  name="JANE DOE"
  tagline="GLOBAL POPSTAR"
  tag="New Joiner"
  action={<Button variant="brand" size="48" fullWidth>
    Join for free for 7 days
  </Button>}
/>

Without Tag

import { Button, CreatorCover } from "@fanvue/ui";

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

const defaultArgs = {
  imageSrc: sampleImage,
  imageAlt: "Jane Doe",
  name: "JANE DOE",
  tagline: "GLOBAL POPSTAR",
  tag: "New Joiner",
  action: (
    <Button variant="brand" size="48" fullWidth>
      Join for free for 7 days
    </Button>
  ),
};

<CreatorCover
  imageSrc={sampleImage}
  imageAlt="Jane Doe"
  name="JANE DOE"
  tagline="GLOBAL POPSTAR"
  action={<Button variant="brand" size="48" fullWidth>
    Join for free for 7 days
  </Button>}
/>

Name Only

import { CreatorCover } from "@fanvue/ui";

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

<CreatorCover imageSrc={sampleImage} imageAlt="Jane Doe" name="JANE DOE" />

Without Tagline

import { Button, CreatorCover } from "@fanvue/ui";

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

const defaultArgs = {
  imageSrc: sampleImage,
  imageAlt: "Jane Doe",
  name: "JANE DOE",
  tagline: "GLOBAL POPSTAR",
  tag: "New Joiner",
  action: (
    <Button variant="brand" size="48" fullWidth>
      Join for free for 7 days
    </Button>
  ),
};

<CreatorCover
  imageSrc={sampleImage}
  imageAlt="Jane Doe"
  name="JANE DOE"
  tag="New Joiner"
  action={<Button variant="brand" size="48" fullWidth>
    Join for free for 7 days
  </Button>}
/>

Separate Background

import { Button, CreatorCover } from "@fanvue/ui";

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

const defaultArgs = {
  imageSrc: sampleImage,
  imageAlt: "Jane Doe",
  name: "JANE DOE",
  tagline: "GLOBAL POPSTAR",
  tag: "New Joiner",
  action: (
    <Button variant="brand" size="48" fullWidth>
      Join for free for 7 days
    </Button>
  ),
};

<CreatorCover
  imageSrc={sampleImage}
  imageAlt="Jane Doe"
  name="JANE DOE"
  tagline="GLOBAL POPSTAR"
  tag="New Joiner"
  action={<Button variant="brand" size="48" fullWidth>
    Join for free for 7 days
  </Button>}
  backgroundSrc="https://images.unsplash.com/photo-1517457373958-b7bdd4587205?w=600&h=900&fit=crop"
/>

Props

CreatorCover

A creator profile hero with a stylised blurred backdrop, central cover image, status pill, name, tagline, and primary call to action.

string

required

URL of the creator image displayed in the centre card. Also used as the blurred backdrop unless backgroundSrc is provided.

string

required

Creator’s name, rendered as the heading.

ReactNode

Primary call to action displayed below the title.

string

default:"imageSrc"

Override URL used for the blurred background image.

boolean

default:"false"

When true, fades the bottom of the component to transparent and increases bottom padding to 64px.

string

Alt text for the centre cover image.

CreatorCoverSlot

Status label rendered as a pill overlapping the bottom of the cover image (e.g. “New Joiner”). Strings render with default green pill styling; pass a node for custom markup.

string

Smaller subtitle below the name (e.g. “GLOBAL POPSTAR”). Rendered uppercase in the brand colour.

Exported types

Also exported from @fanvue/ui: CreatorCoverProps, CreatorCoverSlot.

Setup: Installation · Theming

Getting Started

Actions

Forms & Inputs

Overlays & Dialogs

Navigation

Data Display

Feedback & Status

Layout

Media & Audio

Creator & Social

Charts

Icons & Flags

Utility

CreatorCover

Examples

Default

Without Tag

Name Only

Without Tagline

Separate Background

Props

CreatorCover

Exported types

​Examples

​Default

​Without Tag

​Name Only

​Without Tagline

​Separate Background

​Props

​CreatorCover

​Exported types

Examples

Default

Without Tag

Name Only

Without Tagline

Separate Background

Props

CreatorCover

Exported types