Skip to content
hantui

Marketing Sections & Logo Cloudsv0.2.0

Pricing Section

A monthly/yearly pill toggle with rolling prices.

Installation

CLI

npx shadcn@latest add https://hantui-theta.vercel.app/r/pricing-section.json

Manual

  1. Install the dependencies

    npm install clsx lucide-react motion tailwind-merge

  2. Add the shared helpers

    Components use cn() from lib/utils.ts and the motion tokens below. See Installation if you have not set them up yet.

    lib/motion.ts
    import type { Transition, Variants } from "motion/react";

/** Durations in seconds. */
export const duration = {
  instant: 0.1,
  quick: 0.18,
  base: 0.28,
  slow: 0.45,
} as const;

/** Cubic-bezier curves. */
export const ease = {
  /** Entering, UI response. */
  out: [0.22, 1, 0.36, 1],
  /** Moving on screen. */
  inOut: [0.65, 0, 0.35, 1],
  /** Sheets and the mobile menu. */
  drawer: [0.32, 0.72, 0, 1],
} as const;

/** Everyday UI: presses, icon swaps, popovers and modals. Exits run at `exitFactor` of the enter. */
export const ui = {
  press: { scale: 0.96, duration: 0.12 },
  icon: { type: "spring", duration: 0.3, bounce: 0 },
  popover: { duration: 0.18, ease: ease.out },
  modal: { duration: 0.24, ease: ease.out },
  exitFactor: 0.6,
} as const;

/** Once-per-visit motion on the landing page: hero letters, the reel and the afterimage. */
export const kinetic = {
  heroLetter: { duration: 0.6, ease: ease.out },
  /** Delay per letter, eased so the wave slows toward the end. */
  heroStep: 0.035,
  reelSwap: { type: "spring", duration: 0.5, bounce: 0.1 },
  /** Two afterimages: lag in seconds and opacity of each. */
  ghost: { lag: [0.04, 0.09], opacity: [0.14, 0.06] },
} as const;

/** Spring presets. */
export const spring = {
  snappy: { type: "spring", stiffness: 500, damping: 30 },
  smooth: { type: "spring", stiffness: 260, damping: 26 },
  bouncy: { type: "spring", stiffness: 300, damping: 15 },
} as const satisfies Record<string, Transition>;

/** Stagger between siblings, in seconds (0.03–0.06). */
export const stagger = {
  tight: 0.03,
  base: 0.045,
  loose: 0.06,
} as const;

/** Blur + fade + y-offset. Falls back to a plain fade under reduced motion. */
export function enterVariants(reduceMotion?: boolean | null, y = 8): Variants {
  if (reduceMotion) {
    return {
      hidden: { opacity: 0 },
      visible: { opacity: 1, transition: { duration: duration.base } },
      exit: { opacity: 0, transition: { duration: duration.quick } },
    };
  }
  return {
    hidden: { opacity: 0, y, filter: "blur(4px)" },
    visible: {
      opacity: 1,
      y: 0,
      filter: "blur(0px)",
      transition: { duration: duration.base, ease: ease.out },
    },
    exit: {
      opacity: 0,
      y: -y / 2,
      filter: "blur(4px)",
      transition: { duration: duration.quick, ease: ease.out },
    },
  };
}

/** Scale 0.96 → 1 for popovers, menus and dialogs. */
export function overlayVariants(reduceMotion?: boolean | null): Variants {
  if (reduceMotion) {
    return {
      hidden: { opacity: 0 },
      visible: { opacity: 1, transition: { duration: duration.quick } },
      exit: { opacity: 0, transition: { duration: duration.instant } },
    };
  }
  return {
    hidden: { opacity: 0, scale: 0.96, filter: "blur(2px)" },
    visible: {
      opacity: 1,
      scale: 1,
      filter: "blur(0px)",
      transition: { duration: duration.quick, ease: ease.out },
    },
    exit: {
      opacity: 0,
      scale: 0.96,
      filter: "blur(2px)",
      transition: { duration: duration.instant + 0.02, ease: ease.out },
    },
  };
}

/** Parent variants that stagger their children in. */
export function staggerVariants(gap: number = stagger.base, delayChildren = 0): Variants {
  return {
    hidden: {},
    visible: { transition: { staggerChildren: gap, delayChildren } },
    exit: { transition: { staggerChildren: gap / 2, staggerDirection: -1 } },
  };
}

  3. Add the theme tokens

    This component uses --success, which shadcn does not define by default. Add it to your global CSS:

    app/globals.css
    :root {
  --success: #15803d;
}

