Bar List

npx shadcn@latest add https://ui.saasflare.io/r/bar-list.json

pnpm add @saasflare/ui

"use client"import { BarList } from "@saasflare/ui"/** Top referring sources by sessions — the classic "top N" ranking. */export function Demo() {    return (        <div className="w-full max-w-md">            <BarList                data={[                    { name: "Google", value: 18420 },                    { name: "Direct", value: 11230 },                    { name: "GitHub", value: 7640 },                    { name: "Twitter / X", value: 4310 },                    { name: "Product Hunt", value: 2870 },                ]}            />        </div>    )}

"use client"import { BarList } from "@saasflare/ui"/** Per-row color overrides — useful for highlighting error or status tiers. */export function Demo() {    return (        <div className="w-full max-w-md">            <BarList                valueFormatter={(n) => n.toLocaleString()}                data={[                    { name: "200 OK", value: 184200, color: "oklch(0.68 0.17 155)" },                    { name: "301 Redirect", value: 42100, color: "oklch(0.65 0.18 230)" },                    { name: "404 Not Found", value: 9800, color: "oklch(0.72 0.17 50)" },                    { name: "500 Server Error", value: 1240, color: "oklch(0.62 0.21 25)" },                ]}            />        </div>    )}

"use client"import { BarList } from "@saasflare/ui"/** Revenue by plan, formatted as currency and capped to the top 4 rows. */export function Demo() {    return (        <div className="w-full max-w-md">            <BarList                limit={4}                valueFormatter={(n) => `$${n.toLocaleString()}`}                data={[                    { name: "Enterprise", value: 48200 },                    { name: "Business", value: 31600 },                    { name: "Pro", value: 19450 },                    { name: "Starter", value: 8120 },                    { name: "Free", value: 0 },                ]}            />        </div>    )}