About
A three-tier pricing section with a monthly/yearly billing toggle, animated price transitions, and a highlighted "most popular" plan card.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Pricing Plans with Billing Toggle to your project and fits it to your theme.
Code
How Pricing Plans with Billing Toggle is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import Pricing18 from "@/components/ui/block-pricing-18";
export default function Pricing18Demo() {
return <Pricing18 />;
}
Dependencies
More by uiable
View all
Feature Highlights Grid
388
Card Tabs
109
Financial Bento Grid
85
Chart Tooltip
72
Portfolio Showcase Grid
68
Marketing Hero Section
64
Sidebar with Search and Profile
54
Position Sonner
48
More in Pricing
View all
Pricing Section
606
pricing section
166
Pricing Section
180
Pricing Card
372
RuixenPricing05
103
Pricing Cards
17
Boxly Pricing-1
90
Colorful-Pricing
86
