01
Border reflection
A pointer-led glow follows intent across each pricing card.
React 18+ · Ready to ship
Pricing UI that
earns attention.
Production-ready React components for the moment your product asks customers to choose. Thoughtful defaults, expressive motion, complete source.
TypeScript strictAccessibleNo lock-in
Choose your levelStart complete.
Start complete.
Upgrade for range.
Free is a useful product, not a trial. Pro is for teams that need more layouts, control, and expressive motion.
Pro in motionSee the details
See the details
that earn attention.
Explore the finishing touches that make every pricing decision feel clear, responsive, and considered.
02
Comparison layout
Feature-level detail stays easy to scan when plans need a closer look.
Four layouts, one APIDifferent contexts.
Different contexts.
The same restraint.
Standard
Balanced by default
Compact
For tighter decisions
Featured
Lead with a favorite
Comparison
Details, side by side
Motion, with a reasonPresence without
Presence without
performance.
Every preset supports hierarchy and feedback. System reduced-motion settings are honored automatically.
Lift
Lift
A tactile response for direct comparison.
$24$228
Price shift
A clear transition when cadence changes.
Cascade
A composed entrance for prominent sections.
Engineered for shippingSmall surface.
Small surface.
Serious foundations.
Typed end to end
Strict TypeScript props keep plans, feature details, CTA configuration, themes, and tokens predictable.
PricingPlan[]✓ inferredAccessible interactions
Semantic structure, keyboard controls, visible focus, clear labels, and reduced-motion support.
Minimal runtime
No component framework, data layer, or animation runtime required.
Tokens, not traps
Style with typed tokens and durable CSS custom properties.
Framework-independent
Use the React packages with Vite, Next.js, Remix, or any compatible React host.
From install to polishedA clean API.
A clean API.
Your real content.
Bring plan data, choose a billing cycle, and import one stylesheet. Nothing calls home; everything stays in your project.
npm install @motion-pricing/freePricing.tsx
import { PricingTable } from '@motion-pricing/free';
import '@motion-pricing/free/styles.css';
export function Pricing() {
return (
<PricingTable
plans={plans}
billingCycle="monthly"
theme="dark"
/>
);
}Simple distributionSource you can
Source you can
actually work with.
MIT licensed
Use the Free edition in personal and commercial work under the included MIT terms.
View Free source ↗Commercial source license
Use and modify Pro in end products; do not redistribute it as a competing component product. Draft terms ship for review.
Get Pro ↗FAQ
The practical details.
Does Free include production-ready source?
Yes. Free has typed React source, accessible interactions, responsive styling, themes, and no watermark or artificial usage cap.
What does Pro add?
Pro adds four layouts, advanced token controls, animated price changes, motion presets, spotlight interactions, richer feature rows, and extended examples.
Is this a subscription service?
No. Motion Pricing Kit is source code for UI components. It does not include payment processing, authentication, hosting, or license activation.
Can I use it in my existing React app?
Yes. Free and Pro are framework-independent React libraries that work in compatible React applications.
Is Pro source completely hidden online?
No. Interactive demos necessarily deliver executable browser code. Source maps and downloadable Pro archives are excluded from the public showcase build.
Can I customize the visual system?
Yes. Free exposes practical CSS variables, while Pro adds a typed design-token API for accent, surface, type, radius, and spacing.
MPK / 01
Give pricing
the finish it deserves.
Start with a genuinely useful Free component. Move to Pro when your product needs more range.