> ## 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.

# FanFollowerCount

> Displays a creator's formatted fan and subscriber counts, each paired with an icon.

```tsx theme={null}
import { FanFollowerCount } from "@fanvue/ui";
import type { FanFollowerCountProps } from "@fanvue/ui";
```

## Examples

## Default

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-fanfollowercount--default&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="380" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="FanFollowerCount — Default" />
</Frame>

```tsx theme={null}
import { FanFollowerCount } from "@fanvue/ui";

<FanFollowerCount fans={1200} subs={3000} />
```

## Large Counts

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-fanfollowercount--large-counts&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="380" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="FanFollowerCount — Large Counts" />
</Frame>

```tsx theme={null}
import { FanFollowerCount } from "@fanvue/ui";

<FanFollowerCount fans={1250000} subs={48900} />
```

## Preformatted Strings

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-fanfollowercount--preformatted-strings&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="380" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="FanFollowerCount — Preformatted Strings" />
</Frame>

```tsx theme={null}
import { FanFollowerCount } from "@fanvue/ui";

<FanFollowerCount fans="1.2k" subs="3k" />
```

## Fans Only

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-fanfollowercount--fans-only&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="380" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="FanFollowerCount — Fans Only" />
</Frame>

```tsx theme={null}
import { FanFollowerCount } from "@fanvue/ui";

<FanFollowerCount fans={1200} showSubs={false} />
```

## Small Counts

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-fanfollowercount--small-counts&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="380" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="FanFollowerCount — Small Counts" />
</Frame>

```tsx theme={null}
import { FanFollowerCount } from "@fanvue/ui";

<FanFollowerCount fans={42} subs={7} />
```

## Props

## FanFollowerCount

Displays a creator's formatted fan and subscriber counts, each paired with an icon. Numeric values are compacted (`1200` → `"1.2k"`); pass a pre-formatted string to bypass formatting. Either group can be hidden independently.

<ParamField path="fans" type="string | number" default="0">
  Fan count. Numbers are compacted (e.g. `1200` → `"1.2k"`); strings render verbatim.
</ParamField>

<ParamField path="fansLabel" type="string" default="Fans">
  Label rendered after the fan count.
</ParamField>

<ParamField path="showFans" type="boolean" default="true">
  Show the fan count group.
</ParamField>

<ParamField path="showSubs" type="boolean" default="true">
  Show the subscriber count group.
</ParamField>

<ParamField path="subs" type="string | number" default="0">
  Subscriber count. Numbers are compacted (e.g. `3000` → `"3k"`); strings render verbatim.
</ParamField>

<ParamField path="subsLabel" type="string" default="Subs">
  Label rendered after the subscriber count.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `FanFollowerCountProps`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)