// title: Pricing toggle between monthly and yearly billing with plan cards "use client"; import { CheckIcon } from "lucide-react"; import { useState } from "react"; import { Badge } from "@/registry/default/ui/badge"; import { Button } from "@/registry/default/ui/button"; import { Tabs, TabsList, TabsPanel, TabsTab } from "@/registry/default/ui/tabs"; const plans = [ { features: ["5 projects", "3 team members", "5 GB storage", "Email support"], monthly: 9, name: "Starter", yearly: 7, }, { features: [ "Unlimited projects", "20 team members", "50 GB storage", "Priority support", "Advanced analytics", ], monthly: 29, name: "Pro", yearly: 23, }, { features: [ "Unlimited projects", "Unlimited members", "1 TB storage", "Dedicated support", "SSO & SAML", "Audit logs", ], monthly: 99, name: "Enterprise", yearly: 79, }, ]; export function Pattern() { const [billing, setBilling] = useState<"monthly" | "yearly">("monthly"); return (

setBilling(v as "monthly" | "yearly")} value={billing} > Monthly Yearly Save 20%

{plans.map((plan) => (

{plan.name}

${billing === "monthly" ? plan.monthly : plan.yearly} /mo

))}

); }