shadcn.io is not affiliated with official shadcn/ui
Plan Pills Footer Block for React
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 React with Base 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.
Related
- Pro
Upgrade Meter Footer
Plans and estimatesA slim footer for cloud storage with a plan band: the plan name, the space used and free, a thin meter, the share as a number and an Upgrade button, over a row of links and a legal band.
- Pro
Seat Stepper Footer
Plans and estimatesA footer for a team learning subscription with a seats stepper from 1 to 50, the monthly total worked out from it, a Renews on the 1st line and a Manage subscription button, beside two link groups.
- Pro
Call To Action Cell Footer
Calls to actionA footer for a workflow tool whose call to action is the last cell of the link grid: a brand and three link groups beside a card in a card with a small flow drawing, a title, one line and a Shine Button.
- Pro
Per-Seat Pricing by Seat Type
Seats and teamsSeat-type pricing with a stepper for each type: Full, Collaborator and Viewer seats at different prices, a stacked bar of the seat mix, a live monthly total and, on a phone, a sticky total bar.
- Pro
Centered Light Tier Selector CTA
Pickers and togglesA centred sponsorship call to action for an open-source project: a band of five amount cells on shared hairlines, a Shine Button that names the chosen monthly amount, a Custom cell that opens a number field in the same space, and a closing band that counts the sponsors.
- Pro
Localization Footer
PreferencesA footer for a payroll tool with a country Select and a currency Select beside a price sample that is reformatted as you choose.