Tier cards with comparison toggle — pricing as a decision tool, not a wall of text.
Three tier cards across the page, a monthly/annual toggle above, and a feature-comparison table below. Designed to answer 'which plan is right for me?' in under 30 seconds, with progressive depth for the user who needs the full breakdown.
Each section pre-wired with the right CleenUI primitives. Swap, remove, or extend any of them — the template is a starting point, not a constraint.
Title, sub-copy, monthly/annual toggle.
Three cards, middle one featured with a 'Most popular' pill.
Feature-by-tier matrix for the user who wants the details.
6–10 questions answered inline.
All of these are in the catalog — the Builder skill imports them automatically. Each chip links to that component's page.
When the Builder skill scaffolds this template for you, these are the fields it asks about — or infers from your prompt.
Ask your AI agent to scaffold this template in your project — the Builder skill knows the Pricing layout and the components it uses.
Two paths to your first component. Pick the one that fits how your team builds.
One prompt to your AI tool. The Setup skill handles dependencies, design tokens, build config, and component registration — all without leaving your editor.
The classic flow. Install the package, import the styles, drop in your first component. No agents required — same end result.