Pricing Page

Motion

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

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

Installation#

bash

npx shadcn@latest add @minidev/pricing-page

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

Usage#

tsx

import { PricingPage } from "@/components/ui/pricing-page"

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

API reference#

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

Dependencies#

npm

React only

Built from

Cta Glow Faq List Feature Comparison Footer Mega Nav Marketing Pricing Motion Pricing Toggle

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