Pricing Table
Pricing tier cards
Overview
A compound component with a billing period toggle (Switch) and a responsive grid of PricingTable.Tier cards. The displayed price updates automatically when the billing toggle changes.
Usage
import { PricingTable } from "@leanicon/web-builder-library";Default (three tiers)
Three tier cards with a monthly/annual billing toggle. The "Pro" tier is highlighted as recommended.
- 5 projects
- 10 GB storage
- Priority support
- Custom domain
- Advanced analytics
- Unlimited projects
- 100 GB storage
- Priority support
- Custom domain
- Advanced analytics
- Unlimited projects
- 1 TB storage
- Priority support
- Custom domain
- Advanced analytics
Two tiers
- 3 projects
- 1 GB storage
- Community support
- Custom domain
- API access
- Unlimited projects
- 100 GB storage
- Priority support
- Custom domain
- API access
No highlighted tier
All tiers equal — no "Most popular" badge or ring.
Custom billing labels
Dollar prefix
Use currency="$" with currencyPosition="prefix" to render the symbol before the price.
Euro suffix
Use currency="€" with currencyPosition="suffix" to render the symbol after the price.
Dark mode
- 5 projects
- 10 GB storage
- Priority support
- Custom domain
- Advanced analytics
- Unlimited projects
- 100 GB storage
- Priority support
- Custom domain
- Advanced analytics
- Unlimited projects
- 1 TB storage
- Priority support
- Custom domain
- Advanced analytics
Two tiers — dark mode
- 3 projects
- 1 GB storage
- Community support
- Custom domain
- API access
- Unlimited projects
- 100 GB storage
- Priority support
- Custom domain
- API access
Sub-components
Sub-component | Description |
|---|---|
| Individual pricing tier card |
Props
PricingTable
Prop | Type | Default | Description |
|---|---|---|---|
|
| — |
|
|
|
| Toggle switch labels |
|
| — | Stagger animation for tier cards |
|
| — | Force light or dark mode |
|
| — | Additional CSS classes on root |
PricingTable.Tier
Prop | Type | Default | Description |
|---|---|---|---|
|
| — | Tier name (required) |
|
| — | Monthly price text (required) |
|
| — | Annual price text (required) |
|
| — | Tier description (required) |
|
| — | Feature list with included/excluded status |
|
| — | Call-to-action button (required) |
|
|
| Highlight with ring, shadow, and "Most popular" |
|
| — | Currency symbol (e.g. |
|
|
| Symbol before or after the price |
Feature
Field | Type | Description |
|---|---|---|
|
| Feature text |
|
| Check icon if true, X if false |
Notes
- The billing toggle uses a
Switchcomponent and stores state internally. - The highlighted tier gets
ring-2 ring-primary,shadow-lg,scale-105, and a "Most popular" badge. - Prices update automatically when the billing toggle changes.
- The grid is responsive: 1 column on mobile, 2 on tablet, 3 on desktop.
- Dark mode: pass
colorScheme="dark"or place inside a.darkancestor.