Pricing table

Pro

Plans side by side for a pricing page: monthly and yearly, one highlighted plan, features as plain lines, and an optional comparison table below. Prices and buttons line up across plans.

npx prodular-ui add pricing-table

Part of Prodular UI Pro. Preview and read the docs freely, install with a license. See pricing

Two tiers and a comparison

Switch to Monthly to see prices change.

2 months free

Starter

For small teams sending their first invoices.

$16per seat a month, billed yearly

100 invoices a month
Card and ACH payments

Growth

Most popular

For finance teams running collections every day.

$32per seat a month, billed yearly

Everything in Starter, plus

Approval workflows
Relay Analyst

Compare plans
Compare plans	Starter	Growth
Collections
Automatic reminders	Included	Included
Approval workflows	Not included	Included
Invoices a month	100	2,500

import { Button } from "@/components/ui/button"import { PricingTable } from "@/components/ui/pricing-table"
export default function PricingTableTiers() {  return (    <PricingTable      className="w-full"      yearlyNote="2 months free"      tiers={[        { id: "starter", name: "Starter", description: "For small teams sending their first invoices.", price: { monthly: 19, yearly: 16 }, unit: "per seat a month", action: <Button variant="outline">Start free trial</Button>, features: ["100 invoices a month", "Card and ACH payments"] },        { id: "growth", name: "Growth", description: "For finance teams running collections every day.", price: { monthly: 39, yearly: 32 }, unit: "per seat a month", highlight: "Most popular", action: <Button>Start free trial</Button>, featuresIntro: "Everything in Starter, plus", features: ["Approval workflows", "Relay Analyst"] },      ]}      compare={[{ group: "Collections", rows: [{ label: "Automatic reminders", values: { starter: true, growth: true } }, { label: "Approval workflows", values: { starter: false, growth: true } }, { label: "Invoices a month", values: { starter: "100", growth: "2,500" } }] }]}    />  )}

Anatomy

<PricingTable tiers={tiers} compare={compare} yearlyNote="2 months free" />

Guidance

Use it when

Pricing pages and the pricing section of a landing page.
compare for the full table under the cards.

Avoid

Changing a subscription in the app. Use Plan picker.
More than four tiers.

Rules for AI agents

Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.

Pass tiers with price.monthly and price.yearly as numbers, or a string like Custom.
action is your own Button or link; keep the highlighted tier's button solid and the others outline.
Keep descriptions to about two lines; the table reserves two lines so prices align.

API

PricingTable

Prop	Type	Default	Description
tiers	PricingTier[]		{ id, name, description, price, unit?, action, highlight?, featuresIntro?, features }.
compare	{ group, rows }[]		The comparison table.
defaultPeriod / yearlyNote / currency	string	"yearly" / "" / "USD"	Period and formatting.

Installation

The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.

npx prodular-ui add pricing-table# or, with the registry in components.jsonnpx shadcn@latest add @prodular/pricing-table