51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T23dd,"use client"; import { Bell, Briefcase, Brush, Building, CalendarCheck2, Check, CheckSquare, Code, Database, FileText, GitBranch, GitPullRequest, LayoutGrid, MonitorSmartphone, Rocket, Settings2, Users, Zap, } from "lucide-react"; import { useState } from "react"; import { cn } from "cn"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Separator } from "@/components/ui/separator"; import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; type IconComponent = ElementType<{ className?: string }>; type Pricing3PlanFeature = | string | { text: string; icon?: IconComponent; }; interface Pricing3PlansPlan { name: string; monthlyPrice: string; yearlyPrice: string; period: { monthly: string; yearly: string; }; description: { monthly: string; yearly: string; }; buttonText: string; buttonUrl?: string; highlighted?: boolean; highlightedLabel?: string; icon?: IconComponent; image?: string; features: Pricing3PlanFeature[]; tagline?: string; bestFor?: string; planCode?: string; } interface Pricing3PlansProps { heading: string; description?: string; plans: Pricing3PlansPlan[]; className?: string; } interface Pricing4Props extends Pricing3PlansProps {} type Props = Partial; export function pricing3PlanFeatureText(feature: Pricing3PlanFeature): string { return typeof feature === "string" ? feature : feature.text; } export function pricing3PlanFeatureIcon( feature: Pricing3PlanFeature, ): IconComponent | undefined { return typeof feature === "string" ? undefined : feature.icon; } const defaultProps: Pricing4Props = { heading: "Simple Pricing Plans", description: "Choose the plan that fits your needs. Start free and scale as you grow.", plans: [ { icon: Rocket, image: "https://cdn.shadcnblocks.com/shadcnblocks/image-set/modern/pricing-plans/plan1.svg", name: "Basic Plan", monthlyPrice: "$0", yearlyPrice: "$0", period: { monthly: "Per month", yearly: "Per year", }, description: { monthly: "Ideal for individuals getting started. No credit card required.", yearly: "Ideal for individuals getting started. No credit card required.", }, buttonText: "Start for Free", buttonUrl: "#", highlighted: false, planCode: "BASIC", tagline: "Great for solo developers", bestFor: "Freelancers just starting out", features: [ { icon: Code, text: "Up to 5 components" }, { icon: LayoutGrid, text: "Community support" }, { icon: MonitorSmartphone, text: "Weekly updates" }, { icon: FileText, text: "100MB storage" }, { icon: GitBranch, text: "Basic analytics" }, ], }, { icon: Briefcase, image: "https://cdn.shadcnblocks.com/shadcnblocks/image-set/modern/pricing-plans/plan2.svg", name: "Standard Plan", monthlyPrice: "$20", yearlyPrice: "$200", period: { monthly: "Per month", yearly: "Per year", }, description: { monthly: "For growing teams that need more power. Start with a 30-day free trial.", yearly: "For growing teams that need more power. Save 16% compared to monthly.", }, buttonText: "Get Started", buttonUrl: "#", highlighted: true, highlightedLabel: "Most popular", planCode: "STANDARD", tagline: "Best for growing teams", bestFor: "Small dev teams and startups", features: [ { icon: Code, text: "Unlimited components" }, { icon: Brush, text: "Priority support" }, { icon: Settings2, text: "Daily updates" }, { icon: CheckSquare, text: "10GB storage" }, { icon: Zap, text: "Advanced analytics" }, ], }, { icon: Building, image: "https://cdn.shadcnblocks.com/shadcnblocks/image-set/modern/pricing-plans/plan3.svg", name: "Premium Plan", monthlyPrice: "$80", yearlyPrice: "$800", period: { monthly: "Per month", yearly: "Per year", }, description: { monthly: "For large organizations with advanced needs. Everything in Standard plus dedicated support.", yearly: "For large organizations with advanced needs. Save 16% compared to monthly.", }, buttonText: "Buy Now", buttonUrl: "#", highlighted: false, planCode: "PREMIUM", tagline: "Collaborate and scale fast", bestFor: "Product teams with multiple projects", features: [ { icon: Users, text: "Unlimited components" }, { icon: GitPullRequest, text: "Dedicated support" }, { icon: CalendarCheck2, text: "Real-time updates" }, { icon: Bell, text: "Unlimited storage" }, { icon: Database, text: "Custom integrations" }, ], }, ], }; const Pricing4 = (props: Props) => { const { heading, description, plans, className } = { ...defaultProps, ...props, }; const firstHighlightedIndex = plans.findIndex((p) => p.highlighted); const [isAnnually, setIsAnnually] = useState(false); return (

{heading}

{description && (

{description}

)} setIsAnnually(value === "annually") } className="w-fit shrink-0" aria-label="Billing period" > Monthly Yearly

{plans.map((plan, index) => { const isHighlighted = firstHighlightedIndex !== -1 && index === firstHighlightedIndex; return (

{plan.name}

{isAnnually ? plan.yearlyPrice : plan.monthlyPrice}

{isAnnually ? plan.period.yearly : plan.period.monthly}

); })}

); }; export { Pricing4 }; 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"cn"}]]}]}]]}],["$","$L51",null,{"namespace":"@shadcnblocks","registryDependencies":["badge","button","separator","tabs"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"block/pricing4/pricing4.tsx","content":"$53","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]