Plan Rows Pricing

Installation

pnpm dlx shadcn@latest add @cleverui/pricing-plan-rows

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

Usage

tsx

import { PricingPlanRows } from '@/components/blocks/pricing-plan-rows'

Exampletsx

import { PricingPlanRows } from '@/components/blocks/pricing-plan-rows'

export default function PricingPlanRowsDemo() {
  return (
    <PricingPlanRows
      eyebrow="Pricing"
      heading="Plans priced like a rate sheet"
      blurb="Fieldnote is a shared research notebook for product teams. Pick the lane that matches how you ship, upgrade when the work outgrows it."
      plans={[
        {
          name: 'Studio',
          pitch: 'For a single squad shipping weekly.',
          features: [
            '5 seats',
            'Unlimited notes',
            'Insight tags',
            'Figma sync',
            'Email support',
          ],
          price: '$49',
          period: '/month',
          cta: { label: 'Start Studio', href: '#' },
        },
        {
          name: 'Fleet',
          pitch: 'For multi-squad orgs with a research ops lead.',
          features: [
            '25 seats',
            'Shared libraries',
            'Interview rooms',
            'SSO',
            'Audit log',
            'Priority support',
          ],
          price: '$149',
          period: '/month',
          featured: true,
          note: 'Everything in Studio, plus org-wide controls.',
          cta: { label: 'Start Fleet', href: '#' },
        },
        {
          name: 'Atlas',
          pitch: 'For regulated teams that need residency and review.',
          features: [
            'Unlimited seats',
            'EU & US data regions',
            'Custom retention',
            'SCIM',
            'Dedicated CSM',
            'SLA 99.9%',
          ],
          price: '$399',
          period: '/month',
          note: 'Everything in Fleet, plus compliance tooling.',
          cta: { label: 'Talk to sales', href: '#' },
        },
      ]}
      footnote="Prices in USD, excluding tax. Annual billing saves two months."
    />
  )
}

API reference

PricingPlanRows accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	`'Pricing'`	–
`heading`	`string`	`'Plans priced like a rate sheet'`	–
`blurb`	`string`	–	–
`plans`*	`PricingPlanRow[]`	–	–
`footnote`	`string`	–	–

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

Referenced types

Typestsx

export interface PricingPlanRow {
  name: string
  pitch: string
  features: string[]
  /** preformatted, e.g. '$49' */
  price: string
  period?: string
  cta: { label: string; href: string }
  /** at most one featured plan, keyline + filled CTA */
  featured?: boolean
  /** quiet per-plan line, e.g. 'Everything in Studio, plus…' */
  note?: 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.

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.

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 Plan Rows 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-plan-rows`. 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 Plan Rows Pricing require?

Plan Rows Pricing uses motion and lucide-react on top of React and Tailwind CSS. You don't need to install them manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Plan Rows 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