Waiting
Customize and export code (opens in a new tab)Compare designs
Each model builds its own version. Pick your favorite and customize it.
Desktop preview
See how each design looks on a full-width desktop screen. Mobile preview
Check how each design adapts to a small phone screen.
See how each design looks on a full-width desktop screen. Mobile preview
Check how each design adapts to a small phone screen.
How to create best pricing components?
Provide the actual plan details. List plan names, prices, billing periods, and the features that distinguish them. Include any free tier, usage limits, or highlighted plan only when those details match your offer.
Make comparisons straightforward. Tell the AI which differences help customers choose and provide a clear action for each plan. Specify how optional monthly and annual pricing should be presented.
Check every price and limit. Compare the plans side by side and stacked on mobile. Verify labels, feature alignment, and billing explanations so the design does not obscure important differences.
Examples of pricing components
BoldUI
Dark Pricing Comparison with Three Plans and Highlighted Pro Tier
A dark-themed pricing section comparing three plans (Starter, Pro, Premium) in side-by-side cards, with the center Pro plan visually emphasized by a yellow call-to-action button and a circular 'Best Choice' badge. Each plan lists feature checkmarks and an 'Activate demo' action, with a heading and tab-style toggle above.
Flaro
Two-Tier Pricing Cards with Feature Checklists and Trial CTAs
A pricing section with a centered heading and two side-by-side plan cards, Standard and Pro, each listing feature checkmarks, a starting monthly price, and a 14-day free trial button. The cards sit over a split background of white above and solid indigo below.
Acros
Three-tier pricing section with monthly/yearly toggle and bestseller highlight
A pricing section with a serif heading and a Monthly/Yearly billing toggle above three plan columns (Starter, Pro, Premium) listing feature checkmarks and Get started buttons. The middle Pro plan is highlighted with a dark background and a Bestseller corner ribbon.
Flow
Pricing Plans with Feature Comparison Table
A dark-themed pricing section presenting three plan cards (Basic, Basic recommended, Enterprise) with price and Get started buttons, followed by a comparison table of support and energy supply benefits across the plans. The recommended plan is highlighted with a bright green card and a Recommended label.
Explore component generators
Generate any section of your website with the same multi-model workflow.
No categories match your search.
