BarList

Use BarList

A compact ranked list of named values on one scale.

"use client";

import { FloodRoot, BarList } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <BarList label="Visits by page" items={[
        {id:"overview", label:"Overview", value:214},
        {id:"components", label:"Components", value:136}
      ]} />
    </FloodRoot>
  );
}

Design notes

• Sort items before passing them in. The list preserves display order and uses a shared zero baseline. Pass the same max to compare separate lists.
• Each item uses a proportional background bar from Flood Meter. Labels and exact values share one row and stay aligned across the list. Supply valueText for units or localized formatting.

API reference