Pricing Table
A comparison table for displaying multiple pricing plans side by side with feature comparison.
Free
For individuals
Pro
For small teams
Enterprise
For large orgs
Installation
npx shadcn@latest add "https://billui.com/r/pricing-table.json"import { cva, type VariantProps } from "class-variance-authority";
import { Check, Minus, X } from "lucide-react";
import * as React from "react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
// ... component codeExamples
Compact (2 Plans)
Use 3 columns for a compact table with 2 plans.
Starter
Pro
Yearly Pricing
Use period="year" for annual billing with the elevated variant.
Basic
$6.58/mo billed yearly
Professional
$23.25/mo billed yearly
Business
$49.92/mo billed yearly
Expanded (4 Plans)
Use 5 columns for comparing more plans.
Free
Starter
Pro
Enterprise
One-time Pricing
Use period="once" for one-time purchase pricing.
Standard
One-time payment
Extended
Lifetime access
With Feature Sections
Group features using PricingTableFeatureLabel for better organization.
Hobby
Team
Enterprise
API Reference
PricingTable
The root container component.
| Prop | Type | Default |
|---|---|---|
variant | "default" | "elevated" | "default" |
aria-label | string | "Pricing comparison" |
PricingTableHeader
Container for plan headers. Must specify number of columns.
| Prop | Type | Default |
|---|---|---|
columns | 3 | 4 | 5 | 4 |
PricingTablePlan
Individual plan column header.
| Prop | Type | Default |
|---|---|---|
highlighted | boolean | false |
PricingTablePlanName
The plan name heading.
| Prop | Type | Default |
|---|---|---|
as | "h2" | "h3" | "h4" | "h3" |
PricingTablePrice
Displays the price with optional period indicator.
| Prop | Type | Default |
|---|---|---|
amount | number | — |
currency | string | "$" |
period | "month" | "year" | "once" | "month" |
PricingTableAction
CTA button for the plan.
| Prop | Type | Default |
|---|---|---|
variant | "default" | "outline" | "secondary" | "default" |
size | "default" | "sm" | "lg" | "default" |
PricingTableRow
A feature row. Must specify same number of columns as header.
| Prop | Type | Default |
|---|---|---|
columns | 3 | 4 | 5 | 4 |
PricingTableCell
Individual cell for feature values.
| Prop | Type | Default |
|---|---|---|
value | boolean | string | "partial" | — |
highlighted | boolean | false |
The value prop supports:
true— Shows a check icon (✓)false— Shows an X icon (✗)"partial"— Shows a minus icon (−) for partial supportstring— Shows the text value
PricingTableFeatureLabel
Section header for grouping features.
| Prop | Type | Default |
|---|---|---|
children | React.ReactNode | — |
PricingTableSpacer
Empty spacer cell for the header's first column (where feature names appear in rows).