How do I install Pricing With Icons?

Run npx shadcn@latest add @aceternity/pricing-with-icons 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 Icons 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 Icons 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 sections

1 / 7

Pricing With Icons

Three pricing cards with a colorful icon on each limit row, a Popular badge on the middle plan, and a short footnote under the grid.

Pricing

Ship a flag today. Add rules when the rollout gets serious.

Hobby

/ per month

Flags: 5
Environments: 2
Seats: 3
Targeting rules: 10
Eval history: 7 days

On this plan

Web and Node SDKs
Default-off failsafe
Public changelog
Community Slack

Create a flag

Team

Popular

$39

/ per month

Flags: 50
Environments: 5
Seats: 15
Targeting rules: 200
Eval history: 30 days

Everything in Hobby, plus

Percentage rollouts
Slack change approvals
Flag review trail

Start a rollout

Scale

Custom

Flags: Unlimited
Environments: Custom
Seats: Custom
Targeting rules: Custom
Eval history: Custom

Everything in Team, plus

SSO and SCIM
Audit export
Private cloud option

Talk to engineering

All plans includeSDKs,webhooks, andkill switches. Need a private cloud? Talk to us.

Three equal cards sit in a row: Hobby, Team, and Scale. Each limit is a row with a small color icon, the label on the left, and the value on the right. Team gets the Popular badge and the filled button.

A short footnote under the grid lists what every plan already includes.

More from Pricing sections

Included with All-Access

One payment unlocks the code for this block and every other block, template and page.

Get All-Access

Explore more

Pricing With Header and Icons Simple Pricing With Three Tiers Pricing Minimal Pricing sections

About this block

A short footnote under the grid lists what every plan already includes.