npm package: @nitish002/order-summary-ui
Description: A reusable React Order Summary UI component built with Tailwind CSS
Author: Nitish Sharma
Latest version: 2.0.0

🧾 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 (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center p-6">
      <OrderSummary
        title="Order Summary"
        planName="Enterprise Plan"
        price={1999}
        currency="₹"
        badge="PREMIUM"
        type="Subscription"
        icon={<Sparkles size={24} />}
        colorScheme="blue"
        features={[
          { icon: "📊", text: "Unlimited Campaigns" },
          { icon: "📧", text: "Unlimited Emails" },
          { icon: "🔗", text: "Custom Integrations" },
          { icon: "👨‍💼", text: "Dedicated Manager" },
        ]}
        confirmLabel="Confirm Subscription"
        onConfirm={handleConfirm}
      />
    </div>
  );
};

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