A complete pricing table: a sliding monthly/yearly switch, prices that roll to their new digits and a featured plan with an orbiting light.
For larger companies.
£79 per month
Customize
Usage
import { PricingSection } from "@/components/motionkit/pricing-section";
<PricingSection
plans={[
{ name: "Starter", monthly: 0, yearly: 0, features: ["3 projects"], cta: { label: "Start free", href: "/signup" } },
{ name: "Pro", monthly: 24, yearly: 240, features: ["Unlimited projects", "Analytics"], cta: { label: "Get Pro", href: "/signup?plan=pro" }, featured: true, badge: "Popular" },
{ name: "Scale", monthly: 79, yearly: 790, features: ["SSO", "Audit logs"], cta: { label: "Talk to sales", href: "/contact" } },
]}
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Switch pill
Billing period changes
Digit roll
Billing period changes
Border light
Runs on its own
The pricing page of a SaaS product, an app or a course, or a pricing block on a landing page, anywhere monthly and yearly plans sit side by side.
The billing switch is a radio group whose highlight shares a Motion layoutId, so it slides between Monthly and Yearly. Every price is split into digits, each a window onto a 0 to 9 wheel that springs to its new value, with higher places turning a touch later. The saving badge is worked out from your prices. The featured plan sits inside a 1px gap with a slowly turning conic gradient behind it, so a light orbits its border.
| Prop | Type | Default | Description |
|---|---|---|---|
| plans | PricingPlan[] | — | Each plan's name, monthly and yearly price, features, button and whether it is featured. |
| currency | string | "£" | Symbol shown before every price. |
| defaultBilling | "monthly" | "yearly" | "monthly" | Which period is selected first. |
| accent | string | "#5FAEB4" | Colour of the switch, the featured border and the ticks. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Only the motion package, beside React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/pricing-section. It saves the file to components/motionkit and installs its dependencies.
Pricing Section is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, prices change instantly, cards don't rise in and the border light is a still outline.
Yes. Give each plan's cta an href to link to your checkout or sign-up page, or an onClick to start a checkout in code, as this site does with Stripe.
Launch Hero
A complete landing-page hero: a pointer-lit grid, a headline that rises word by word and a product window that tilts flat as you scroll.
Bento Grid
A feature grid in tiles of different sizes: they rise in turn, one border light follows the pointer across them all, and each tile's visual comes alive.
Testimonial Wall
Columns of testimonials drifting in opposite directions at different speeds, with soft faded edges. Hover to pause.
For larger companies.
£79 per month
Customize
Usage
import { PricingSection } from "@/components/motionkit/pricing-section";
<PricingSection
plans={[
{ name: "Starter", monthly: 0, yearly: 0, features: ["3 projects"], cta: { label: "Start free", href: "/signup" } },
{ name: "Pro", monthly: 24, yearly: 240, features: ["Unlimited projects", "Analytics"], cta: { label: "Get Pro", href: "/signup?plan=pro" }, featured: true, badge: "Popular" },
{ name: "Scale", monthly: 79, yearly: 790, features: ["SSO", "Audit logs"], cta: { label: "Talk to sales", href: "/contact" } },
]}
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Switch pill
Billing period changes
Digit roll
Billing period changes
Border light
Runs on its own
The live preview is free to explore. Plus unlocks the source for Pricing Section and every other premium component.