A dark comparison table with a sticky blurred header of plans and prices, collapsible feature groups, a monthly or yearly switch that flips the prices, and plan tabs on narrow containers.
Compare plans
All plans include unlimited viewers, real-time sync and a 99.9 percent uptime commitment.
npx shadcn@latest add https://hyperblur.dev/r/pricing-feature-table.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pricing-feature-table.tsx.
import { PricingFeatureTable } from "@/components/hyperblur/pricing-feature-table"
<PricingFeatureTable stickyTop={64} onBillingChange={(b) => console.log(b)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Compare plans" | Small label above the title. |
| title | string | "Every feature, side by side." | Section heading. |
| subtitle | string | "All plans include unlimited viewers..." | Supporting text. |
| plans | { name: string; monthly: number | null; yearly: number | null; note: string; cta: { label: string; href: string }; highlight?: boolean }[] | Hobby, Pro, Scale, Enterprise | Columns. A null price shows Custom. |
| groups | { name: string; rows: { feature: string; hint?: string; values: (boolean | string)[] }[] }[] | 4 groups, 15 rows | Feature groups. Each value is a check (true), a dash (false) or text. |
| billing | "monthly" | "yearly" | Controlled billing period. | |
| defaultBilling | "monthly" | "yearly" | "yearly" | Initial billing period when uncontrolled. |
| onBillingChange | (billing: "monthly" | "yearly") => void | Called when the switch changes. | |
| stickyTop | number | 0 | Offset in pixels for the sticky header, for pages with a fixed navbar. |
| currency | string | "$" | Currency symbol. |
| accent | string | "#2f7bff" | Color of the highlighted column, switch and checks. |
| className | string | Extra classes on the root element. | |
| style | React.CSSProperties | Inline styles merged onto the root element. |