Skip to content
38

Pricing.

Pricing sections with three-tier cards and feature comparison tables, a highlighted plan and a call to action on every tier.

5 blocks, live at full size, install from here

01 / 05Billing toggle, 3 tiers, featured plan

Pricing 01

Three-tier card row with a monthly/yearly toggle that swaps each price and billing note, a featured middle plan, feature checklist and CTA.

npx shadcn@latest add https://hirael.com/r/pricing-01.json

02 / 05Comparison table, grouped rows, mobile plan picker

Pricing 02

Plan comparison table with grouped feature rows and a per-plan CTA in the header; on small screens a plan picker shows one plan column at a time.

npx shadcn@latest add https://hirael.com/r/pricing-02.json

03 / 05Billing toggle, animated price, featured plan

Pricing 03

Three-tier card row with a monthly/yearly billing toggle that tweens the price, a featured plan, per-plan icon, feature checklist and CTA.

npx shadcn@latest add https://hirael.com/r/pricing-03.json

04 / 05Billing toggle, featured glow, quota checklist

Pricing 04

Three-tier pricing row with a monthly/yearly toggle, an uppercase plan label, a large price with billing note, a tagline, a full-width CTA and a check-marked quota list; the featured tier gets a primary border, a top radial glow and a most-popular badge.

npx shadcn@latest add https://hirael.com/r/pricing-04.json

05 / 05Usage sliders, Live estimate, Yearly billing

Pricing 05

Usage pricing calculator with sliders for active users and build minutes, a priority support switch, and a live monthly estimate broken into line items with a volume tier note and monthly or yearly billing.

npx shadcn@latest add https://hirael.com/r/pricing-05.json