What it looks like
Three white cards sit side by side, with a monthly and yearly switch centered above; the yearly option carries a green badge with the discount. The featured plan has a colored border, a soft shadow and a ribbon on top. Each card shows a name, a description, a large monthly price and, on yearly billing, the amount charged per year and the savings in green. When you switch periods, the numbers run to their new values. Features get green check marks, and some have a question mark that opens a dark tooltip. Below, a button opens the full comparison, grouped into categories that expand and collapse.
You may be looking for this if you asked for something like
- a pricing table with a monthly and yearly toggle
- a SaaS pricing page with the most popular plan highlighted
- show how much people save by paying yearly
- compare the features of each plan in a table
- pricing cards that look good on mobile
- a subscription section with three plans side by side
- prices that animate when I switch to yearly
- make my pricing page look like a professional SaaS
Also known as
- pricing table
- pricing cards
- pricing tiers
- plan comparison
- monthly yearly toggle
- subscription plans
- feature comparison table
When to use
- SaaS pricing pages with monthly and yearly billing
- Business proposals that present service packages
- Stores and subscriptions that want to highlight the most chosen plan
- Pages where customers compare features before deciding
When to avoid
- More or fewer than three plans without adjusting the layout, which is built in three columns
- Other currencies or English labels as is, since prices are formatted in Brazilian reais and texts are in Portuguese
How to ask your AI
Build a pricing table for my plans page with three cards, a monthly and yearly toggle with a savings badge, a featured plan, accessible feature tooltips, a full comparison by category, a single-column layout on phones and my brand colors.
With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising.
Questions about Pódio
How do I add my own plans and prices to Pódio?
Pass the planos prop with name, description, monthly price, yearly total, features with optional tooltips, button text and which plan is featured, plus the comparacao prop with categories and value rows. Pódio works out the yearly savings by itself. Without these props it shows sample plans, and the demo badge at the top should be removed in the final version.
How do I know which plan someone picked in Pódio?
Each plan button in Pódio emits a select event with the plan id, the chosen period and the equivalent monthly price, ready to send people to checkout. The period works with v-model:periodo, so you can sync the monthly and yearly switch with the URL or another part of the page.
Does Pódio work on phones?
Yes. When its space drops below 680 pixels, Pódio stacks the cards in one column and the full comparison turns into an accordion where each feature lists the value for every plan. Tooltips open on hover or keyboard focus, and with reduced motion the prices change without animation.
