// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Pricing 04 * @description A pricing comparison table showing features across multiple plans. * Clear feature matrix with checkmarks for easy plan comparison. * * @slots pricing, pricing-container, pricing-header, pricing-badge, pricing-heading, * pricing-description, pricing-table, pricing-table-header, pricing-plan-name, * pricing-plan-price, pricing-feature-row, pricing-feature-name, * pricing-feature-check, pricing-cta-row, pricing-cta * @variant comparison * * @registryDependencies button-link badge * @dependencies lucide-react */ import * as React from "react" import { Check, Minus } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" import { ButtonLink } from "@/registry/ui/button-link" // ============================================================================ // TYPES // ============================================================================ interface PricingPlan { /** Unique identifier for list key */ id: string /** Plan name */ name: string /** Monthly price in dollars */ price: number /** CTA button text */ ctaText: string /** CTA button link */ ctaHref: string /** Whether this plan is highlighted */ highlighted?: boolean } interface PricingFeature { /** Unique identifier for list key */ id: string /** Feature name */ name: string /** Availability per plan (keyed by plan id) */ availability: Record } interface Pricing04Props { /** Optional badge displayed above the heading */ badge?: string /** Main heading text */ heading?: string /** Supporting description paragraph */ description?: string /** Pricing plans (columns) */ plans?: PricingPlan[] /** Features to compare (rows) */ features?: PricingFeature[] /** Additional CSS classes for the section */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_PLANS: PricingPlan[] = [ { id: "starter", name: "Starter", price: 15, ctaText: "Get Started", ctaHref: "#", }, { id: "pro", name: "Pro", price: 49, ctaText: "Get Started", ctaHref: "#", highlighted: true, }, { id: "enterprise", name: "Enterprise", price: 99, ctaText: "Contact Sales", ctaHref: "#", }, ] const DEFAULT_FEATURES: PricingFeature[] = [ { id: "projects", name: "Unlimited projects", availability: { starter: false, pro: true, enterprise: true }, }, { id: "analytics", name: "Advanced analytics", availability: { starter: false, pro: true, enterprise: true }, }, { id: "support", name: "Priority support", availability: { starter: false, pro: true, enterprise: true }, }, { id: "integrations", name: "Custom integrations", availability: { starter: false, pro: false, enterprise: true }, }, { id: "sso", name: "SSO & SAML", availability: { starter: false, pro: false, enterprise: true }, }, { id: "sla", name: "SLA guarantee", availability: { starter: false, pro: false, enterprise: true }, }, ] // ============================================================================ // COMPONENT // ============================================================================ function Pricing04({ badge = "Pricing", heading = "Compare plans", description = "Choose the plan that works best for your team. All plans include a 14-day free trial.", plans = DEFAULT_PLANS, features = DEFAULT_FEATURES, className, idBase, }: Pricing04Props) { const headingId = `${idBase ?? "pricing-04"}-heading` return (

{/* Header */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{/* Comparison Table */}

{/* Header Row */} {plans.map((plan) => ( ))} {/* Feature Rows */} {features.map((feature) => ( {plans.map((plan) => ( ))} ))} {/* CTA Row */} ))}

Features	{plan.highlighted && ( Popular )} {plan.name} ${plan.price} /mo
{feature.name}	{feature.availability[plan.id] ? (
{plans.map((plan) => (	{plan.ctaText}

) } export default Pricing04 export { Pricing04, type Pricing04Props, type PricingPlan, type PricingFeature }