Pricing Block

A flexible pricing table with monthly/yearly toggle, featured plan highlighting, animated price transitions, and fully customizable colors and labels.

Free

$0/ month

Billed $0 yearly

A curated set of production-ready animated icons
Unlimited personal projects & rapid prototypes
Core size, stroke, and color customization
Direct copy-paste for React & Next.js

Start for free

Monthly

$79/ month

Billed $948 yearly

The full animated icon & component library (100+)
Every animation state, trigger & interactive loop mode
Commercial rights for client & production work
Continuous library updates as new icons drop
Cancel anytime with zero friction or lock-in

Choose monthly

Lifetime

Best value

$99/ month

Billed $1,188 yearly

Lifetime access — zero recurring subscriptions
Unlimited commercial, client & team projects forever
All future icon packs & illustration sets included
Priority feature & icon request pipeline
Complete source code & vector asset downloads

Get lifetime access

Installation

1
Install the component:
npx shadcn@latest add https://ui.amines.fun/r/pricing-block.json

Usage:

jsx

app/page.jsx

1import PricingSection from "@/registry/blocks/PricingBlock";23export default function Page() {4  return (5    <PricingSection6      defaultInterval="yearly"7      showToggle8      currency="$"9      locale="en-US"10      animated11    />12  );13}

Props

Prop	Type	Default	Description
plans	Array<PricingPlan>	defaultPlans (3 plans: Free, Monthly, Lifetime)	Array of pricing plan objects. Each plan includes id, name, description, price (monthly/yearly), period, features (string or {text, bold}), badge, featured, colors, and cta ({label, href, variant, onClick}).
interval	"monthly" \| "yearly"	undefined (controlled externally)	Controlled billing interval. When provided, the component becomes controlled and onIntervalChange must handle updates.
defaultInterval	"monthly" \| "yearly"	"yearly"	Initial billing interval when interval is not controlled.
onIntervalChange	(interval: "monthly" \| "yearly") => void	undefined	Callback fired when the billing interval changes via the toggle.
onSelectPlan	(plan: PricingPlan, interval: "monthly" \| "yearly") => void	undefined	Callback fired when a plan CTA is clicked. Receives the plan and current interval.
showToggle	boolean	true	Show or hide the monthly/yearly billing toggle.
labels	Partial<PricingLabels>	DEFAULT_LABELS	Custom labels for ariaLabel, billingLabel, monthly, yearly, save, perMonth, billedYearly, billedMonthly.
currency	string	"$"	Currency symbol prefix for prices.
locale	string	"en-US"	Locale used for number formatting in prices.
colors	Partial<PricingColors>	defaultColors	Complete color customization object. Overrides any of the 30+ color tokens for text, backgrounds, borders, buttons, badges, checkmarks, focus rings, and more.
animated	boolean	true	Enable Framer Motion animations for price transitions, card entrance, and interactions.
linkComponent	React.ElementType	"a"	Component used for plan CTAs when they have an href. Defaults to anchor tag.
className	string	""	Additional class name applied to the root section.
style	React.CSSProperties	undefined	Inline styles applied to the root section.
classNames	Partial<Record<"toggle" \| "grid" \| "card" \| "cta", string>>	{}	Optional class names for the toggle, grid, card, and CTA elements.