All components (204)
Pricing table
Commerce · PricingTable
What it is and when to use it
The comparison of plans or rates on a landing page: the plans in columns, with their price, their description and their button, and what each one includes in rows.
When to use it
- To choose among a few subscription or service plans.
featuredon the recommended plan: it carries the text "Recommended", in addition to the border.- In
perPlan,trueorfalsefor what is included or not (a tick or a cross appears) and a text for what is counted ("1 per year", "Unlimited"). - A price of zero is written with
freeText("Free" by default) and without a period.
When not to
- Data that is sorted, filtered or selected:
Table. - The features of a single product:
DataList.
Keyboard: the table sits in a box that is focused with Tab, so it can be scrolled when it does not fit; after that, Tab goes through the buttons of each plan.
Accessibility: it is a <table> with the plans as column headers and the features as row headers, so it can be traversed by hearing the plan, the feature and the value of each cell. The label names the box (a role="group") and is the table's <caption>. The ticks and crosses are decorative and carry "Included" or "Not included" next to them, hidden from view.
Context: it goes inside LocaleProvider (or AmsetProvider), which decides how prices are written.
Fine-tuning: CSS variables --amset-plans-*: -cell-padding, -font, -icon, -name, -plan-padding, -price, -radius, -stamp. The size changes the padding of the column and the cell, the price and the font sizes. They are declared on the outer box (.amset-plans__box), which is the one that rounds its corners: set on the inner table they would not reach it.
What it looks like
| EssentialFreeTo start selling | RecommendedProfessional€29/month | Company€79/monthMultiple stores | |
|---|---|---|---|
| Products in the catalog | 50 | Unlimited | Unlimited |
| Automatic invoices | Not included | Included | Included |
| Team members | 1 | 5 | No limit |
| Phone support | Not included | Not included | Included |
Pick a plan.
<PricingTable
label="Online store plans"
plans={planes.map((plan) => ({ ...plan, price: anual ? plan.price * 10 : plan.price, period: anual ? '/year' : '/month' }))}
features={caracteristicas}
freeText="Free"
/>Props
Import it with import { PricingTable } from '@amset/ui'. Required props are marked.
| Prop | Type | What it does |
|---|---|---|
featuresrequired | readonly PlanFeature[] | — |
plansrequired | readonly PricingPlan[] | — |
className | string | Merged with the library classes; it does not replace them. |
currency | string | — |
freeText | string | Text when the price is zero. |
label | string | Name of the comparison. It is what names the table. |
size | "sm" | "md" | "lg" | — |
It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.
In the test bench
Every state and variant, to try one at a time, on its page at ui.amset.tech: