Add-on Builder Pricing

Installation

pnpm dlx shadcn@latest add @cleverui/pricing-addon-builder

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

Usage

tsx

import { PricingAddonBuilder } from '@/components/blocks/pricing-addon-builder'

Exampletsx

import { PricingAddonBuilder } from '@/components/blocks/pricing-addon-builder'

export default function PricingAddonBuilderDemo() {
  return (
    <PricingAddonBuilder
      eyebrow="Pricing"
      heading="Start with the platform. Add what you need."
      baseLabel="Platform"
      baseDescription="Unlimited projects, 5 seats, community support, and API access."
      basePrice={49}
      addons={[
        {
          id: 'sso',
          label: 'SSO & SCIM',
          description: 'SAML/OIDC single sign-on with directory provisioning.',
          price: 29,
        },
        {
          id: 'audit',
          label: 'Audit log export',
          description: '90-day activity trail with CSV and webhook delivery.',
          price: 19,
        },
        {
          id: 'priority',
          label: 'Priority support',
          description: '4-hour response window and a named success engineer.',
          price: 49,
        },
        {
          id: 'regions',
          label: 'Extra data regions',
          description: 'Pin workspaces to EU or APAC residency zones.',
          price: 24,
        },
      ]}
      currency="$"
      billingNote="per month, billed monthly"
      cta={{ label: 'Continue with this plan', href: '#' }}
    />
  )
}

API reference

PricingAddonBuilder accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	`'Pricing'`	–
`heading`	`string`	`'Start with the platform. Add what you need.'`	–
`baseLabel`	`string`	`'Platform'`	–
`baseDescription`	`string`	–	–
`basePrice`*	`number`	–	integer monthly amount for the base plan
`addons`*	`PricingAddon[]`	–	–
`currency`	`string`	`'$'`	–
`billingNote`	`string`	`'per month, billed monthly'`	–
`cta`	`{ label: string; href: string }`	–	–

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

Referenced types

Typestsx

export interface PricingAddon {
  id: string
  label: string
  description?: string
  /** integer monthly amount, whole units only */
  price: number
  /** only preselected when explicitly true */
  defaultChecked?: boolean
}

Related components

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.

Trial Timeline Pricing

Honest trial pricing for React, a dated timeline of what actually happens: full access today, a reminder email before any charge, then the real price on a Tailwind hairline rail.

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.

Frequently asked questions

How do I install the Add-on Builder 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-addon-builder`. 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 Add-on Builder Pricing require?

Add-on Builder 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 Add-on Builder 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