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
339
Card Tabs
100
Financial Bento Grid
70
Chart Tooltip
67
Marketing Hero Section
58
Portfolio Showcase Grid
57
Sidebar with Search and Profile
50
Position Sonner
48
More in Pricing
View all
Pricing Section
578
Pricing Section
173
Pricing Card
364
Single Pricing Card
794
Pricing Cards
86
Glowing Pricing Tiers
41
pricing section
157
Colorful-Pricing
84
