Three tiers with billing switch
Three plan cards with a recommended plan and a monthly/yearly switch that updates every price.
CK-UI components
npm packages
npm install @radix-ui/react-slot @radix-ui/react-tabs class-variance-authority react-iconsAll blocks
Pricing blocks
Plan cards, a billing-period switch and a feature comparison table.
4 variants. Every block is one file built from CK-UI components and works in light and dark mode.
Free and Pro plans
Two plan cards side by side, with the recommended plan highlighted and feature lists.
Plan comparison table
A grouped feature comparison table with row and column headers that scrolls sideways on small screens.
CK-UI components
npm packages
npm install @radix-ui/react-slot class-variance-authority react-iconsSingle plan
One plan explained beside a price panel, with an included-features checklist.
CK-UI components
npm packages
npm install @radix-ui/react-slot class-variance-authority react-icons