A minimal one-plan page with an oversized price, a slowly turning guarantee seal and a shining call to action. Every included feature ticks itself on in sequence when the section scrolls into view.
One plan
Build and host as many sites as you like. One flat price per workspace, the whole team included.
npx shadcn@latest add https://hyperblur.dev/r/pricing-single-plan.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pricing-single-plan.tsx.
import { PricingSinglePlan } from "@/components/hyperblur/pricing-single-plan"
<PricingSinglePlan price={19} yearlyPrice={190} planName="Studio" />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "One plan" | Mono label above the title. Empty hides it. |
| title | string | "Everything included. No tiers to compare." | Section heading. |
| subtitle | string | Paragraph under the heading. Empty hides it. | |
| planName | string | "Workspace" | Pill above the price. |
| price | number | 24 | Monthly price. |
| yearlyPrice | number | 240 | Yearly price. The saving against twelve months is shown. 0 hides the line. |
| period | string | "per workspace / month" | Text under the price. |
| features | string[] | 9 features | Included features, ticked in sequence. |
| stats | { value: string; label: string }[] | 3 stats | Trust row at the bottom. Empty array hides it. |
| sealText | string | "30-day money-back guarantee · cancel anytime · " | Text around the rotating seal. Empty hides the seal. |
| currency | string | "USD" | ISO 4217 currency code passed to Intl.NumberFormat. |
| locale | string | "en-US" | Locale used to format every amount. |
| cta | { label: string; href: string } | { label: "Start your workspace", href: "#" } | Primary button. |
| secondary | { label: string; href: string } | null | { label: "See what is included", href: "#" } | Text link next to the button. null hides it. |
| accent | string | "#7fb3ff" | Seal mark, checks and glow color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variables. |