Morph Price

Motion

A price display with a monthly or yearly toggle where the old amount springs out and the new price springs in. A compact pricing interaction for plan cards.

src/registry/premium/morph-price.tsx/r/morph-price.json

Save 20% with yearly

$39/ seat

Billed yearly · save 20%

Price

Installation#

bash

npx shadcn@latest add @minidev/morph-price

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/morph-price.json

Usage#

tsx

import { MorphPrice } from "@/components/ui/morph-price"

export function Example() {
  return (
    <MorphPrice />
  )
}

API reference#

MorphPrice props
Prop	Type	Default
`className`	`string`	`-`

Dependencies#

npm

motion

Built from

Pricing Toggle

Examples#

MotionKinetic type, sticky story, magnetic CTA

Feature ComparisonA free versus premium comparison table with check, dash or text cells whose rows fade in on scroll. Pass an array of rows to compare plan features.Free Premium CompareA two column tier comparison with free and premium cards, feature checklists, price blurbs and CTAs, with the featured tier outlined in the accent color.Pricing KineticA pricing section pairing a kinetic headline and a typographic marquee with a free versus premium feature comparison table. Built for React launch pages.Pricing MotionPricing 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.Pricing PageA full Tailwind pricing page with a monthly or yearly toggle, animated plan cards, a feature comparison table, pricing FAQs, a glowing CTA and a mega footer.Add Card FormCompact payment form for card number, expiry and CVC with correct autocomplete hints, numeric input mode and a full width save button. Ready for your processor.

All pricing and billing components