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

# Demographics

> One row of a breakdown: a leading glyph and label, its share at the far end, and a bar underneath.

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

## Examples

## Default

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

```tsx theme={null}
import { Demographics } from "@fanvue/ui";
import { CountryFlag } from "@fanvue/ui/flags";

<div className="w-full max-w-sm">
  <Demographics
    label="United States"
    value={52.6}
    formattedValue="52.6%"
    icon={<CountryFlag country="US" />}
  />
</div>
```

## Without Icon

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

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

<div className="flex w-full max-w-sm flex-col gap-4">
  <Demographics label="Direct" value={64} formattedValue="64%" />
  <Demographics label="Referral" value={36} formattedValue="36%" />
</div>
```

## Stacked breakdown

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

```tsx theme={null}
import { Demographics } from "@fanvue/ui";
import { CountryFlag } from "@fanvue/ui/flags";

const COUNTRIES = [
  { country: "US", label: "United States", value: 52.6 },
  { country: "GB", label: "United Kingdom", value: 29.2 },
  { country: "NL", label: "Netherlands", value: 7.6 },
  { country: "IT", label: "Italy", value: 7.3 },
  { country: "ES", label: "Spain", value: 6.9 },
];

<div className="flex w-full max-w-sm flex-col gap-4">
  {COUNTRIES.map((country) => (
    <Demographics
      key={country.label}
      label={country.label}
      value={country.value}
      formattedValue={`${country.value}%`}
      icon={<CountryFlag country={country.country} />}
    />
  ))}
</div>
```

## Props

## Demographics

One row of a breakdown: a leading glyph and label, its share at the far end, and a bar underneath. Stack these to show how a total splits across categories — the top-countries breakdown on the insights dashboard, and the same list expanded inside a dialog.

<ParamField path="formattedValue" type="ReactNode" required>
  Formatted share shown at the end of the row, e.g. `"52.6%"`.
</ParamField>

<ParamField path="label" type="string" required>
  Row label, e.g. a country name. Pass a translated string for i18n.

  A string rather than a node because it is also the bar's accessible name: a node would leave the bar announcing "Progress" and a bare number, with nothing saying which row it belongs to.
</ParamField>

<ParamField path="value" type="number" required>
  Share of the total, 0–100. Drives the bar and is announced to assistive tech.
</ParamField>

<ParamField path="icon" type="ReactNode">
  Leading 20px glyph — a flag for a country row.
</ParamField>

## Exported types

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

***

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