Comparison Table

Plan comparison table with features as rows and plans as columns, showing check or dash icons for booleans and text for values. Scrolls on mobile.

src/registry/ui/comparison-table.tsx/r/comparison-table.json

Installation#

bash

npx shadcn@latest add @minidev/comparison-table

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/comparison-table.json

Usage#

tsx

import { ComparisonTable } from "@/components/ui/comparison-table"

export function Example() {
  return <ComparisonTable />
}

API reference#

ComparisonTable props
Prop	Type	Default
`features`	`string[]`	`SAMPLE_FEATURES`
`plans`	`Plan[]`	`SAMPLE_PLANS`
`className`	`string`	`-`

Dependencies#

npm

lucide-react

Built from

No other MiniDev files

Add Card FormCompact payment form for card number, expiry and CVC with correct autocomplete hints, numeric input mode and a full width save button. Ready for your processor.Billing AddressTailwind billing address fieldset with a multiline street field and a responsive row for city, state and postal code. Drops into checkout forms.Cancel FlowTwo step subscription cancellation flow: ask for a reason with radio options, then confirm with a destructive button or go back. Tells users what they keep.Credit BalanceCompact credit balance pill with a small label and a large tabular figure. Shows remaining credits or usage balance for AI and pay-as-you-go apps.Downgrade WarningTailwind plan downgrade warning card with an amber border, a summary of what gets locked on the free plan, and Keep plan or Downgrade buttons.Invoice DetailAn invoice card with the number, date, a paid, open or void status badge, itemized line amounts and a bold total row. Built with React for billing pages.

All pricing and billing components

Learn more

Build a SaaS pricing page in React and TailwindGuide All pricing sections10 blocks