The PricingModule component is a fully configurable, responsive pricing section built with shadcn/ui, Lucide icons, and Tailwind CSS. It allows users to easily toggle between monthly and yearly billing, updating prices instantly for a seamless and dynamic experience. Designed for modern SaaS and product websites, it combines clarity, flexibility, and style — giving teams the ability to showcase multiple pricing tiers with detailed features and highlights.
Each pricing card is modular, allowing you to define the name, description, icon, pricing options, user limits, and features through props. The component also includes a recommended plan highlight, making it easy to emphasize the most popular or valuable tier. With clean transitions, adaptive theming for light and dark modes, and accessible UI components, the PricingModule serves as a polished and production-ready pricing layout for any digital platform.
"use client";
import { PricingModule } from "@/components/ui/pricing-module";
import { Layers, Monitor, Users, Building2 } from "lucide-react";
export default function PricingPage() {
const plans = [
{
id: "free",
name: "Free",
description: "For individuals and small projects",
icon: <Layers className="w-8 h-8 text-primary" />,
priceMonthly: 9,
priceYearly: 90,
users: "Up to 3 users",
features: [
{ label: "Basic analytics", included: true },
{ label: "Community access", included: true },
{ label: "Priority support", included: false },
],
},
{
id: "basic",
name: "Basic",
description: "For small teams getting started",
icon: <Monitor className="w-8 h-8 text-primary" />,
priceMonthly: 29,
priceYearly: 290,
users: "Up to 10 users",
features: [
{ label: "Advanced analytics", included: true },
{ label: "Priority support", included: true },
{ label: "Team collaboration tools", included: false },
],
},
{
id: "team",
name: "Team",
description: "For growing startups and agencies",
icon: <Users className="w-8 h-8 text-primary" />,
priceMonthly: 99,
priceYearly: 990,
users: "Up to 50 users",
features: [
{ label: "Dedicated success manager", included: true },
{ label: "Custom integrations", included: true },
{ label: "AI-powered insights", included: true },
],
recommended: true,
},
{
id: "enterprise",
name: "Enterprise",
description: "For large organizations with custom needs",
icon: <Building2 className="w-8 h-8 text-primary" />,
priceMonthly: 199,
priceYearly: 1990,
users: "Unlimited users",
features: [
{ label: "24/7 priority support", included: true },
{ label: "Custom SLAs", included: true },
{ label: "Private cloud hosting", included: true },
],
},
];
return (
<main className="min-h-screen bg-background text-foreground">
<PricingModule
title="Simple, Transparent Pricing"
subtitle="Switch between monthly and yearly billing anytime."
annualBillingLabel="Pay annually and save 20%"
buttonLabel="Start Now"
plans={plans}
defaultAnnual={false}
/>
</main>
);
}
Part of Ruixen UI — browse the full library on 21st.dev.