Wensity

Subscription Tier Card

Pro

Pricing cards with a monthly and annual toggle, prices that spring to new values, and a highlighted plan in a brand glow.

heavy saas blockssubscriptiontiercardframer motiontabler icons react
Subscription Tier Card component preview

Overview

Subscription Tier Card is a React and Tailwind CSS pricing table for SaaS plans, in Next.js or any React app, with a grid that adds a monthly and annual toggle. Switching cycles slides the toggle pill and springs each price to its new figure, with annual defaulting to 20 percent off. The highlighted tier gets a brand glow, a badge with your own icon, and a gradient CTA, and excluded features show a muted minus. Contact sales tiers take a custom priceOverride. The -20% chip is fixed text, so update it when priceAnnual sets a different discount.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add subscription-tier-card

Usage

Import SubscriptionTierCard from @/components/wensity/subscription-tier-card and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
"use client";
import {
  SubscriptionTierGrid,
  type BillingTier,
} from "@/components/wensity/subscription-tier-card";


const tiers: BillingTier[] = [
  { id: "free", name: "Hobby", tagline: "For weekend hackers.", priceMonthly: 0,
    features: ["3 projects", "Community support"], cta: "Start free" },
  { id: "pro", name: "Pro", tagline: "For serious teams.", priceMonthly: 24,
    features: ["Unlimited projects", "Priority support", "Custom domain"],
    cta: "Upgrade to Pro", highlight: true, badge: "Most Popular" },
  { id: "ent", name: "Enterprise", tagline: "SSO + dedicated success.", priceMonthly: 99,
    features: ["Everything in Pro", "SAML SSO", "99.99% SLA"], cta: "Talk to sales" },
];


export function SubscriptionTierGridDemo() {
  return (
    <SubscriptionTierGrid
      tiers={tiers}
      defaultCycle="monthly"
      // Swap the badge sparkle for your own mark:
      // badgeIcon={<YourLogo size={12} />}
    />
  );
}

Props

PropTypeDefaultDescription
tiersBillingTier[]-Billing tiers to render. Falls back to built-in Hobby / Pro / Enterprise examples.
defaultCycle"monthly" | "annual""monthly"Initial billing cycle for the grid toggle.
onCtaClick(tierId: string) => void-Fired when a tier CTA is clicked.
badgeIconReact.ReactNode<IconSparkles size={12} />Icon inside the highlighted tier's badge pill. Pass your own logo or mark.

Related components

  • Fluid Drag-and-Drop Kanban component preview

    Fluid Drag-and-Drop Kanban

    A Trello-grade board running real pointer physics, where every card tilts toward the velocity you throw it across at.

  • Multi-Step Form Wizard component preview

    Multi-Step Form Wizard

    A multi-step form wizard whose card physically reshapes to wrap each new step as the content slides in behind it.

  • GitHub-Style Activity Grid component preview

    GitHub-Style Activity Grid

    365 squares sharing one tooltip that flies between days on rails, with a reveal that ripples backward from today.

  • KPI Card with Sparkline component preview

    KPI Card with Sparkline

    Dashboard KPI cards with a smooth SVG sparkline chart and a glowing dot that snaps to whichever value you scrub across.