How do I install Pricing With Header and Icons?

Run npx shadcn@latest add @aceternity/pricing-with-header-and-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 Header and 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 Header and 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

2 / 7

Pricing With Header and Icons

Data-driven pricing section with three tiers, featured plan styling, checkmark icons, and full dark mode support. Plans are defined as a typed array for easy customization.

Pick a pricing that fits your needs

Every plan includes a free tier. Choose the one that fits your needs.

Hobby

For indie hackers trying out AI for the first time.

$199/Month

Hobby plan includes

120 projects per month

Unlimited workspaces

2 AI Model Choices

History & Export

Basic email support

1 member seat

Pro

For teams that need more power and flexibility.

$499/Month

Pro plan includes

Unlimited projects

Unlimited workspaces

All AI Models included

History & Export

Priority email support

10 member seats

Enterprise

For large organizations with custom needs.

690/Year

Enterprise plan includes

Everything in Pro

Custom integrations

Dedicated account manager

SSO & SAML

24/7 phone support

Unlimited member seats

A data-driven pricing component with three tiers displayed in a responsive grid. Each plan is defined in a typed Plan array, making it simple to update prices, descriptions, and feature lists.

The featured plan inverts the color scheme—dark background in light mode, light background in dark mode—to make it stand out. The CTA button on the featured plan uses a gradient style while other plans keep a subtle shadowed button.

Features are rendered as React nodes, giving you full control to add bold text or custom formatting within each feature item. Each feature displays with a checkmark icon using the Step component.

The horizontal dashed line separator between the button and features uses the GridLineHorizontal component, which adapts its colors based on the featured state and current theme.

All shadows respond to dark mode—light mode uses subtle black shadows while dark mode uses faint white shadows with border rings.

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 Minimal Pricing With Switch Pricing Page With Featured And Enterprise Pricing sections

About this block

A data-driven pricing component with three tiers displayed in a responsive grid. Each plan is defined in a typed Plan array, making it simple to update prices, descriptions, and feature lists.

Features are rendered as React nodes, giving you full control to add bold text or custom formatting within each feature item. Each feature displays with a checkmark icon using the Step component.

The horizontal dashed line separator between the button and features uses the GridLineHorizontal component, which adapts its colors based on the featured state and current theme.

All shadows respond to dark mode—light mode uses subtle black shadows while dark mode uses faint white shadows with border rings.