Subscription Tier Card

Pro

An animated 1px conic-gradient border with a soft Wensity Red halo on hover and a CTA that shimmers as you approach.

heavy saas blockssubscriptiontiercardframer motiontabler icons react

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

 1"use client";
 2import {
 3  SubscriptionTierGrid,
 4  type BillingTier,
 5} from "@/components/wensity/subscription-tier-card";
 6
 7const tiers: BillingTier[] = [
 8  { id: "free", name: "Hobby", tagline: "For weekend hackers.", priceMonthly: 0,
 9    features: ["3 projects", "Community support"], cta: "Start free" },
10  { id: "pro", name: "Pro", tagline: "For serious teams.", priceMonthly: 24,
11    features: ["Unlimited projects", "Priority support", "Custom domain"],
12    cta: "Upgrade to Pro", highlight: true, badge: "Most Popular" },
13  { id: "ent", name: "Enterprise", tagline: "SSO + dedicated success.", priceMonthly: 99,
14    features: ["Everything in Pro", "SAML SSO", "99.99% SLA"], cta: "Talk to sales" },
15];
16
17export function SubscriptionTierGridDemo() {
18  return (
19    <SubscriptionTierGrid
20      tiers={tiers}
21      defaultCycle="monthly"
22      // Swap the badge sparkle for your own mark:
23      // badgeIcon={<YourLogo size={12} />}
24    />
25  );
26}

Props

Prop	Type	Default	Description
`tiers`	BillingTier[]	-	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.
`badgeIcon`	React.ReactNode	<IconSparkles size={12} />	Icon inside the highlighted tier's badge pill. Pass your own logo or mark.