A full feature matrix in its own scroller whose plan header sticks and compacts as you scroll. Columns light up under the pointer and an Only show differences switch folds away rows every plan shares.
npx shadcn@latest add https://hyperblur.dev/r/pricing-matrix-sticky.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pricing-matrix-sticky.tsx.
import { PricingMatrixSticky } from "@/components/hyperblur/pricing-matrix-sticky"
<PricingMatrixSticky maxHeight={480} defaultDiffOnly />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Compare every feature" | Section heading and table label. |
| subtitle | string | Paragraph under the heading. Empty hides it. | |
| plans | { name: string; price: number | null; note: string; cta: { label: string; href: string }; highlight?: boolean }[] | Free, Plus, Business, Enterprise | Column headers. A null price shows customLabel. |
| groups | { label: string; rows: { label: string; values: (boolean | string)[] }[] }[] | Workspace, Collaboration, Security, Support | Row groups. values line up with plans: true ticks, false dashes, a string shows as text. |
| currency | string | "USD" | ISO 4217 currency code passed to Intl.NumberFormat. |
| locale | string | "en-US" | Locale used to format every amount. |
| customLabel | string | "Custom" | Shown instead of a price when price is null. |
| maxHeight | number | 560 | Height of the scroller in pixels. |
| diffOnly | boolean | Controlled state of the differences switch. | |
| defaultDiffOnly | boolean | false | Initial state of the switch when uncontrolled. |
| onDiffOnlyChange | (value: boolean) => void | Called when the switch changes. | |
| diffLabel | string | "Only show differences" | Label next to the switch. |
| accent | string | "#2f7bff" | Highlighted column, ticks and switch color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variables. |