Plan cards side by side that list the same feature rows, so checks, dashes and values line up across tiers. The recommended plan gets a rotating beam border and a badge, and hovering a row highlights it in every card.
Every plan includes unlimited viewers, global CDN hosting and SSL. Upgrade or downgrade any time.
For side projects and trying things out with one collaborator.
Start for freeFor product teams shipping every week across several sites.
Try Studio for 14 daysFor companies that need controls, compliance and a named contact.
Talk to salesPrices in USD, billed annually. Need more than 50 editors? Get a custom quote
npx shadcn@latest add https://hyperblur.dev/r/comparison-tiers.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/comparison-tiers.tsx.
import { ComparisonTiers } from "@/components/hyperblur/comparison-tiers"
<ComparisonTiers highlight={1} accent="#8b5cf6" />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Compare plans" | Small pill above the title. |
| title | string | "Pick the plan that fits how you ship" | Section heading. |
| subtitle | string | Short line about what every plan includes | Supporting paragraph under the heading. |
| rows | string[] | Projects, Editors per project, Version history, Custom domains, Branch previews, Audit log, SSO and SCIM | Feature names shared by every tier, in display order. |
| tiers | ComparisonTiersTier[] | Starter, Studio, Scale | Each tier has name, price, period, blurb, cta { label, href }, an optional badge and values: one entry per row, true for a check, false for a dash or a string shown as a value. |
| highlight | number | 1 | Index of the recommended tier that gets the beam border, badge and solid button. |
| onTierSelect | (index: number, tier: ComparisonTiersTier) => void | Called when a tier button is clicked. | |
| accent | string | "#8b5cf6" | Color of the beam border, badge, checks and focus rings. |