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
409
Card Tabs
111
Financial Bento Grid
91
Chart Tooltip
75
Portfolio Showcase Grid
69
Marketing Hero Section
67
Sidebar with Search and Profile
56
Position Sonner
48
More in Pricing
View all
Pricing Section
614
Pricing Card
544
Pricing Section
184
Boxly Pricing-1
91
Pricing Cards
17
RuixenPricing05
105
Login Card
5
Glowing Pricing Tiers
66
