2a:I[61360,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"InstallationSwitch",1] 2e:I[48869,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"DemoCodeBlock",1] 30:I[84774,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"Table"] 31:I[84774,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"TableHeader"] 32:I[84774,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"TableRow"] 33:I[84774,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"TableHead"] 34:I[84774,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"TableBody"] 35:I[84774,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"TableCell"] 39:I[6105,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],""] 3a:I[29533,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"FlipButton"] 3b:I[84786,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"SimilarFloatingBar"] 2b:T1186,"use client" import React from "react" import { motion } from "motion/react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { cn } from "@/lib/utils" import { Check, Circle } from "lucide-react" export interface PricingOption { id: string title: string price: number delivery: string description: string whatWeNeed: string[] whatYouGet: string[] } export interface PricingSectionProps { pricingOptions: PricingOption[] className?: string } export function PricingSection({ pricingOptions, className }: PricingSectionProps) { const defaultId = pricingOptions?.[0]?.id ?? "" return (

Simple, Transparent Pricing

Choose the perfect plan for your project needs

{pricingOptions.map((option) => ( {option.title} ))} {pricingOptions.map((option, index) => (

{option.delivery}

{option.title}

{option.description}

${option.price}

Get Started

What I'll need

{item}

What you get

{item}

))}

) } 2c:T9b9,"use client" import React from "react" import { PricingSection } from "@/components/reframeui/blocks/pricing-section" export default function PricingSectionDemo() { const demoPricingOptions = [ { id: "landing", title: "Landing Pages", price: 260, delivery: "4 Days Delivery", description: "Create high-converting landing pages that drive results. Perfect for product launches, marketing campaigns, or lead generation", whatWeNeed: [ "Marketing goals and target audience", "Key messaging and value propositions", "Brand assets and content", ], whatYouGet: [ "Conversion-focused design", "Mobile-first approach", "Fast loading speed", "Analytics integration", "A/B testing setup", ], }, { id: "revamp", title: "Website Revamp", price: 400, delivery: "7 Days Delivery", description: "Transform your existing website with modern design and improved user experience. We'll enhance your online presence while maintaining your brand identity and improving conversion rates", whatWeNeed: [ "Current website URL or screenshots", "Brief of desired improvements", "Brand guidelines (if any)", "Analytics data (if available)", ], whatYouGet: [ "Complete website redesign", "Mobile-responsive design", "Performance optimization", "SEO improvements", "User experience enhancements", "Conversion rate optimization", ], }, { id: "complete", title: "Complete Project", price: 800, delivery: "15 Days Delivery", description: "Full website development from concept to launch with custom functionality. We handle everything from planning to deployment, ensuring a seamless online presence that grows with your business", whatWeNeed: [ "Project requirements document", "Content and assets", "Hosting preferences", "Target audience information", ], whatYouGet: [ "Custom website development", "CMS integration", "Analytics setup", "1 month support", "Performance optimization", "Security implementation", "Training documentation", ], }, ] return (

) } 2d:T9b9,"use client" import React from "react" import { PricingSection } from "@/components/reframeui/blocks/pricing-section" export default function PricingSectionDemo() { const demoPricingOptions = [ { id: "landing", title: "Landing Pages", price: 260, delivery: "4 Days Delivery", description: "Create high-converting landing pages that drive results. Perfect for product launches, marketing campaigns, or lead generation", whatWeNeed: [ "Marketing goals and target audience", "Key messaging and value propositions", "Brand assets and content", ], whatYouGet: [ "Conversion-focused design", "Mobile-first approach", "Fast loading speed", "Analytics integration", "A/B testing setup", ], }, { id: "revamp", title: "Website Revamp", price: 400, delivery: "7 Days Delivery", description: "Transform your existing website with modern design and improved user experience. We'll enhance your online presence while maintaining your brand identity and improving conversion rates", whatWeNeed: [ "Current website URL or screenshots", "Brief of desired improvements", "Brand guidelines (if any)", "Analytics data (if available)", ], whatYouGet: [ "Complete website redesign", "Mobile-responsive design", "Performance optimization", "SEO improvements", "User experience enhancements", "Conversion rate optimization", ], }, { id: "complete", title: "Complete Project", price: 800, delivery: "15 Days Delivery", description: "Full website development from concept to launch with custom functionality. We handle everything from planning to deployment, ensuring a seamless online presence that grows with your business", whatWeNeed: [ "Project requirements document", "Content and assets", "Hosting preferences", "Target audience information", ], whatYouGet: [ "Custom website development", "CMS integration", "Analytics setup", "1 month support", "Performance optimization", "Security implementation", "Training documentation", ], }, ] return (

) } 24:["$","section",null,{"className":"flex flex-col gap-6","children":["$","$L2a",null,{"shadcnUrl":"https://ui.thommysart.me/r/pricing-section.json","componentId":"pricing-section","componentCode":"$2b","previewCodeForGate":"$2c","demoCode":"$2d","isPro":false,"hasAccess":true,"token":null,"authRedirect":"/auth?redirect=/docs/blocks/pricing-section","tier":"FREE"}]}] 2f:T9b9,"use client" import React from "react" import { PricingSection } from "@/components/reframeui/blocks/pricing-section" export default function PricingSectionDemo() { const demoPricingOptions = [ { id: "landing", title: "Landing Pages", price: 260, delivery: "4 Days Delivery", description: "Create high-converting landing pages that drive results. Perfect for product launches, marketing campaigns, or lead generation", whatWeNeed: [ "Marketing goals and target audience", "Key messaging and value propositions", "Brand assets and content", ], whatYouGet: [ "Conversion-focused design", "Mobile-first approach", "Fast loading speed", "Analytics integration", "A/B testing setup", ], }, { id: "revamp", title: "Website Revamp", price: 400, delivery: "7 Days Delivery", description: "Transform your existing website with modern design and improved user experience. We'll enhance your online presence while maintaining your brand identity and improving conversion rates", whatWeNeed: [ "Current website URL or screenshots", "Brief of desired improvements", "Brand guidelines (if any)", "Analytics data (if available)", ], whatYouGet: [ "Complete website redesign", "Mobile-responsive design", "Performance optimization", "SEO improvements", "User experience enhancements", "Conversion rate optimization", ], }, { id: "complete", title: "Complete Project", price: 800, delivery: "15 Days Delivery", description: "Full website development from concept to launch with custom functionality. We handle everything from planning to deployment, ensuring a seamless online presence that grows with your business", whatWeNeed: [ "Project requirements document", "Content and assets", "Hosting preferences", "Target audience information", ], whatYouGet: [ "Custom website development", "CMS integration", "Analytics setup", "1 month support", "Performance optimization", "Security implementation", "Training documentation", ], }, ] return (

) } 25:["$","section",null,{"className":"flex flex-col gap-3","children":[["$","h2",null,{"className":"font-manrope font-bold tracking-[-0.03em] text-[20px] text-foreground","children":"Usage"}],["$","$L2e",null,{"code":"$2f","filename":"pricing-section-usage.tsx"}]]}] 26:["$","section",null,{"className":"flex flex-col gap-3","children":[["$","h2",null,{"className":"font-manrope font-bold tracking-[-0.03em] text-[20px] text-foreground","children":"Props"}],["$","div",null,{"className":"overflow-hidden rounded-[16px] border border-border","children":["$","div",null,{"className":"w-full bg-card","children":["$","$L30",null,{"className":"min-w-[720px]","children":[["$","$L31",null,{"className":"bg-muted","children":["$","$L32",null,{"className":"hover:bg-muted border-border","children":[["$","$L33",null,{"className":"p-4 font-mono-montreal text-[11px] tracking-[0.08em] uppercase text-muted-foreground whitespace-nowrap","children":"Name"}],["$","$L33",null,{"className":"p-4 font-mono-montreal text-[11px] tracking-[0.08em] uppercase text-muted-foreground whitespace-nowrap","children":"Type"}],["$","$L33",null,{"className":"p-4 font-mono-montreal text-[11px] tracking-[0.08em] uppercase text-muted-foreground whitespace-nowrap","children":"Default"}],["$","$L33",null,{"className":"p-4 font-mono-montreal text-[11px] tracking-[0.08em] uppercase text-muted-foreground whitespace-nowrap","children":"Required"}],["$","$L33",null,{"className":"p-4 font-mono-montreal text-[11px] tracking-[0.08em] uppercase text-muted-foreground whitespace-nowrap min-w-[280px]","children":"Description"}]]}]}],["$","$L34",null,{"children":[["$","$L32","pricingOptions",{"className":"border-border hover:bg-muted/50","children":[["$","$L35",null,{"className":"p-4 font-cascadia text-[13px] font-medium text-foreground whitespace-nowrap","children":"pricingOptions"}],["$","$L35",null,{"className":"p-4 whitespace-nowrap","children":["$","span",null,{"data-slot":"badge","className":"items-center justify-center rounded-md px-2 py-0.5 font-medium w-fit shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden [a&]:hover:bg-secondary/90 bg-muted border border-border font-cascadia text-[12px] text-foreground whitespace-nowrap max-w-[180px] truncate inline-flex","children":"PricingOption[]"}]}],["$","$L35",null,{"className":"p-4 whitespace-nowrap","children":["$","span",null,{"className":"font-cascadia text-xs bg-muted border border-border rounded-full px-2.5 py-1 text-muted-foreground whitespace-nowrap","children":["$","span",null,{"className":"text-muted-foreground/50 italic","children":"—"}]}]}],["$","$L35",null,{"className":"p-4 whitespace-nowrap","children":["$","span",null,{"className":"inline-flex items-center rounded-full bg-red-500 text-white px-2.5 py-1 text-[11px] font-bold tracking-wide whitespace-nowrap","children":"Yes"}]}],["$","$L35",null,{"className":"p-4 font-manrope text-[13px] leading-relaxed text-muted-foreground whitespace-normal break-words min-w-[240px] max-w-[380px]","children":"List of pricing options to render as tabs and detailed cards."}]]}],["$","$L32","className",{"className":"border-border hover:bg-muted/50","children":[["$","$L35",null,{"className":"p-4 font-cascadia text-[13px] font-medium text-foreground whitespace-nowrap","children":"className"}],["$","$L35",null,{"className":"p-4 whitespace-nowrap","children":["$","span",null,{"data-slot":"badge","className":"items-center justify-center rounded-md px-2 py-0.5 font-medium w-fit shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden [a&]:hover:bg-secondary/90 bg-muted border border-border font-cascadia text-[12px] text-foreground whitespace-nowrap max-w-[180px] truncate inline-flex","children":"string"}]}],"$L36","$L37","$L38"]}]]}]]}]}]}]]}] 27:["$","div",null,{"className":"flex items-center gap-3 pt-6 border-t border-border justify-between","children":[["$","$L39",null,{"href":"/docs/immersive/water-ripple","children":["$","$L3a",null,{"frontText":"Water Ripple Text","backText":"Water Ripple Text","variant":"ghost","size":"default","icon":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-chevron-left size-4","aria-hidden":"true","children":[["$","path","1wnfg3",{"d":"m15 18-6-6 6-6"}],"$undefined"]}],"className":"!px-5 !py-2.5 !text-[13px] !rounded-full border border-border"}]}],["$","$L39",null,{"href":"/docs/blocks/invoice-pricing","children":["$","$L3a",null,{"frontText":"Invoice Pricing","backText":"Invoice Pricing","variant":"amber","size":"default","icon":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-chevron-right size-4","aria-hidden":"true","children":[["$","path","mthhwq",{"d":"m9 18 6-6-6-6"}],"$undefined"]}],"className":"!px-5 !py-2.5 !text-[13px] !rounded-full"}]}]]}] 28:["$","div",null,{"className":"flex flex-col md:flex-row items-center justify-between gap-3 border-t border-border pt-6","children":[["$","span",null,{"className":"font-mono-montreal text-[11px] tracking-[0.14em] uppercase text-muted-foreground","children":["© reframe/ui ",2026]}],["$","span",null,{"className":"font-mono-montreal text-[11px] tracking-wide text-muted-foreground","children":["Built by ",["$","a",null,{"href":"https://twitter.com/thommysart","className":"underline decoration-border hover:text-foreground","target":"_blank","children":"@thommysart"}]]}]]}] 29:["$","$L3b",null,{"categoryId":"blocks","categoryName":"Pricing & Sections","currentId":"pricing-section","components":[{"id":"pricing-section","name":"Pricing Section","src":"@/components/reframeui/blocks/pricing-section/pricing-section.tsx","demoSrc":"@/components/reframeui/blocks/pricing-section/pricing-section-demo.tsx","props":[{"id":"pricingOptions","name":"pricingOptions","type":"PricingOption[]","description":"List of pricing options to render as tabs and detailed cards.","required":true},{"id":"className","name":"className","type":"string","description":"Optional className for the section root.","required":false}],"deps":["lucide-react"],"tier":"FREE","categoryId":"blocks","categoryName":"Pricing & Sections","video":"https://t90qbbxdsu.ufs.sh/f/JpRsMSGdnCqMKWraHoZkgVbMiSCW9mXUlAPOFnhcT2IDKjBH","files":[{"path":"src/components/reframeui/blocks/pricing-section/pricing-section.tsx","type":"registry:component"}]},{"id":"invoice-pricing","name":"Invoice Pricing","tag":["Premium","New"],"src":"@/components/reframeui/blocks/invoice-pricing/invoice-pricing.tsx","demoSrc":"@/components/reframeui/blocks/invoice-pricing/invoice-pricing-demo.tsx","props":[{"id":"plans","name":"plans","type":"InvoicePlan[]","description":"Billing plans (e.g. quarterly/yearly) with monthlyPrice, totalPrice, badge.","required":true},{"id":"features","name":"features","type":"InvoiceFeature[]","description":"Perk list displayed left of the receipt.","required":false},{"id":"eyebrow","name":"eyebrow","type":"React.ReactNode","description":"Small eyebrow above the title.","required":false},{"id":"title","name":"title","type":"React.ReactNode","description":"Main heading (first line).","required":false},{"id":"titleAccent","name":"titleAccent","type":"React.ReactNode","description":"Accent second line of heading.","required":false},{"id":"receiptTitle","name":"receiptTitle","type":"string","description":"Receipt header title (e.g. REFRAME / UI).","required":false},{"id":"receiptSubtitle","name":"receiptSubtitle","type":"string","description":"Receipt subtitle.","required":false},{"id":"receiptMeta","name":"receiptMeta","type":"ReceiptMeta","description":"Meta row: date, time, receiptNo, reg, itemsCount.","required":false},{"id":"itemTitle","name":"itemTitle","type":"string","description":"Line-item title.","required":false},{"id":"itemSubtitle","name":"itemSubtitle","type":"React.ReactNode","description":"Line-item description.","required":false},{"id":"ctaHref","name":"ctaHref","type":"string","description":"CTA link href.","required":false},{"id":"ctaLabel","name":"ctaLabel","type":"string | ((plan: InvoicePlan) => string)","description":"CTA label or function of selected plan.","required":false},{"id":"ctaSlot","name":"ctaSlot","type":"React.ReactNode","description":"Custom CTA node (overrides ctaHref/label).","required":false},{"id":"defaultPlanId","name":"defaultPlanId","type":"string","description":"Initial selected plan id.","required":false},{"id":"value","name":"value","type":"string","description":"Controlled selected plan id.","required":false},{"id":"onValueChange","name":"onValueChange","type":"(id: string) => void","description":"Called when plan changes.","required":false},{"id":"barcodeText","name":"barcodeText","type":"string | ((plan: InvoicePlan, meta: ReceiptMeta) => string)","description":"Barcode caption.","required":false},{"id":"className","name":"className","type":"string","description":"Wrapper class for the section.","required":false},{"id":"withPerks","name":"withPerks","type":"boolean","default":true,"description":"Show perks column.","required":false},{"id":"showTransitionBar","name":"showTransitionBar","type":"boolean","default":true,"description":"Show bottom black rounded bar.","required":false}],"deps":["motion","lucide-react"],"tier":"PREMIUM","categoryId":"blocks","categoryName":"Pricing & Sections","video":"https://t90qbbxdsu.ufs.sh/f/JpRsMSGdnCqM5dMvRJ0itJGzaUIEpjfkHS4LmR9vgCQxYVr2","files":[{"path":"src/components/reframeui/blocks/invoice-pricing/invoice-pricing.tsx","type":"registry:component"}]},{"id":"partner-flip-grid","name":"Partner Flip Grid","tag":["Pro","New"],"src":"@/components/reframeui/blocks/partner-flip-grid/partner-flip-grid.tsx","demoSrc":"@/components/reframeui/blocks/partner-flip-grid/partner-flip-grid-demo.tsx","props":[{"id":"logos","name":"logos","type":"PartnerLogo[]","description":"Array of partner logos - each entry accepts `src` (URL) or `node`/`icon` (SVG component) e.g. `{alt: 'Notion', src: 'https://...'}` or `{alt: 'Vercel', icon: VercelIcon}` or `{alt: 'Notion', node: }`.","required":true},{"id":"interval","name":"interval","type":"number","default":2200,"description":"Ms between flips.","required":false},{"id":"columns","name":"columns","type":"number","default":6,"description":"Logos per row.","required":false},{"id":"rowHeight","name":"rowHeight","type":"string","default":"6rem","description":"Height of each row.","required":false},{"id":"autoPlay","name":"autoPlay","type":"boolean","default":true,"description":"Auto flip.","required":false},{"id":"pauseOnHover","name":"pauseOnHover","type":"boolean","default":true,"description":"Pause on hover.","required":false},{"id":"className","name":"className","type":"string","description":"Wrapper class.","required":false}],"deps":["gsap"],"tier":"PRO","categoryId":"blocks","categoryName":"Pricing & Sections","video":"https://t90qbbxdsu.ufs.sh/f/JpRsMSGdnCqMgY0a6QD2NPhSkJ7M4IXyqvUzlo3HEs6eRc9A","files":[{"path":"src/components/reframeui/blocks/partner-flip-grid/partner-flip-grid.tsx","type":"registry:component"}]},{"id":"animated-circular-progress-bar","name":"Animated Circular Progress Bar","src":"@/components/reframeui/blocks/animated-circular-progress-bar/animated-circular-progress-bar.tsx","demoSrc":"@/components/reframeui/blocks/animated-circular-progress-bar/animated-circular-progress-bar-demo.tsx","props":[{"id":"max","name":"max","type":"number","description":"Maximum value for the progress bar","required":false},{"id":"min","name":"min","type":"number","description":"Minimum value for the progress bar","required":false},{"id":"value","name":"value","type":"number","description":"Current value for the progress bar","required":false},{"id":"gaugePrimaryColor","name":"gaugePrimaryColor","type":"string","description":"Color of the primary gauge","required":false},{"id":"gaugeSecondaryColor","name":"gaugeSecondaryColor","type":"string","description":"Color of the secondary gauge","required":false},{"id":"className","name":"className","type":"string","description":"Additional CSS classes for styling","required":false}],"deps":[],"tier":"FREE","categoryId":"blocks","categoryName":"Pricing & Sections","video":"https://t90qbbxdsu.ufs.sh/f/JpRsMSGdnCqMYk7Yap05NVy96Ddb0azvo2QrukLHcUeXCqEi","files":[{"path":"src/components/reframeui/blocks/animated-circular-progress-bar/animated-circular-progress-bar.tsx","type":"registry:component"}]}]}]

Name	Type	Default	Required	Description
pricingOptions	PricingOption[]	—	Yes	List of pricing options to render as tabs and detailed cards.
className	string	—	No	Optional className for the section root.

Pricing Section

Installation

Install via shadcn

Usage

Props