Pricing Block
A full pricing section where prices ROLL when you switch monthly/yearly.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Digit columns roll to the new price with a stagger, a −20% badge pops in, the featured plan gets a spinning gradient border, and features show included / not included.
Installation
$ npx shadcn@latest add https://guetix.com/r/pricing-block.json
Uses the shadcn CLI. It creates components/guetix/pricing-block.tsx and installs nothing else.
Usage
example.tsx
import { PricingBlock } from "@/components/guetix/pricing-block";
export default function Example() {
return <PricingBlock />;
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| plans | Plan[] | — | Plans with monthly/yearly prices and features. |
| currency | string | "$" | Symbol. |
| title / subtitle | string | — | Heading. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Billing period is a radiogroup; real prices in sr-only text.