Pricing Kinetic

Motion

A pricing section pairing a kinetic headline and a typographic marquee with a free versus premium feature comparison table. Built for React launch pages.

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

Installation#

bash

npx shadcn@latest add @minidev/pricing-kinetic

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

Usage#

tsx

import { PricingKinetic } from "@/components/ui/pricing-kinetic"

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

API reference#

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

Dependencies#

npm

motion

Built from

Feature Comparison Magnetic Cta Morph Price Typographic Marquee

Examples#

Page templatesPage kits & landings

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