🚀 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] alt text

✨ 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
}}