# Pódio Plan cards side by side with a monthly and yearly switch, a featured plan and a full feature comparison. > Pódio is an exclusive THM Componentes component for pricing pages: plan cards with a monthly and yearly toggle, prices that count to the new value, a badge with the yearly savings, a featured plan, feature tooltips and a full comparison by category. In narrow spaces it becomes one column with an accordion. It suits SaaS and stores. - Category: Commerce and conversion - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/podio/ ## 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 ```text 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. ## Related components - [Balcão](https://vibecode.thmtecnologia.com/en/components/balcao/): A three-step payment screen with a Pix QR code, card installments and boleto, with the order summary alongside. - [Sacola](https://vibecode.thmtecnologia.com/en/components/sacola/): A cart that slides in from the side of the store, with coupons, shipping by postal code and a free shipping bar. - [Veredito](https://vibecode.thmtecnologia.com/en/components/veredito/): A customer reviews block with a star average, bars per rating, filters, sorting and a review form. - [Luar](https://vibecode.thmtecnologia.com/en/components/luar/): A card with a soft circular glow that follows the cursor and fades when the mouse leaves. - [Pavio](https://vibecode.thmtecnologia.com/en/components/pavio/): A card with a beam of light circling its border and a soft glow that follows the mouse inside. - [Fichário](https://vibecode.thmtecnologia.com/en/components/fichario/): Tabs where a rounded highlight slides to the chosen option, with the content in a stack of cards. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).