// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Pricing 01 * @description A clean three-tier pricing table with feature lists and * highlighted recommended plan. Perfect for SaaS subscription pages. * * @slots pricing, pricing-container, pricing-header, pricing-heading, * pricing-description, pricing-grid, pricing-card, pricing-badge, * pricing-plan-name, pricing-plan-description, pricing-price, * pricing-price-value, pricing-price-period, pricing-features, * pricing-feature, pricing-cta * @variant cards * * @registryDependencies button-link button badge * @dependencies lucide-react */ import * as React from "react" import { Check } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" import { ButtonLink } from "@/registry/ui/button-link" // ============================================================================ // TYPES // ============================================================================ interface PricingFeature { /** Unique identifier for list key */ id: string /** Feature text */ text: string } interface PricingTier { /** Unique identifier for list key */ id: string /** Plan name */ name: string /** Price display (e.g., "$29") */ price: string /** Billing period (e.g., "/month") */ period?: string /** Short description of the plan */ description: string /** List of features included */ features: PricingFeature[] /** CTA button text */ cta: string /** CTA link destination */ href?: string /** Whether this plan is highlighted/recommended */ highlighted?: boolean /** Badge text for highlighted plans */ badge?: string } interface Pricing01Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Pricing tiers to display */ tiers?: PricingTier[] /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultTiers: PricingTier[] = [ { id: "starter", name: "Starter", price: "$9", period: "/month", description: "Perfect for side projects and individuals getting started.", features: [ { id: "projects", text: "5 projects" }, { id: "analytics", text: "Basic analytics" }, { id: "support", text: "48-hour support response" }, { id: "team", text: "1 team member" }, { id: "community", text: "Community access" }, ], cta: "Get started", href: "#", highlighted: false, }, { id: "pro", name: "Pro", price: "$29", period: "/month", description: "For growing teams that need more power and flexibility.", features: [ { id: "projects", text: "Unlimited projects" }, { id: "analytics", text: "Advanced analytics" }, { id: "support", text: "24-hour support response" }, { id: "team", text: "10 team members" }, { id: "priority", text: "Priority support" }, { id: "integrations", text: "Custom integrations" }, ], cta: "Start free trial", href: "#", highlighted: true, badge: "Most Popular", }, { id: "enterprise", name: "Enterprise", price: "$99", period: "/month", description: "For large organizations with custom requirements.", features: [ { id: "pro", text: "Everything in Pro" }, { id: "team", text: "Unlimited team members" }, { id: "support", text: "Dedicated support" }, { id: "contracts", text: "Custom contracts" }, { id: "sla", text: "SLA guarantee" }, { id: "onprem", text: "On-premise option" }, ], cta: "Contact sales", href: "#", highlighted: false, }, ] // ============================================================================ // COMPONENT // ============================================================================ function Pricing01({ heading = "Simple, transparent pricing", description = "Choose the plan that best fits your needs. All plans include a 14-day free trial.", tiers = defaultTiers, className, idBase, }: Pricing01Props) { const headingId = `${idBase ?? "pricing-01"}-heading` return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Pricing Cards */}

{tiers.map((tier) => (

{/* Badge */} {tier.badge && tier.highlighted && ( {tier.badge} )} {/* Plan Name */}

{tier.name}

{/* Description */}

{tier.description}

{/* Price */}

{tier.price} {tier.period && ( {tier.period} )}

{/* Features */}

{/* CTA Button */} {tier.cta}

))}

) } export default Pricing01 export { Pricing01, type Pricing01Props, type PricingTier, type PricingFeature }