Five plans in a 3D cover flow you can swipe, drag, click or drive with arrow keys. A price rail below places every tier on a log scale and a ring glides to the active one while the backdrop takes its color.
Plans
Swipe, drag or use the arrow keys. Every plan starts with a 14-day trial and no card.
Agencies and small teams
npx shadcn@latest add https://hyperblur.dev/r/pricing-tier-carousel.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pricing-tier-carousel.tsx.
import { PricingTierCarousel } from "@/components/hyperblur/pricing-tier-carousel"
<PricingTierCarousel defaultIndex={1} onIndexChange={(i, tier) => console.log(tier.name)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Plans" | Small label above the title. Empty hides it. |
| title | string | "Find the plan that matches your reach" | Section heading. |
| subtitle | string | Paragraph under the heading. Empty hides it. | |
| tiers | { name: string; audience: string; price: number; unit: string; features: string[]; cta: { label: string; href: string }; color: string }[] | Solo, Creator, Team, Business, Network | Plans in order. Each color tints its card, the rail tick and the backdrop. |
| currency | string | "USD" | ISO 4217 currency code passed to Intl.NumberFormat. |
| locale | string | "en-US" | Locale used to format every amount. |
| index | number | Controlled active tier. Pair with onIndexChange. | |
| defaultIndex | number | 2 | Initial active tier when uncontrolled. |
| onIndexChange | (index: number, tier: PricingCarouselTier) => void | Called when the active tier changes. | |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variables. |