Transparent Pricing Breakdown

Installation

pnpm dlx shadcn@latest add @cleverui/pricing-transparent-breakdown

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

Usage

tsx

import { PricingTransparentBreakdown } from '@/components/blocks/pricing-transparent-breakdown'

Exampletsx

import { PricingTransparentBreakdown } from '@/components/blocks/pricing-transparent-breakdown'

export default function PricingTransparentBreakdownDemo() {
  return (
    <PricingTransparentBreakdown
      eyebrow="Transparent pricing"
      heading="Where your subscription goes"
      blurb="We publish our cost structure so the price never has to argue for itself. Every dollar of a Meridian seat maps to real work."
      price="$29"
      period="/month"
      segments={[
        {
          label: 'Engineering & product',
          amount: '$12.40',
          percent: 43,
          note: 'Core app, infrastructure, and continuous delivery.',
          highlighted: true,
        },
        {
          label: 'Customer success',
          amount: '$5.80',
          percent: 20,
          note: 'Onboarding, support coverage, and docs.',
        },
        {
          label: 'Cloud & tooling',
          amount: '$4.90',
          percent: 17,
          note: 'Hosting, observability, and third-party APIs.',
        },
        {
          label: 'Operations',
          amount: '$3.50',
          percent: 12,
          note: 'Finance, legal, and workspace administration.',
        },
        {
          label: 'Margin reinvested',
          amount: '$2.40',
          percent: 8,
          note: 'Roadmap bets and buffer for outages.',
        },
      ]}
      footnote="Figures from our FY25 cost review, shown to the nearest ten cents."
    />
  )
}

API reference

PricingTransparentBreakdown accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	`'Transparent pricing'`	–
`heading`	`string`	`'Where your subscription goes'`	–
`blurb`	`string`	–	–
`price`*	`string`	–	preformatted plan figure, e.g. '$29'
`period`	`string`	`'/month'`	–
`segments`*	`PricingBreakdownSegment[]`	–	–
`footnote`	`string`	`'Figures from our FY25 cost review, shown to the nearest ten cents.'`	–

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

Referenced types

Typestsx

export interface PricingBreakdownSegment {
  label: string
  /** preformatted, e.g. '$9.20' */
  amount: string
  /** integer percent for bar width and display */
  percent: number
  note?: string
  /** at most one, primary tint on the bar */
  highlighted?: boolean
}

Related components

Add-on Builder Pricing

Configurable React pricing, a base plan plus real checkbox add-ons, an itemized ledger that re-rules itself as items land, and a rolling tabular total. No dark patterns.

Pricing Compare Matrix

Feature-by-plan pricing matrix on real table semantics, a sticky plan header row with prices and CTAs, check, dash and mono cell values, and a single keyline marking the featured plan column.

Ledger Quote Pricing

Agency pricing set as a quote document, ruled line items with tabular mono prices, subtotal, GST and total ledger rows, and a mono valid-until note. Pricing as paperwork, not cards.

Plan Rows Pricing

SaaS pricing as a ruled rate sheet in React and Tailwind, one hairline row per plan with inline feature inventory, mono tabular prices, and a keyline on the featured plan.

Single Plan Pricing

One-plan pricing stated with confidence, the price set as the hero figure, included features in two ruled columns, and quiet FAQ links. For products with one honest price and nothing to upsell.

Usage Pricing Slider

Usage-based pricing with an honest slider, an arrow-key accessible role=slider sets seats or volume, the price recalculates with rolling digits, and breakpoints are labelled in mono under the track.

Frequently asked questions

How do I install the Transparent Pricing Breakdown component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/pricing-transparent-breakdown`. 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 Transparent Pricing Breakdown require?

Transparent Pricing Breakdown 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 Transparent Pricing Breakdown 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