Free Premium Compare

Motion

A two column tier comparison with free and premium cards, feature checklists, price blurbs and CTAs, with the featured tier outlined in the accent color.

src/registry/premium/free-premium-compare.tsx/r/free-premium-compare.json

Free

Forever MIT for product teams.

MIT product primitives
Forms · tables · AI chat
Billing & admin surfaces
Gallery + docs + playground
DESIGN.md as law

Browse free UI

Premium

Soft-gate

The moments that win clients.

Kinetic heroes & sticky stories
Launch / investor / pricing kits
Magnetic CTAs & wipe compares
Client pitch showcase
Same tokens — zero theme drift

See Premium motion

Compare

Installation#

bash

npx shadcn@latest add @minidev/free-premium-compare

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/free-premium-compare.json

Usage#

tsx

import { FreePremiumCompare } from "@/components/ui/free-premium-compare"

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

API reference#

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

Dependencies#

npm

lucide-reactmotion

Built from

Button

Examples#

MotionKinetic type, sticky story, magnetic CTA Client showcasePitch hero, living product mock and scroll chapters.

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.Morph PriceA 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.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