.dark {
  --success: #4ade80;
}

@theme inline {
  --color-success: var(--success);
}

  4. Copy the source

    components/ui/pricing-section/pricing-section.tsx
    "use client";

import { useId, useState, type ComponentProps } from "react";
import { LayoutGroup, motion, useReducedMotion } from "motion/react";
import { Check } from "lucide-react";
import { RollingDigits } from "@/components/ui/rolling-digits/rolling-digits";
import { cn } from "@/lib/utils";
import { spring } from "@/lib/motion";

export type Billing = "monthly" | "yearly";

export interface PricingPlan {
  name: string;
  description: string;
  /** Price per month for each billing period (yearly is the monthly equivalent). */
  price: { monthly: number; yearly: number };
  features: string[];
  /** Call-to-action label. @default "Get started" */
  cta?: string;
  /** Link for the call to action. */
  href?: string;
  /** Highlights the plan with a "Popular" badge. */
  popular?: boolean;
}

export interface PricingSectionProps extends Omit<ComponentProps<"section">, "children" | "title"> {
  /** Plans, left to right. */
  plans: PricingPlan[];
  /** Controlled billing period. */
  billing?: Billing;
  /** Initial billing period when uncontrolled. @default "monthly" */
  defaultBilling?: Billing;
  /** Called when the billing toggle changes. */
  onBillingChange?: (billing: Billing) => void;
  /** Badge next to "Yearly", e.g. "Save 20%". */
  yearlyBadge?: string;
  /** ISO currency code. @default "USD" */
  currency?: string;
  /** Section title. @default "Simple, honest pricing" */
  title?: string;
  /** Supporting line under the title. */
  description?: string;
  /** Called when a plan's button is pressed (when it has no href). */
  onSelectPlan?: (plan: PricingPlan, billing: Billing) => void;
}

