Stats Bar List

Installation

pnpm dlx shadcn@latest add @cleverui/stats-bar-list

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { StatsBarList } from '@/components/blocks/stats-bar-list'

Exampletsx

import { StatsBarList } from '@/components/blocks/stats-bar-list'

export default function StatsBarListDemo() {
  return (
    <div className="mx-auto max-w-6xl">
      <StatsBarList
        heading="Top acquisition channels"
        footnote="Attribution: first touch, trailing 12 months"
        rows={[
          {
            label: 'Product-led self-serve',
            value: '$1.24M',
            amount: 1240,
            note: 'Trial → paid, net of refunds',
          },
          {
            label: 'Partner marketplace',
            value: '$840K',
            amount: 840,
            note: 'AWS + Azure co-sell',
          },
          {
            label: 'Outbound enterprise',
            value: '$610K',
            amount: 610,
            note: 'AE-sourced, 90-day lag',
          },
          {
            label: 'Content & community',
            value: '$380K',
            amount: 380,
            note: 'Docs, webinars, Discord',
          },
          {
            label: 'Events & field',
            value: '$210K',
            amount: 210,
            note: 'Roadshows + summits',
          },
        ]}
      />
    </div>
  )
}

API reference

StatsBarList accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'Top acquisition channels'`	–
`rows`*	`StatsBarListRow[]`	–	3–6 rows in rank order
`footnote`	`string`	–	mono methodology line
`headingLevel`	`number`	`2`	heading element level

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface StatsBarListRow {
  label: string
  /** preformatted display string, e.g. '$1.2M', '38%' */
  value: string
  /** drives bar length; normalized to the largest row */
  amount: number
  /** small mono qualifier under the label */
  note?: string
}

Related components

Stats Band

Full-width hairline band of three to five counting stats, tabular numerals tick up once on view over mono micro-labels, separated by vertical hairline seams.

Stats Compare

Before-and-after metrics in two hairline columns, each row pairs the old number with the new one and settles a delta chip that quantifies the improvement.

Stats Activity Grid

Contribution-style React activity heatmap, a dependency-free Tailwind grid of cells stepped through primary opacities, with mono axis labels and an honest text summary.

Stats Composition Bar

Part-to-whole React stat band, one Tailwind-token stacked bar splits into hairline-seamed segments with a legend ledger of preformatted shares beneath it.

Live Board Stats

Instrument-panel grid of stat tiles, counting numerals over mono labels, with one tile carrying a tiny inline SVG sparkline drawn from deterministic prop data.

Stats Prose Inline

Editorial React stats paragraph, preformatted figures set inline in one flowing Tailwind sentence, with superscript footnote markers tied to a mono sources ledger.

Frequently asked questions

How do I install the Stats Bar List component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/stats-bar-list`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Stats Bar List require?

Stats Bar List uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Stats Bar List to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code