Components
A responsive, animated pricing tier card that dynamically displays monthly or quarterly billing info, a feature list, and a primary CTA. It supports theme variants (primary, secondary, etc.) and highlights featured plans with enhanced styling.
Loading preview...
import { TierPlan } from "@/components/ui/saas-pricing-plan-card";
const demoPlan = {
plan_name: "Hyper-Growth",
isFeatured: true, // true or false
color_variant: "accent", // primary, highlight
description: "Designed for fast-growth PLG SaaS. UX onboarding Teardown & Roadmap.",
price: {
month: 24,
quarter: 54,
},
priceId: {
monthly: "price_123_month", //from stripe
quarterly: "price_123_quarter", //from stripe
},
quarter_save: "€18",
features: [
{ name: "What's included:" },
{ name: "Advisory + Lo-Fi Designs" },
{ name: "2 A/B Tests per Month" },
{ name: "2 Week Strategy Sprint" },
{ name: "4 UX Onboarding Teardowns" },
],
};
export default function DemoOne() {
return (
<main className="min-h-screen w-full flex flex-col items-center justify-center bg-gray-50 p-6">
<TierPlan plan={demoPlan} />
</main>
);
}