Pricing Motion

Motion

Pricing plan cards that fade up in sequence on scroll, each with name, price, blurb, feature bullets and a choose button, plus an accent featured plan.

src/registry/premium/pricing-motion.tsx/r/pricing-motion.json

Installation#

bash
npx shadcn@latest add @minidev/pricing-motion

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/pricing-motion.json

Usage#

tsx
import { PricingMotion } from "@/components/ui/pricing-motion"

export function Example() {
  return (
    <PricingMotion plans={[
      { name: "Free", price: "$0", blurb: "Primitives forever", features: ["MIT components", "Galleries", "Audit gate"] },
      { name: "Pro", price: "$49", blurb: "For product teams", featured: true, features: ["Premium heroes", "Motion blocks", "Priority updates"] },
      { name: "Team", price: "$149", blurb: "Shared seats", features: ["Everything in Pro", "Seat management", "Support"] },
    ]} />
  )
}

API reference#

PricingMotion props
PropTypeDefault
plansPlan[]SAMPLE_PLANS
classNamestring-

Dependencies#

npm

motion

Built from

Examples#

All pricing and billing components

Learn more