One spinning gradient frame glides between plan cards as you hover or tab, then springs back to the selected plan. The best value plan wears a corner ribbon with a passing shine and the cards work as a radio group.
Pricing
Hover to compare, click to choose. All plans include bank-grade encryption and free migration from your old tool.
Bookkeeping for freelancers and sole traders.
Payroll and reporting for teams up to 25.
Multi-entity books with approvals and audit trail.
npx shadcn@latest add https://hyperblur.dev/r/pricing-ribbon-highlight.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pricing-ribbon-highlight.tsx.
import { PricingRibbonHighlight } from "@/components/hyperblur/pricing-ribbon-highlight"
<PricingRibbonHighlight accent="#10b981" accentTo="#2f7bff" onSelect={(i) => console.log(i)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Pricing" | Mono label above the title. Empty hides it. |
| title | string | "Books that close themselves every month" | Section heading. |
| subtitle | string | Paragraph under the heading. Empty hides it. | |
| tiers | { name: string; summary: string; price: number; period: string; features: string[]; cta: { label: string; href: string }; ribbon?: string }[] | Essentials, Growth, Premium | Plans. A ribbon string adds the corner ribbon to that card. |
| currency | string | "USD" | ISO 4217 currency code passed to Intl.NumberFormat. |
| locale | string | "en-US" | Locale used to format every amount. |
| selected | number | Controlled selected tier. Pair with onSelect. | |
| defaultSelected | number | Initial selected tier when uncontrolled. Defaults to the ribbon tier. | |
| onSelect | (index: number, tier: PricingRibbonTier) => void | Called when a card is chosen by click or arrow keys. | |
| accent | string | "#2f7bff" | First stop of the frame, ribbon and button gradient. |
| accentTo | string | "#a78bfa" | Second stop of the gradient. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variables. |