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. |
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.
New · Version 2 is here
Animated sections you paste in, tweak and ship. No package, no lock-in.
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.
Every number updates the moment it changes.
Questions in, answers out, with sources.
One API across web, mobile and the edge.
Encrypted at rest and in transit, always.
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.
“We rebuilt our landing page in an afternoon. Conversions went up 23% the following week.”
“Accessibility reports on every component saved our audit weeks of back and forth.”
“Clients notice the polish immediately. It's become part of how we pitch.”
“The motion feels considered, not gimmicky. Our designers stopped asking for custom animations.”
“It's the first UI kit where reduced motion was clearly thought about from day one.”
“Swapped our hero for theirs and bounce rate dropped by a third.”
“Copy, paste, ship. No package to babysit and the code is genuinely readable.”
“Our pricing page finally feels as premium as the product.”
“The playground made it easy to get the exact feel before touching any code.”
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.