export function PricingSection({
  plans,
  billing,
  defaultBilling = "monthly",
  onBillingChange,
  yearlyBadge = "Save 20%",
  currency = "USD",
  title = "Simple, honest pricing",
  description,
  onSelectPlan,
  className,
  ...props
}: PricingSectionProps) {
  const reduceMotion = useReducedMotion() ?? false;
  const id = useId();
  const [internal, setInternal] = useState<Billing>(defaultBilling);
  const period = billing ?? internal;
  const setPeriod = (next: Billing) => {
    if (billing === undefined) setInternal(next);
    onBillingChange?.(next);
  };

  return (
    <section className={cn("@container w-full", className)} {...props}>
      <div className="flex flex-col items-center text-center">
        <h2 className="text-2xl font-semibold tracking-tight text-balance text-foreground @[40rem]:text-3xl">{title}</h2>
        {description ? <p className="mt-2 max-w-lg text-[15px] leading-7 text-muted-foreground">{description}</p> : null}
        <LayoutGroup id={id}>
          <div role="radiogroup" aria-label="Billing period" className="mt-6 inline-flex rounded-full border border-border bg-surface p-1">
            {(["monthly", "yearly"] as const).map((option) => {
              const active = option === period;
              return (
                <button
                  key={option}
                  type="button"
                  role="radio"
                  aria-checked={active}
                  onClick={() => setPeriod(option)}
                  className={cn(
                    "relative after:absolute after:inset-x-0 after:-inset-y-0.5 inline-flex h-9 cursor-pointer items-center gap-2 rounded-full px-4 text-[13px] font-medium capitalize outline-none focus-visible:ring-2 focus-visible:ring-ring",
                    active ? "text-background" : "text-foreground/65 hover:text-foreground",
                  )}
                >
                  {active ? (
                    <motion.span layoutId="billing-pill" transition={reduceMotion ? { duration: 0 } : spring.snappy} className="absolute inset-0 rounded-full bg-foreground" />
                  ) : null}
                  <span className="relative">{option}</span>
                  {option === "yearly" && yearlyBadge ? (
                    <span
                      className={cn(
                        "relative rounded-full px-1.5 py-0.5 text-[10px] font-semibold normal-case transition-colors",
                        active ? "bg-background/20 text-background" : "bg-success/12 text-[color-mix(in_oklab,var(--success)_70%,var(--foreground))]",
                      )}
                    >
                      {yearlyBadge}
                    </span>
                  ) : null}
                </button>
              );
            })}
          </div>
        </LayoutGroup>
      </div>

      <ul className="mt-8 grid grid-cols-1 gap-4 @[52rem]:grid-cols-3 @[52rem]:items-center">
        {plans.map((plan) => {
          const amount = plan.price[period];
          return (
            <li
              key={plan.name}
              className={cn(
                "relative flex flex-col rounded-3xl border bg-background p-6",
                plan.popular ? "border-foreground shadow-lg @[52rem]:py-8" : "border-border shadow-xs",
              )}
            >
              {plan.popular ? (
                <span className="absolute -top-3 left-6 rounded-full bg-foreground px-2.5 py-1 text-[11px] font-semibold text-background">Popular</span>
              ) : null}
              <h3 className="text-base font-semibold text-foreground">{plan.name}</h3>
              <p className="mt-1 text-[13px] leading-5 text-muted-foreground">{plan.description}</p>
              <p className="mt-5 flex items-baseline gap-1">
                <RollingDigits
                  value={amount}
                  format={{ style: "currency", currency, maximumFractionDigits: 0 }}
                  className="text-4xl font-semibold tracking-tight text-foreground"
                />
                <span className="text-[13px] text-muted-foreground">/ month</span>
              </p>
              <p className="mt-1 h-4 text-xs text-muted-foreground">
                {period === "yearly" && amount > 0
                  ? `${new Intl.NumberFormat("en-US", { style: "currency", currency, maximumFractionDigits: 0 }).format(amount * 12)} billed yearly`
                  : amount > 0
                    ? "Billed monthly"
                    : "Free forever"}
              </p>
              {plan.href ? (
                <a
                  href={plan.href}
                  className={cn(
                    "mt-6 flex h-11 items-center justify-center rounded-xl text-sm font-semibold outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
                    plan.popular ? "bg-foreground text-background hover:bg-foreground/90" : "border border-border bg-background text-foreground hover:bg-surface",
                  )}
                >
                  {plan.cta ?? "Get started"}
                </a>
              ) : (
                <button
                  type="button"
                  onClick={() => onSelectPlan?.(plan, period)}
                  className={cn(
                    "mt-6 flex h-11 cursor-pointer items-center justify-center rounded-xl text-sm font-semibold outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
                    plan.popular ? "bg-foreground text-background hover:bg-foreground/90" : "border border-border bg-background text-foreground hover:bg-surface",
                  )}
                >
                  {plan.cta ?? "Get started"}
                </button>
              )}
              <ul className="mt-6 space-y-2.5 text-[13px]">
                {plan.features.map((feature) => (
                  <li key={feature} className="flex gap-2 text-foreground">
                    <Check className="mt-0.5 size-3.5 shrink-0 text-[color-mix(in_oklab,var(--success)_70%,var(--foreground))]" strokeWidth={3} aria-hidden="true" />
                    {feature}
                  </li>
                ))}
              </ul>
            </li>
          );
        })}
      </ul>
    </section>
  );
}

Usage

import { PricingSection } from "@/components/ui/pricing-section/pricing-section";

<PricingSection
  plans={[
    { name: "Pro", description: "For teams.", price: { monthly: 24, yearly: 19 }, features: ["Unlimited projects"], popular: true },
  ]}
  yearlyBadge="Save 20%"
/>

API reference

PropTypeDefaultDescription
plans*PricingPlan[]–Plans, left to right.
billingBilling–Controlled billing period.
defaultBillingBilling"monthly"Initial billing period when uncontrolled.
onBillingChange(billing: Billing) => void–Called when the billing toggle changes.
yearlyBadgestring–Badge next to "Yearly", e.g. "Save 20%".
currencystring"USD"ISO currency code.
titlestring"Simple, honest pricing"Section title.
descriptionstring–Supporting line under the title.
onSelectPlan(plan: PricingPlan, billing: Billing) => void–Called when a plan's button is pressed (when it has no href).

Also accepts every native <section> attribute, including ref and className.

  • Prices are monthly amounts; yearly shows the monthly equivalent plus the yearly total underneath. Reuses Rolling Digits, so it installs with it.
  • Cards stack below a 52rem container and sit side by side above it, with the popular plan slightly taller.

Accessibility

  • The billing toggle is a labelled radio group; the active pill slides between options.
  • Prices use Rolling Digits, which exposes the formatted price as plain text while the digit reels stay aria-hidden.
  • Plan names are headings, features are lists, and the popular plan is marked with visible text, not only a border.
  • Reduced motion moves the pill instantly and swaps prices without rolling.