"use client"; import { cn } from "@/lib/utils"; import NumberFlow from "@number-flow/react"; import { AnimatePresence, motion } from "framer-motion"; import { CheckIcon } from "lucide-react"; import { useState } from "react"; import { Button } from "@/components/ui/button"; type PlanType = "monthly" | "annually"; export interface PLAN { id: string; title: string; desc: string; monthlyPrice: number; annuallyPrice: number; badge?: string; buttonText: string; features: string[]; link: string; } interface PricingFlowProps { plans?: PLAN[]; defaultBillPlan?: PlanType; } export const DEFAULT_PLANS: PLAN[] = [ { id: "starter", title: "Starter", desc: "Ideal for developers and indie hackers building with Ruixen UI for personal or small commercial projects.", monthlyPrice: 29, annuallyPrice: 306, buttonText: "Get Starter Access", features: [ "Access to 50+ UI components", "Tailwind-compatible styling", "Basic theming support", "Starter templates (blog, dashboard)", "1 project license", "Community support", "Early access to updates", ], link: "#", }, { id: "pro", title: "Pro", desc: "Designed for teams and startups who need advanced UI components, theme customization, and premium support.", monthlyPrice: 79, annuallyPrice: 834, badge: "Best Value", buttonText: "Upgrade to Pro", features: [ "Access to 100+ production-grade components", "Advanced theming & dark mode", "Code snippets & layout presets", "Figma design system access", "Commercial use for up to 10 projects", "Priority GitHub issue support", "Team collaboration tools", ], link: "#", }, ]; export function PricingFlow({ plans = DEFAULT_PLANS, defaultBillPlan = "monthly", }: PricingFlowProps) { const [billPlan, setBillPlan] = useState(defaultBillPlan); const handleSwitch = () => { setBillPlan((prev) => (prev === "monthly" ? "annually" : "monthly")); }; return (

{/* Header */}

Pricing

Streamline your creative process with AI. Generate, manage, and publish content — all in one place.

{/* Billing Toggle */}

Monthly Annually

{/* Plans Grid */}

{plans.map((plan) => ( ))}

); } const PlanCard = ({ plan, billPlan }: { plan: PLAN; billPlan: PlanType }) => { return (

{/* Badge Glow */} {plan.badge && (

)} {/* Header */}

{plan.title}

{plan.desc}

{/* Button & Billing */}

{billPlan === "monthly" ? "Billed monthly" : "Billed annually"}

{/* Features */}

Includes: {plan.features.map((feature, idx) => (

{feature}

))}

); };

Pricing Flow

Installation

Usage