Fanvue API Documentation

import { CreatorTile } from "@fanvue/ui";
import type { CreatorTileAspectRatio, CreatorTileProps } from "@fanvue/ui";

Examples

Default

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

const SAMPLE_BACKGROUND =
  "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=720&h=400&fit=crop";

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

<div className="w-90">
  <CreatorTile
    background={<img src={SAMPLE_BACKGROUND} alt="" loading="lazy" />}
    name="Aitana Lopez"
    tagline="@fit_aitana"
    avatar={{
      src: SAMPLE_AVATAR,
      alt: "Aitana Lopez",
      fallback: "AL",
    }}
    action={<Button variant="primary" size="32">
      Follow
    </Button>}
    className="rounded-lg"
  />
</div>

Without Tagline

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

const SAMPLE_BACKGROUND =
  "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=720&h=400&fit=crop";

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

<div className="w-90">
  <CreatorTile
    background={<img src={SAMPLE_BACKGROUND} alt="" loading="lazy" />}
    name="Aitana Lopez"
    avatar={{
      src: SAMPLE_AVATAR,
      alt: "Aitana Lopez",
      fallback: "AL",
    }}
    action={<Button variant="primary" size="32">
      Follow
    </Button>}
    className="rounded-lg"
  />
</div>

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

const SAMPLE_BACKGROUND =
  "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=720&h=400&fit=crop";

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

<div className="w-100">
  <CreatorTile
    background={<img src={SAMPLE_BACKGROUND} alt="" loading="lazy" />}
    aspectRatio="banner"
    className="rounded-lg"
    name={
      <UserDisplayName verified aiDisclosure className="text-white">
        Jane Doe
      </UserDisplayName>
    }
    tagline="@jane_doe"
    avatar={{ src: SAMPLE_AVATAR, alt: "Jane Doe", fallback: "JD" }}
    action={
      <Button variant="white" size="32" className="rounded-full">
        View Profile
      </Button>
    }
  />
</div>

Without Action

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

const SAMPLE_BACKGROUND =
  "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=720&h=400&fit=crop";

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

<div className="w-90">
  <CreatorTile
    background={<img src={SAMPLE_BACKGROUND} alt="" loading="lazy" />}
    name="Aitana Lopez"
    tagline="@fit_aitana"
    avatar={{
      src: SAMPLE_AVATAR,
      alt: "Aitana Lopez",
      fallback: "AL",
    }}
    className="rounded-lg"
  />
</div>

Aspect Ratios

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

const SAMPLE_BACKGROUND =
  "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=720&h=400&fit=crop";

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

<div className="flex flex-wrap items-start gap-4">
  {(["tall", "medium", "short", "banner"] as const).map((aspectRatio) => (
    <div key={aspectRatio} className="flex w-[280px] flex-col gap-2">
      <CreatorTile
        background={<img src={SAMPLE_BACKGROUND} alt="" loading="lazy" />}
        name="Aitana Lopez"
        tagline="@fit_aitana"
        avatar={{
          src: SAMPLE_AVATAR,
          alt: "Aitana Lopez",
          fallback: "AL",
        }}
        action={<Button variant="primary" size="32">
          Follow
        </Button>}
        aspectRatio={aspectRatio}
        className="rounded-lg"
      />
      <p className="typography-description-12px-regular text-content-secondary">
        aspectRatio=&quot;{aspectRatio}&quot;
      </p>
    </div>
  ))}
</div>

Props

CreatorTile

A visual highlight tile showcasing a creator with a full-bleed background media and an overlaid profile row containing an avatar, name, optional tagline and an action element.

ReactNode

required

Decorative background media rendered behind the creator content.

ReactNode

required

Creator display name shown as the prominent heading.

ReactNode

Action element rendered on the right of the profile row (e.g. a Button for following the creator).

"banner" | "tall" | "medium" | "short"

default:"medium"

Width-to-height ratio preset.

tall – 5:4, closest to square
medium – 3:2 landscape
short – 9:5 landscape
banner – 5:2, the slimmest preset

The profile row is a fixed ~74px tall, so banner needs at least 185px of width before the ratio makes the tile shorter than its own row and the top of the row is clipped. The taller presets reach that floor at widths too narrow to be practical.

Avatar props forwarded to the inner Avatar.

ReactNode

Optional secondary line shown under the name (e.g. handle or tagline).

Exported types

Also exported from @fanvue/ui: CreatorTileAspectRatio, CreatorTileProps.

Setup: Installation · Theming

Getting Started

Actions

Forms & Inputs

Overlays & Dialogs

Navigation

Data Display

Feedback & Status

Layout

Media & Audio

Creator & Social

Charts

Icons & Flags

Utility

CreatorTile

Examples

Default

Without Tagline

Banner

Without Action

Aspect Ratios

Props

CreatorTile

Exported types

​Examples

​Default

​Without Tagline

​Banner

​Without Action

​Aspect Ratios

​Props

​CreatorTile

​Exported types

Examples

Default

Without Tagline

Banner

Without Action

Aspect Ratios

Props

CreatorTile

Exported types