How do I install Pricing With Switch And Add On?

Run npx shadcn@latest add @aceternity/pricing-with-switch-and-add-on in your terminal. Before installing, add the Aceternity Pro registry to your components.json and set your API token as the ACETERNITY_PRO_TOKEN environment variable. The CLI automatically installs all required dependencies including Tailwind CSS plugins and Framer Motion.

Is Pricing With Switch And Add On responsive and accessible?

Yes. The component is fully responsive across mobile, tablet, and desktop breakpoints. It uses semantic HTML elements, proper heading hierarchy, and accessible color contrast ratios. Touch targets are appropriately sized for mobile interactions, and all interactive elements are keyboard-navigable.

Can I customize the colors, fonts, and layout?

Everything is built with Tailwind CSS utility classes and Framer Motion animations. You can change colors, spacing, typography, border radius, shadows, and animation timing directly in the JSX — no separate CSS files to manage. The component uses your project's Tailwind theme, so it automatically adapts to your design system.

What frameworks does this work with?

Pricing With Switch And Add On is built for React and Next.js (App Router and Pages Router). It requires Tailwind CSS v4 and Framer Motion. It works with any React-based framework including Remix, Gatsby, and Vite — just ensure Tailwind CSS and Framer Motion are configured in your project.

Pricing With Switch And Add On

Choose the plan that suits your needs

Pick a plan that suits your needs and get started instantly.

Hobby

$4/mo

Best for occasional listeners

Stream music on 1 device
Access to basic music library
Standard audio quality
Ad-supported listening
Create and share playlists

Professional

$8/mo

Best for regular listeners

Stream music on up to 3 devices simultaneously
Access to premium music library
High-definition audio quality
Ad-free listening experience
Download music for offline listening
Create and share unlimited playlists
Access to exclusive content and early releases

Enterprise

Best for big artists

Stream music on unlimited devices
Access to entire music library
Ultra high-definition audio quality
Ad-free listening experience
Download unlimited music for offline listening
Create and share unlimited playlists
Access to exclusive content and early releases
Priority customer support

Buy for your team of 10 people and get pro upgrade absolutely free.

"This is the best product ever when it comes to shipping. Ten on ten recommended. I just can't wait to see what happens with this product."

Michael Scarn

Side projects builder

A monthly/yearly toggle sits at the top using Framer Motion's layoutId for smooth pill animations between states. When switching, prices animate with a slide-in effect and staggered delays per tier.

The layout displays three pricing tiers in a grid. The featured tier (Growth) has elevated styling with shadow and white background, while others use transparent backgrounds. Corner icons with plus symbols add decorative detail.

Each tier shows name, description, price, feature list with checkmarks, and a CTA button. The featured plan's button uses a gradient background for emphasis. An add-on section below offers additional services with help icons.

Works well for SaaS products, subscription services, or any business with tiered pricing and optional add-ons.

Explore more

Pricing With Switch Simple Pricing With Three Tiers Pricing Page With Featured And Enterprise Pricing sections Feature Sections

Part of Pricing sections · All blocks

Build websites faster and 10x better than your competitors with
Aceternity UI Pro

Next.js 15, Tailwind CSS v4 and Motion for react powered templates

100+ templates and blocks combined

Ready to copy paste component blocks, save days of development time

Get lifetime access