shadcn.io is not affiliated with official shadcn/ui
Plan Pills Footer Block for Vue
A footer for an invoicing tool with three plan pills, Free, Pro and Team, that show the chosen plan's price and three inclusions beside a Compare plans link, over two link groups and a legal band.
Installation
Overview
A footer for Vue with Ark UI that keeps pricing one tap away. The first band says "Start free, upgrade anytime" over three plan pills in a segmented group (Free, Pro and Team); beside it a card shows the plan you pick: its name, its price in one left-to-right span ($19/mo), who it is for and three inclusions, with a "Compare plans" link under them. All three plans are laid out in one grid cell, so picking one never moves the footer, and a polite status says which plan is showing. Under the teaser, a band holds the wordmark with one sentence and two link groups in a nav labelled Footer, and a legal band closes the page. On a phone the pills fill the width as a row of three and the bands stack.
FAQ
How do I change the plans?
Edit PLANS at the top of the file: each has an id, a name, a price in dollars a month, a short note and three inclusions. The price is written by one function, priceOf, so every place that shows it agrees. Two or four plans work too; the segmented group sizes itself.
How do I operate the pills with a keyboard?
The pills are a group of radio buttons: Tab moves into the group, the arrow keys choose a plan, and the card changes as you go. The choice is announced through a polite status ("Pro plan: $19/mo").
Why doesn't the footer jump when I choose a plan?
Every plan's card content is drawn in the same grid cell; the ones not showing are invisible and hidden from assistive technology, so the cell is always as tall as the tallest plan. Keep all plans' inclusions to a similar length so no plan leaves a gap.
What does Compare plans link to?
It is a plain link with an arrow that turns around in right-to-left layouts. Point it at your pricing page; nothing in the footer starts a purchase.