Animated pricing cards with Tailwind and CSS, no animation library

Most pricing card motion needs no library: a spinning gradient border on the featured plan, a hover lift, a staggered reveal on scroll and checkmarks that draw in. Here it is as a Server Component plus one CSS file, with a reduced-motion fallback, and Credit Card Checkout V1 for the page the plan button opens.

One payment$3

By buying you agree to the Terms.

One payment, no subscription
Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

The cards (a Server Component)

components/pricing-cards.tsx

import type { CSSProperties } from "react";
import "./pricing-cards.css";

export type Plan = {
  id: string;
  name: string;
  price: string; // already formatted from your data, never hard-coded here
  period: string;
  features: string[];
  featured?: boolean;
  href: string;
};

// A Server Component: no animation library, no "use client".
export function PricingCards({ plans }: { plans: Plan[] }) {
  return (
    <div className="grid gap-6 md:grid-cols-3">
      {plans.map((plan, i) => (
        <article
          key={plan.id}
          style={{ "--i": i } as CSSProperties}
          className={"pc-card pc-reveal relative rounded-2xl p-px " + (plan.featured ? "pc-featured" : "bg-zinc-800")}
        >
          <div className="flex h-full flex-col rounded-[15px] bg-zinc-950 p-6">
            <h3 className="text-sm font-medium text-zinc-400">{plan.name}</h3>
            <p className="mt-3 text-4xl font-semibold tabular-nums text-white">
              {plan.price}
              <span className="ml-1 text-sm font-normal text-zinc-500">/{plan.period}</span>
            </p>
            <ul className="mt-6 space-y-2 text-sm text-zinc-300">
              {plan.features.map((f) => (
                <li key={f} className="flex items-center gap-2">
                  <svg viewBox="0 0 16 16" className="size-4 shrink-0 text-emerald-400" aria-hidden="true">
                    <path className="pc-check" d="M3 8.5l3 3 7-7" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
                  </svg>
                  {f}
                </li>
              ))}
            </ul>
            <a href={plan.href} className="mt-auto inline-flex justify-center rounded-lg bg-white px-4 py-2 text-sm font-medium text-zinc-950">
              Choose {plan.name}
            </a>
          </div>
        </article>
      ))}
    </div>
  );
}

components/pricing-cards.css

/* 1. Rotating gradient border on the featured plan. @property lets the
      browser animate the angle; without it the border just sits still. */
@property --pc-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.pc-featured {
  background: conic-gradient(from var(--pc-angle), #34d399, #6366f1, #f472b6, #34d399);
  animation: pc-spin 6s linear infinite;
}
@keyframes pc-spin { to { --pc-angle: 360deg; } }

/* 2. Hover: lift and shadow. Only transform and box-shadow change. */
.pc-card {
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.pc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgb(0 0 0 / 0.6);
}

/* 3. Reveal on scroll, one card after another (--i is set inline).
      It moves the card with translate, so it never fights the hover transform. */
@keyframes pc-in {
  from { opacity: 0; translate: 0 16px; }
  to { opacity: 1; translate: 0 0; }
}
@supports (animation-timeline: view()) {
  .pc-reveal {
    animation: pc-in linear both;
    animation-timeline: view();
    animation-range: entry calc(var(--i) * 8%) cover 30%;
  }
}

/* 4. Checkmarks draw in after the card shows up. */
.pc-check {
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  animation: pc-draw 500ms ease-out forwards;
  animation-delay: calc(300ms + var(--i, 0) * 120ms);
}
@keyframes pc-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .pc-featured, .pc-reveal, .pc-check { animation: none; }
  .pc-check { stroke-dashoffset: 0; }
  .pc-card:hover { transform: none; }
}

app/pricing/page.tsx

import { PricingCards, type Plan } from "@/components/pricing-cards";
import { getPlans } from "@/lib/plans";

export default async function PricingPage() {
  // Prices come from your billing data (for example Stripe Prices),
  // formatted on the server with Intl.NumberFormat.
  const plans: Plan[] = await getPlans();
  return (
    <main className="mx-auto max-w-5xl px-6 py-20">
      <h1 className="mb-10 text-center text-4xl font-semibold">Pick a plan</h1>
      <PricingCards plans={plans} />
    </main>
  );
}

Good to know

