FreePricing

Pricing Sections

Use this component for SaaS pricing, agency packages, template bundles, and service landing pages where users need to compare plans quickly.

ReactTailwind CSSMotionPricing

Simple pricing for advanced people

Transparent plans with clean comparison cards.

Hobby

$99

For quick prototypes

Starter

Popular

$299

For serious product pages

Pro

$1490

For full launch systems

Overview

A three-column pricing section with a highlighted recommended plan and animated entry.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

npm install framer-motion

Usage

tsx

<PricingSections />

Pricing Sections.tsx

tsx

"use client";

import { motion } from "framer-motion";

const plans = [
  ["Hobby", "$99", "For quick prototypes"],
  ["Starter", "$299", "For serious product pages"],
  ["Pro", "$1490", "For full launch systems"],
];

export function PricingSections() {
  return (
    <section className="rounded-xl border border-white/10 bg-black p-5 text-white">
      <div className="mb-5 text-center">
        <h3 className="text-2xl font-black">Simple pricing for advanced people</h3>
        <p className="mt-1 text-xs text-zinc-400">
          Transparent plans with clean comparison cards.
        </p>
      </div>
      <div className="grid gap-3 md:grid-cols-3">
        {plans.map(([name, price, desc], index) => (
          <motion.div
            key={name}
            initial={{ opacity: 0, y: 12 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: index * 0.08 }}
            className={"rounded-lg border p-4 " + (index === 1 ? "border-lime-300 bg-lime-300/10" : "border-white/10 bg-white/[0.04]")}
          >
            <div className="flex items-center justify-between">
              <p className="text-xs font-semibold">{name}</p>
              {index === 1 && (
                <span className="rounded-full bg-lime-300 px-2 py-0.5 text-[10px] font-bold text-zinc-950">
                  Popular
                </span>
              )}
            </div>
            <p className="mt-4 text-3xl font-black">{price}</p>
            <p className="mt-2 text-xs text-zinc-400">{desc}</p>
            <button className="mt-4 w-full rounded-md bg-sky-500 px-3 py-2 text-xs font-bold text-white">
              Get started
            </button>
          </motion.div>
        ))}
      </div>
    </section>
  );
}