> ## 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.
# EmptyState
> A placeholder for a view with nothing in it yet: media or icon, title, description and up to two actions, in five title and five media sizes.
```tsx theme={null}
import { EmptyState } from "@fanvue/ui";
import type { EmptyStateProps, EmptyStateSlot, EmptyStateVariant } from "@fanvue/ui";
```
## Examples
## Default
```tsx theme={null}
import { Button, EmptyState } from "@fanvue/ui";
function EmptyVaultArtwork() {
return (
);
}
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: ,
primaryAction: ,
};
}
primaryAction={}
/>
```
## Small Title Size
```tsx theme={null}
import { Button, EmptyState } from "@fanvue/ui";
function EmptyVaultArtwork() {
return (
);
}
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: ,
primaryAction: ,
};
}
primaryAction={}
titleSize="sm"
/>
```
## With Secondary Action
```tsx theme={null}
import { Button, EmptyState } from "@fanvue/ui";
function EmptyVaultArtwork() {
return (
);
}
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: ,
primaryAction: ,
};
}
primaryAction={}
secondaryAction={}
/>
```
## Centered
```tsx theme={null}
import { Button, EmptyState } from "@fanvue/ui";
function EmptyVaultArtwork() {
return (
);
}
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: ,
primaryAction: ,
};
}
primaryAction={}
/>
```
## Small Media
```tsx theme={null}
import { Button, EmptyState } from "@fanvue/ui";
function EmptyVaultArtwork() {
return (
);
}
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: ,
primaryAction: ,
};
}
primaryAction={}
mediaSize="sm"
/>
```
## Props
## EmptyState
Supporting body copy. Strings use library body styles; pass a node for rich text.
Top visual / illustration slot. A string is treated as an image URL (``); pass a node for custom layout.
Height of the media container.
Primary call to action. A string renders a brand `Button` with that label; pass a node for links, loading, etc.
Secondary action below the primary. A string renders a secondary `Button` with that label; pass a node when you need more control.
Main heading. Strings use library heading styles; pass a node for full control.
Size of the title heading — mapped internally to bold heading typography tokens.
Matches Figma property `Property 1` (`Default` / `centered`).
## Exported types
Also exported from `@fanvue/ui`: `EmptyStateProps`, `EmptyStateSlot`, `EmptyStateVariant`.
***
**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)