Prices come from your data and arrive as formatted strings, so nothing is hard-coded in the component. Format them on the server with Intl.NumberFormat so the text is the same on both renders.
Only transform, translate, opacity, box-shadow and the stroke offset animate. Those don't change layout, so the grid never jumps.
The reveal uses animation-timeline: view() where the browser has it and leaves the cards visible where it doesn't. reveal-fallback.tsx below adds an IntersectionObserver version if you want the motion everywhere.
Reach for Motion when cards change layout or need exit animations, for example a plan that expands in place. Hover, reveal and a border don't need it.
What we ran on October 27, 2026: pricing-cards.tsx, the page and reveal-fallback.tsx type-check with TypeScript 5.9.3 against @types/react 19.3.0 and next 15.5.28, and a plan object with a missing field fails the same check. We didn't render the CSS in a browser for this page; check the gradient border in Safari and Firefox before you ship.

A reveal for browsers without scroll timelines

animation-timeline: view() isn't everywhere yet. This small client component adds a class when each card enters the viewport, and the CSS in its comment plays the same keyframe with a per-card delay.

components/reveal-fallback.tsx

"use client";
import { useEffect } from "react";

// For browsers without animation-timeline: add .pc-shown when a card enters
// the viewport. Pair it with: .pc-reveal { opacity: 0 } .pc-shown { animation: pc-in 500ms both; animation-delay: calc(var(--i) * 90ms) }
export function RevealFallback() {
  useEffect(() => {
    if (CSS.supports("animation-timeline: view()")) return;
    const cards = document.querySelectorAll<HTMLElement>(".pc-reveal");
    const io = new IntersectionObserver((entries) => {
      for (const e of entries) {
        if (e.isIntersecting) {
          e.target.classList.add("pc-shown");
          io.unobserve(e.target);
        }
      }
    }, { threshold: 0.2 });
    cards.forEach((c) => io.observe(c));
    return () => io.disconnect();
  }, []);
  return null;
}

The Monthly / Yearly switch

If the cards need a billing toggle, the free Pricing Switch is a stretchy pill with prices that roll to the new numbers. It installs with one shadcn command and is part of the free kit.

The free kit: Toast Stack, Pricing Switch, Upload Dropzone and more, MIT

Where Credit Card Checkout V1 fits

The plan button has to lead somewhere. Credit Card Checkout V1 is the page after it: a card form where the number groups in fours, expiry gets its slash, and a 3D card fills in as people type and flips for the CVC. For real payments, Stripe's card fields go into its renderCardFields slot, so card digits never touch your code.
It needs framer-motion, since the card flip is a real 3D animation. The pricing cards above stay library-free.

Wire the plans to Stripe Prices

Install

Copy from the zipPut react/src/components into src/, then none. Tailwind v4 for the utility classes; the motion is plain CSS.
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

renderCardFields: Stripe's card fields go here for real payments
onConfirm: confirm the payment with Stripe; throw to go back to idle
amount / currency: what the button and summary show
onPay: demo and tests only: the built-in inputs

How qodesign compares

qodesign vs UiverseUiverse is best for: single small elements: buttons, loaders, toggles, checkboxes, inputs.
qodesign vs AnimataAnimata is best for: free animated building blocks you copy and adapt.
qodesign vs Motion PrimitivesMotion Primitives is best for: small motion building blocks you compose yourself: text effects, number tickers, dialogs, toolbars.

All comparisons, with prices read on each library's own site.

From the blog: Animated Pricing Cards in Tailwind Without Framer Motion

From the blog: Monthly/Yearly Pricing Toggle in React and Tailwind

Questions

Do I need Framer Motion for animated pricing cards?

No. A hover lift, a staggered reveal, a gradient border and drawn checkmarks are all plain CSS. Use Motion when cards change layout or need exit animations.

How do I animate a gradient border in Tailwind?

Register an angle with @property, use it in a conic-gradient on a wrapper with 1px padding, and animate the angle with a keyframe.

Will the reveal hide my cards in older browsers?

No. The reveal only applies inside @supports (animation-timeline: view()), so other browsers show the cards as normal.

Does it respect reduced motion?

Yes. Under prefers-reduced-motion the border, reveal and checkmark animations are off and the hover lift is removed.

Does the checkout work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.