SaaS
Plan Card Slider
A responsive grid of Plan Cards on desktop with a mobile swipe carousel.
Overview
Plan Card Slider arranges multiple PlanCards in a responsive layout. On desktop, tiers sit side-by-side for direct comparison. On smaller breakpoints they collapse into a swipeable carousel with coverflow animation and navigation bullets.
Wrap the slider with a HighlightToggle so the user can flip every card between monthly and annual pricing at once.
Key Business & UX Benefits
- Side-by-side desktop layout makes plans easy to compare at a glance, which is the comparison pattern that closes the most deals on pricing pages.
- A swipeable mobile carousel keeps every plan reachable on small screens without truncating any tier, protecting conversion for the growing share of mobile sign-ups.
- One layout primitive handles two or six plans, so pricing experiments and new-tier launches don't need a re-skin of the grid.
- Pairing with
HighlightTogglefor monthly/annual switching keeps all cards in sync, so customers never see mixed pricing while they decide.
Pro-Tip from Larry: Put the
HighlightToggle above the slider, not inside it, so the control stays visible while the user pans through cards on mobile.Usage
LPlanCardSlider
Feature List
- Desktop layout pins three plans side by side; smaller breakpoints (xs through md) collapse into a Swiper with fractional slidesPerView
- Coverflow effect on touch breakpoints adds depth so the focused card stands out without hiding adjacent tiers
- Pagination bullets render at the bottom of the mobile carousel so shoppers always know where they are in the lineup
- Works directly with HighlightToggle through the shared isAnnualBilling localStorage key, so one toggle drives every card
- Pass any number of plans through the plans prop (PlanCardProps[]) to fit two-tier comparisons or six-tier ladders without changing the slider config
API Reference
| Prop | Default | Type |
|---|---|---|
plansrequired | PlanCardProps[] { title, price, annualPrice, 8 more } |