Bar List

Component

About

A compact list component that visualizes and compares ranked numeric values as horizontal bars, like top pages, traffic sources, or leaderboard scores.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Bar List to your project and fits it to your theme.

Code

How Bar List is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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 default function BarListDemo() {
  return (
    <BarList
      className="w-full max-w-md"
      data={data}
      valueFormatter={(value) => `${value}%`}
    />
  );
}