Animated pricing grid with sliding digit prices, yearly billing toggle, and featured plan corner accents.
Requires the shadcn button registry item. The install command adds react-use-measure for the sliding price digits.
Three-column grid with a monthly/yearly toggle. Prices animate through SlidingNumber (motion springs + react-use-measure). Featured plans get CornerPlus border decorations. Inspired by Efferd Pricing 7.
| Prop | Type | Default |
|---|---|---|
plansPlan objects with monthly/yearly prices, features, credits label, and featured flag. | Plan[] | DEFAULT_PLANS |
classNameClasses on the root container. | string | — |
Click on the icon in the top right of the example preview to view the source code for specific variants.
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
Everything you need to explore. No card required, no strings attached.
Built for makers shipping real products. Flexible, fast, and reliable.
For teams that need reliability at scale. Custom limits, dedicated support.
Need help deciding?
Contact our support team for personalized recommendations and guidance.
import { Pricing001 } from "@/components/ui/pricing-001"export default function Page() {
return <Pricing001 />
}