Pricing card

A plan card in a soft shell. Hover and the shell glows with a drifting gradient while a quiet recommendation rolls up, and the price rolls like an odometer when you pay yearly.

Cards, hover, Motion

Install

npm i clsx lucide-react motion tailwind-merge && curl -o components/pricing-card.tsx https://motion-brew.com/r/pricing-card.tsx

One self contained file for React and Tailwind CSS: pricing-card.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { PricingCard, type PricingPlan } from "@/components/pricing-card";
import { ZapIcon } from "@/icons/zap";
import { FolderOpenIcon } from "@/icons/folder-open";

const plan: PricingPlan = {
  name: "Personal",
  label: "Ideal for solo makers",
  blurb: "Everything you need to ship your own projects.",
  monthly: 12,
  yearly: 9,
  cta: "Get started",
  footnote: "14 day free trial, no card needed",
  icon: ZapIcon,
  features: [{ title: "Unlimited projects", detail: "Start as many as you like.", icon: FolderOpenIcon }],
};

export default function Pricing() {
  return <PricingCard plan={plan} onSelect={(billing) => checkout(billing)} />;
}

Props

Prop	Type	Default	Description
plan	PricingPlan	a Personal plan	{ name, label, blurb, monthly, yearly, features, cta, footnote?, icon? }; a feature is { title, detail?, icon? }
defaultBilling	"monthly" \	"yearly"	"monthly"	Billing shown first
note	string	"Recommended for you"	What the strip rolls to on hover
onSelect	(billing) => void		Called by the button
className	string		Placement

More cards

Liquid card: Four status cards with an icon as a glass container: liquid pours in, waves roll and bubbles rise.
Team member card: A team member card with pixels burning up the photo like fire.
Roadmap card: A product roadmap that plays like stories: the bar fills, the number rolls, the text blurs across and the milestones check in.
Contour feature card: A browser window in front of a live topographic map.

All animated react card components