📦 Pricing Plan UI — React + Tailwind Component

A fully customizable and reusable Pricing Plan UI component built with React, TypeScript, TailwindCSS, and Lucide icons. Perfect for integrating beautiful pricing sections into any React project with minimal setup.

🚀 Installation npm install pricing-plan-ui

or

yarn add pricing-plan-ui

🧠 Note: This package requires your project to have TailwindCSS and React 18+ already configured.

🧩 Usage Import and use in your project: import React from "react"; import { Pricing } from "pricing-plan-ui";

const plans = [ { name: "Starter", price: "$29", period: "/month", description: "Perfect for individuals and small teams", features: ["5 campaigns", "10,000 emails/month", "Basic analytics"], }, { name: "Pro", price: "$79", period: "/month", description: "Ideal for growing businesses", features: ["Unlimited campaigns", "Advanced analytics", "Priority support"], popular: true, }, { name: "Enterprise", price: "$199", period: "/month", description: "For large organizations with advanced needs", features: ["Dedicated manager", "Custom integrations", "Unlimited users"], }, ];

function App() { return ( ); }

export default App;

⚙️ Props Reference Prop Name Type Default Value Description title string "Simple, Transparent Pricing" Main heading text shown at the top. subtitle string "Choose the perfect plan for your needs." Subtext shown below the title. plans Plan[] (required) — Array of plan objects (see below). accentColor string "from-blue-600 to-purple-600" Tailwind gradient color used for highlights. ctaTitle string "Ready to get started?" CTA (call-to-action) section heading. ctaSubtitle string "Join thousands of users using our platform." CTA subtext. ctaButton string "Start Free Trial" CTA button text. 🧱 Plan Object Structure

Each plan in the plans array should follow this interface:

interface Plan { name: string; // Plan name (e.g., Starter) price: string; // Plan price (e.g., $29) period?: string; // Optional billing period (e.g., /month) description: string; // Short plan description features: string[]; // List of features popular?: boolean; // Highlight this plan as "Most Popular" }

🎨 Customization Examples Change Accent Colors

You can customize the gradient theme with Tailwind classes:

Add Your Own CTA Text