# `PhiaUi.Components.BarList`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/data/bar_list.ex#L1)

Horizontal bar list — ranks items by value with proportional bars.

Inspired by Tremor `BarList` and Ant Design statistics lists.
Useful for leaderboards, category breakdowns, and ranked metrics.

The max value is computed server-side; all widths are inline `style` percent
values (cannot use Tailwind `w-*` for dynamic widths).

## Examples

    <.bar_list data={[
      %{name: "Direct", value: 4200},
      %{name: "Referral", value: 2800},
      %{name: "Organic", value: 1100}
    ]} />

    <.bar_list
      data={@traffic}
      color="bg-blue-500"
      value_formatter={fn v -> "$#{v}" end}
    />

# `bar_list`

## Attributes

* `data` (`:list`) (required) - List of maps with `:name` (string), `:value` (number), and optional `:href` (string).
* `value_formatter` (`:any`) - Optional `fn/1` to format displayed values. Receives the raw value. Defaults to `nil`.
* `color` (`:string`) - Tailwind bg-* class for the bars. Defaults to `"bg-primary"`.
* `class` (`:string`) - Additional CSS classes for the root element. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root `<div>`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*