GitHub

Bar List

PreviousNext

Display ranked values as horizontal bars.

Loading
Loading...
import { BarList } from "@/components/ui/bar-list";
 
const data = [
  { name: "Search", value: 72 },
  { name: "Email", value: 58 },
  { name: "Social", value: 33 },
  { name: "Referral", value: 19 },
];
 
export function BarListDemo() {
  return (
    <BarList
      className="w-full max-w-md"
      data={data}
      valueFormatter={(value) => `${value}%`}
    />
  );
}

Installation

npx shadcn@latest add "https://ui.blode.co/r/styles/default/bar-list"

Usage

import { BarList } from "@/components/ui/bar-list";
const data = [
  { name: "Search", value: 72 },
  { name: "Email", value: 58 },
  { name: "Social", value: 33 },
];
 
<BarList data={data} valueFormatter={(value) => `${value}%`} />;