Feature Comparison

Motion

A 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.

src/registry/premium/feature-comparison.tsx/r/feature-comparison.json

Installation#

bash

npx shadcn@latest add @minidev/feature-comparison

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/feature-comparison.json

Usage#

tsx

import { FeatureComparison } from "@/components/ui/feature-comparison"

export function Example() {
  return (
    <FeatureComparison rows={[
      { feature: "UI primitives", free: true, premium: true },
      { feature: "Kinetic motion", free: false, premium: true },
      { feature: "Launch kits", free: false, premium: true },
      { feature: "Email kits", free: false, premium: true },
      { feature: "Seats", free: "1", premium: "Unlimited" },
    ]} />
  )
}

API reference#

FeatureComparison props
Prop	Type	Default
`rows`	`Row[]`	`SAMPLE_ROWS`
`className`	`string`	`-`

Dependencies#

npm

lucide-reactmotion

Built from

Examples#

Page templatesPage kits & landings

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

Learn more

All pricing sections10 blocks