🚀 React Price Switcher

A flexible and animated pricing plan switcher component built with React and Framer Motion. Supports multiple plans, dark mode, AI-powered plan recommendation, and savings calculation.

![screenshot]

✨ Features

• 💡 AI-powered plan recommendation (optional)
• 💸 Auto savings calculation (yearly vs monthly)
• 🌗 Light/Dark theme toggle
• ⚡ Smooth animations with Framer Motion
• 🎨 Customizable colors and layout
• 📦 Easy to integrate into any React app

📦 Installation

npm install react-price-switcher

✨ Basic Usage

import React from "react";
import { PricingSwitch } from 'react-price-switcher';
import 'react-price-switcher/style.css';

function App() {
  return <PricingSwitch />;
}

With Custom props

<PricingSwitch
  plans={[
    {
      id: "monthly",
      type: "Monthly",
      price: 15,
      description: "For small teams",
      features: ["1 GB storage", "Email support"],
      cta: "Start Monthly"
    },
    {
      id: "yearly",
      type: "Yearly",
      price: 150,
      description: "Save more with yearly",
      features: ["10 GB storage", "Priority support"],
      cta: "Start Yearly",
      badge: "Recommended"
    }
  ]}
  defaultSelectedPlan="yearly"
  showDarkModeToggle={true}
  showRecommendation={true}
  recommendationDelay={3000}
  showSavingsBanner={true}
  theme={{
    primaryColor: "#4f46e5",
    darkMode: false
  }}
/>

Props

| Prop | Type | Default | Description | | --------------------- | --------------- | ---------- | ---------------------------------------- | | plans | PricingPlan[] | [] | Array of pricing plans to display | | defaultSelectedPlan | string | "yearly" | ID of default selected plan | | showDarkModeToggle | boolean | true | Show or hide dark mode toggle | | showRecommendation | boolean | true | Enable AI recommendation logic | | recommendationDelay | number | 5000 | Time (in ms) to show recommended plan | | showSavingsBanner | boolean | true | Show a banner showing savings | | theme | object | {} | Customize primary color, dark mode, etc. |

Plan Object Format

type PricingPlan = {
  id: string;
  type: string;
  price: number;
  description: string;
  features: string[];
  cta: string;
  badge?: string;
};

##🎨 Theme Customization

theme={{
  primaryColor: "#4f46e5",
  secondaryColor: "#a5b4fc",
  textColor: "#111827",
  cardBackground: "#f9fafb",
  darkMode: false
}}