A light paper layout with two large plan cards whose feature rows tick, dash or show a value side by side, and a dark enterprise strip underneath.
Plans
Start on Starter, move to Studio when your team grows. We prorate the difference to the day.
Everything one designer needs to ship polished sites.
Billed yearly or $15 month to month
Start with StarterFor teams that share systems, review together and own their brand.
Billed yearly or $39 month to month
Try Studio free for 14 daysCustom contracts, SAML SSO, EU or US data residency and a named success manager.
npx shadcn@latest add https://hyperblur.dev/r/pricing-compare-cards.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pricing-compare-cards.tsx.
import { PricingCompareCards } from "@/components/hyperblur/pricing-compare-cards"
<PricingCompareCards accent="#2f7bff" enterprise={null} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Plans" | Small label above the title. Empty hides it. |
| title | string | "Two plans. Pick the one that fits your team." | Section heading. |
| subtitle | string | Paragraph under the heading. | |
| features | string[] | 8 features | Row labels shared by every card. |
| plans | { name: string; description: string; price: string; period?: string; note?: string; values: (boolean | string)[]; cta: { label: string; href: string }; highlighted?: boolean; badge?: string }[] | Starter, Studio | Plan cards. values lines up with features: true ticks, false dashes, a string shows as text. |
| enterprise | { title: string; text: string; points: string[]; cta: { label: string; href: string } } | null | Enterprise strip | Strip under the cards. Pass null to hide it. |
| accent | string | "#ff5c39" | Highlight bar, badge and tick color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |