Fanvue API Documentation

import { EmptyState } from "@fanvue/ui";
import type { EmptyStateProps, EmptyStateSlot, EmptyStateVariant } from "@fanvue/ui";

Examples

Default

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

function EmptyVaultArtwork() {
  return (
    <div className="relative h-full w-full bg-surface-secondary">
      <div className="absolute top-8 left-5 size-20 rounded-full bg-surface-primary" />
      <div className="absolute top-5 left-24 size-36 rounded-full bg-surface-tertiary" />
      <div className="absolute top-20 left-40 size-24 rounded-full bg-surface-primary" />
    </div>
  );
}

const defaultArgs = {
  title: "Empty Vault, Full Potential!",
  description:
    "Add your photos to the Vault to start sharing your creations and earning! The more you add, the more opportunities you will unlock to grow your audience and income.",
  media: <EmptyVaultArtwork />,
  primaryAction: <Button variant="brand">Add Media to Vault</Button>,
};

<EmptyState
  variant="default"
  titleSize="lg"
  mediaSize="lg"
  title="Empty Vault, Full Potential!"
  description="Add your photos to the Vault to start sharing your creations and earning! The more you add, the more opportunities you w…"
  media={<EmptyVaultArtwork />}
  primaryAction={<Button variant="brand">Add Media to Vault</Button>}
/>

Small Title Size

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

function EmptyVaultArtwork() {
  return (
    <div className="relative h-full w-full bg-surface-secondary">
      <div className="absolute top-8 left-5 size-20 rounded-full bg-surface-primary" />
      <div className="absolute top-5 left-24 size-36 rounded-full bg-surface-tertiary" />
      <div className="absolute top-20 left-40 size-24 rounded-full bg-surface-primary" />
    </div>
  );
}

const defaultArgs = {
  title: "Empty Vault, Full Potential!",
  description:
    "Add your photos to the Vault to start sharing your creations and earning! The more you add, the more opportunities you will unlock to grow your audience and income.",
  media: <EmptyVaultArtwork />,
  primaryAction: <Button variant="brand">Add Media to Vault</Button>,
};

<EmptyState
  variant="default"
  title="Empty Vault, Full Potential!"
  description="Add your photos to the Vault to start sharing your creations and earning! The more you add, the more opportunities you w…"
  media={<EmptyVaultArtwork />}
  primaryAction={<Button variant="brand">Add Media to Vault</Button>}
  titleSize="sm"
/>

With Secondary Action

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

function EmptyVaultArtwork() {
  return (
    <div className="relative h-full w-full bg-surface-secondary">
      <div className="absolute top-8 left-5 size-20 rounded-full bg-surface-primary" />
      <div className="absolute top-5 left-24 size-36 rounded-full bg-surface-tertiary" />
      <div className="absolute top-20 left-40 size-24 rounded-full bg-surface-primary" />
    </div>
  );
}

const defaultArgs = {
  title: "Empty Vault, Full Potential!",
  description:
    "Add your photos to the Vault to start sharing your creations and earning! The more you add, the more opportunities you will unlock to grow your audience and income.",
  media: <EmptyVaultArtwork />,
  primaryAction: <Button variant="brand">Add Media to Vault</Button>,
};

<EmptyState
  variant="default"
  title="Empty Vault, Full Potential!"
  description="Add your photos to the Vault to start sharing your creations and earning! The more you add, the more opportunities you w…"
  media={<EmptyVaultArtwork />}
  primaryAction={<Button variant="brand">Add Media to Vault</Button>}
  secondaryAction={<Button variant="secondary">Learn more</Button>}
/>

Centered

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

function EmptyVaultArtwork() {
  return (
    <div className="relative h-full w-full bg-surface-secondary">
      <div className="absolute top-8 left-5 size-20 rounded-full bg-surface-primary" />
      <div className="absolute top-5 left-24 size-36 rounded-full bg-surface-tertiary" />
      <div className="absolute top-20 left-40 size-24 rounded-full bg-surface-primary" />
    </div>
  );
}

const defaultArgs = {
  title: "Empty Vault, Full Potential!",
  description:
    "Add your photos to the Vault to start sharing your creations and earning! The more you add, the more opportunities you will unlock to grow your audience and income.",
  media: <EmptyVaultArtwork />,
  primaryAction: <Button variant="brand">Add Media to Vault</Button>,
};

<EmptyState
  variant="centered"
  title="Empty Vault, Full Potential!"
  description="Add your photos to the Vault to start sharing your creations and earning! The more you add, the more opportunities you w…"
  media={<EmptyVaultArtwork />}
  primaryAction={<Button variant="brand">Add Media to Vault</Button>}
/>

Small Media

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

function EmptyVaultArtwork() {
  return (
    <div className="relative h-full w-full bg-surface-secondary">
      <div className="absolute top-8 left-5 size-20 rounded-full bg-surface-primary" />
      <div className="absolute top-5 left-24 size-36 rounded-full bg-surface-tertiary" />
      <div className="absolute top-20 left-40 size-24 rounded-full bg-surface-primary" />
    </div>
  );
}

const defaultArgs = {
  title: "Empty Vault, Full Potential!",
  description:
    "Add your photos to the Vault to start sharing your creations and earning! The more you add, the more opportunities you will unlock to grow your audience and income.",
  media: <EmptyVaultArtwork />,
  primaryAction: <Button variant="brand">Add Media to Vault</Button>,
};

<EmptyState
  variant="default"
  title="Empty Vault, Full Potential!"
  description="Add your photos to the Vault to start sharing your creations and earning! The more you add, the more opportunities you w…"
  media={<EmptyVaultArtwork />}
  primaryAction={<Button variant="brand">Add Media to Vault</Button>}
  mediaSize="sm"
/>

Props

EmptyState

EmptyStateSlot

Supporting body copy. Strings use library body styles; pass a node for rich text.

EmptyStateSlot

Top visual / illustration slot. A string is treated as an image URL (<img src={…}>); pass a node for custom layout.

"md" | "sm" | "lg" | "xs" | "xl"

default:"lg"

Height of the media container.

EmptyStateSlot

Primary call to action. A string renders a brand Button with that label; pass a node for links, loading, etc.

EmptyStateSlot

Secondary action below the primary. A string renders a secondary Button with that label; pass a node when you need more control.

EmptyStateSlot

Main heading. Strings use library heading styles; pass a node for full control.

"md" | "sm" | "lg" | "xs" | "xl"

default:"lg"

Size of the title heading — mapped internally to bold heading typography tokens.

"default" | "centered"

default:"default"

Matches Figma property Property 1 (Default / centered).

Exported types

Also exported from @fanvue/ui: EmptyStateProps, EmptyStateSlot, EmptyStateVariant.

Setup: Installation · Theming

Getting Started

Actions

Forms & Inputs

Overlays & Dialogs

Navigation

Data Display

Feedback & Status

Layout

Media & Audio

Creator & Social

Charts

Icons & Flags

Utility

EmptyState

Examples

Default

Small Title Size

With Secondary Action

Centered

Small Media

Props

EmptyState

Exported types

​Examples

​Default

​Small Title Size

​With Secondary Action

​Centered

​Small Media

​Props

​EmptyState

​Exported types

Examples

Default

Small Title Size

With Secondary Action

Centered

Small Media

Props

EmptyState

Exported types