Stats Composition Bar

Installation

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

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

Usage

tsx

import { StatsCompositionBar } from '@/components/blocks/stats-composition-bar'

Exampletsx

import { StatsCompositionBar } from '@/components/blocks/stats-composition-bar'

export default function StatsCompositionBarDemo() {
  return (
    <div className="mx-auto max-w-6xl">
      <StatsCompositionBar
        heading="Revenue by product line"
        footnote="FY26 recognized revenue, unaudited"
        segments={[
          {
            label: 'Platform seats',
            value: '$2.4M · 46%',
            share: 46,
          },
          {
            label: 'Usage overages',
            value: '$1.3M · 25%',
            share: 25,
          },
          {
            label: 'Professional services',
            value: '$890K · 17%',
            share: 17,
          },
          {
            label: 'Marketplace apps',
            value: '$420K · 8%',
            share: 8,
          },
          {
            label: 'Training & certs',
            value: '$210K · 4%',
            share: 4,
          },
        ]}
      />
    </div>
  )
}

API reference

StatsCompositionBar accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'Revenue by product line'`	–
`segments`*	`StatsCompositionBarSegment[]`	–	2–5 parts in descending 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 StatsCompositionBarSegment {
  label: string
  /** preformatted display, e.g. '$2.4M · 46%' */
  value: string
  /** percent width; normalized if sum ≠ 100 */
  share: number
}

Related components

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 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 Bar List

Ranked React stats ledger, each row pairs a mono index and preformatted value with a 2px Tailwind-token bar drawn to scale, the leading row carrying the accent.

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.

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 Composition Bar 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-composition-bar`. 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 Composition Bar require?

Stats Composition Bar 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 Composition Bar 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