Pricing Table
Plans side by side. Every plan lists every feature, including the ones it lacks — omitting them makes the columns uneven and quietly hides what you would give up.
src/components/ui/pricing-table.tsxAbout
From the component's own source, where it was written.
Plans side by side, with a feature matrix.
Every plan lists every feature — including the ones it does not have, shown as an explicit dash. Omitting them makes the columns different lengths and quietly hides what you would be giving up, which is the difference between a comparison and an advertisement.
The highlighted plan is marked with a border and a badge, never by being taller or wider. Scaling one column up is the standard trick and it makes the others hard to read.
Install
npx astralyx-ui add pricing-table
Usage
import { PricingTable } from '@/components/ui/pricing-table'
<PricingTable plans={plans} />Composer
Change the props and the source below follows.
Free
US$0/mo
For trying things out.
- Projects3 included
- Build minutes500 included
- Priority support not included
- SSO not included
Team
PopularUS$24/seat
For teams shipping weekly.
- ProjectsUnlimited included
- Build minutes10,000 included
- Priority support included
- SSO not included
Enterprise
US$99/seat
For everything else.
- ProjectsUnlimited included
- Build minutesUnlimited included
- Priority support included
- SSO included
<PricingTable plans={plans} responsive="md" />Examples
Plans
<PricingTable plans={plans} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
PricingTable
Plans side by side, with a feature matrix.
Extends Omit<ComponentProps<'div'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| plans | PricingPlan[] | required | { id, name, price, period?, currency?, description?, features, highlighted?, badge?, cta?, onSelect? }. |
| responsive | Responsive | 'md' | Breakpoint the columns appear at. |
| popularLabel | ReactNode | 'Popular' | Default badge on the highlighted plan. |
Types
PricingFeature
| Field | Type | Description |
|---|---|---|
| label | ReactNode | — |
| value | boolean | string | true/false for a tick or dash, or text for a limit. |
PricingPlan
| Field | Type | Description |
|---|---|---|
| id | string | — |
| name | string | — |
| price | number | — |
| period? | string | Appended after the price — "/mo", "per seat". |
| currency? | string | — |
| description? | ReactNode | — |
| features | PricingFeature[] | value of true/false gives a tick or a dash; a string states a limit. Either way the row is present in every column. |
| highlighted? | boolean | A border and a badge, never a size change — scaling one column up makes the others hard to read. |
| badge? | ReactNode | — |
| cta? | ReactNode | — |
| onSelect? | () => void | — |