Ledger Quote Pricing

Installation

pnpm dlx shadcn@latest add @cleverui/pricing-ledger-quote

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

Usage

tsx

import { PricingLedgerQuote } from '@/components/blocks/pricing-ledger-quote'

Exampletsx

import { PricingLedgerQuote } from '@/components/blocks/pricing-ledger-quote'

export default function PricingLedgerQuoteDemo() {
  return (
    <PricingLedgerQuote
      reference="QT-2041"
      heading="Website rebuild, Fitzroy Cellars"
      preparedFor="Prepared for Fitzroy Cellars Pty Ltd"
      items={[
        {
          item: 'Discovery & information architecture',
          detail: 'Stakeholder workshops, sitemap, content inventory',
          qty: '1',
          price: '$4,800',
        },
        {
          item: 'Visual system & design',
          detail: 'Brand-aligned UI kit, key templates, component library',
          qty: '1',
          price: '$9,200',
        },
        {
          item: 'Front-end build',
          detail: 'Next.js, CMS wiring, accessibility pass, performance budget',
          qty: '1',
          price: '$14,600',
        },
        {
          item: 'Product photography art direction',
          detail: 'Half-day shoot brief and on-set direction',
          qty: '1 day',
          price: '$1,850',
        },
        {
          item: 'Launch support',
          detail: 'Staging QA, redirects, analytics handoff, 14-day hypercare',
          qty: '1',
          price: '$2,400',
        },
      ]}
      subtotal="$32,850"
      tax="$3,285"
      taxLabel="GST 10%"
      total="$36,135"
      validUntil="Valid until 30 September 2026"
      cta={{ label: 'Accept quote', href: '#' }}
    />
  )
}

API reference

PricingLedgerQuote accepts the following props.

Prop	Type	Default	Description
`reference`	`string`	`'QT-2041'`	document number set in the mono header row
`heading`	`string`	`'Website rebuild, Fitzroy Cellars'`	–
`preparedFor`	`string`	–	–
`items`*	`PricingLedgerItem[]`	–	–
`subtotal`*	`string`	–	preformatted subtotal figure
`tax`*	`string`	–	preformatted tax figure
`taxLabel`	`string`	`'GST 10%'`	–
`total`*	`string`	–	preformatted total figure, the document's landing point
`validUntil`	`string`	`'Valid until 30 September 2026'`	–
`cta`	`{ label: string; href: string }`	–	optional accept action beneath the document

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

Referenced types

Typestsx

export interface PricingLedgerItem {
  item: string
  detail?: string
  qty?: string
  /** preformatted, e.g. '$4,800' */
  price: string
}

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.

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.

Glow Pricing Tiers

Three quiet tiers with one accent moment, the featured plan carries a primary hairline and soft glow. Billing toggle with sprung thumb; prices crossfade on flip.

Frequently asked questions

How do I install the Ledger Quote Pricing 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-ledger-quote`. 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 Ledger Quote Pricing require?

Ledger Quote Pricing 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 Ledger Quote Pricing 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