🧾 Order Summary UI Component

A sleek and modern Order Summary Card built with React, TypeScript, and Tailwind CSS — perfect for checkout, pricing, and subscription summary UIs.

🚀 Installation 1️⃣ Install via npm npm install order-summary-ui

or using yarn:

yarn add order-summary-ui

⚡ Quick Start Import the component into your React project: import React from "react"; import { Sparkles } from "lucide-react"; import OrderSummary from "order-summary-ui"; import "order-summary-ui/dist/style.css"; // 👈 important: include styles

Example Usage const App = () => { const handleConfirm = () => { window.location.href = https://billing.example.com?plan=Enterprise&price=1999; };

return ( <OrderSummary title="Order Summary" planName="Enterprise Plan" price={1999} currency="₹" badge="PREMIUM" type="Subscription" icon={} colorScheme="blue" features={[ { icon: "📊", text: "Unlimited Campaigns" }, { icon: "📧", text: "Unlimited Emails" }, { icon: "🔗", text: "Custom Integrations" }, { icon: "👨‍💼", text: "Dedicated Manager" }, ]} confirmLabel="Confirm Subscription" onConfirm={handleConfirm} /> ); };

export default App;

🧩 Props Prop Type Default Description title string "Order Summary" Title of the card planName string "Selected Plan" Product or plan name price string | number — Displayed price currency string "₹" Currency symbol badge string — Badge label (e.g. PREMIUM) type string — Plan type or description icon React.ReactNode — Header icon colorScheme "blue" | "purple" | "pink" | "red" | "green" "blue" Theme color features Feature[] [] Feature list onConfirm () => void — Confirm button click handler onClose () => void — Optional close button confirmLabel string "Confirm Order" Confirm button text Feature Type interface Feature { icon?: string; text: string; }

🎨 Color Schemes Scheme Gradient Badge Color blue from-blue-600 → to-indigo-600 bg-blue-600 purple from-purple-600 → to-pink-600 bg-purple-600 pink from-pink-600 → to-rose-600 bg-pink-600 red from-red-600 → to-orange-600 bg-red-600 green from-green-600 → to-emerald-600 bg-green-600 🖼️ Preview +-------------------------------------------------------------+ | 💎 Order Summary × | | ------------------------------------------------------------ | | Enterprise Plan PREMIUM | | ₹1999 | | Included Features: | | 📊 Unlimited Campaigns 📧 Unlimited Emails | | 🔗 Custom Integrations 👨‍💼 Dedicated Manager | | ------------------------------------------------------------ | | [ Confirm Subscription ] | +-------------------------------------------------------------+

🧰 Tech Stack

React + TypeScript — Component logic

Tailwind CSS — Styling and gradients

Lucide React — Icons