@veeyaainnovatives/pricing-card

A reusable Pricing/Subscription card component for React applications.

Features

• 💳 Flexible pricing display (single price or range)
• 🎨 Customizable card variants
• 📋 Support for features/sections with items
• 🔧 Highly configurable with CSS classes
• 💰 Built-in price formatting
• 📱 Fully responsive

Installation

npm install @veeyaainnovatives/pricing-card

Peer Dependencies

This package requires the following peer dependencies:

• react (^16.8.0 || ^17.0.0 || ^18.0.0)
• react-dom (^16.8.0 || ^17.0.0 || ^18.0.0)
• react-bootstrap (^2.0.0)

Usage

Basic Example

import { PricingCard } from '@veeyaainnovatives/pricing-card';

function App() {
  const handleClick = (id, title) => {
    console.log('Selected plan:', id, title);
  };

  return (
    <PricingCard 
      id={1}
      title="Basic Plan"
      shortDescription="Perfect for individuals"
      startPrice={6999}
      endPrice={12999}
      priceUnit="month"
      onButtonClick={handleClick}
    />
  );
}

Advanced Example with Features

import { PricingCard } from '@veeyaainnovatives/pricing-card';

function App() {
  const plan = {
    id: 1,
    title: "Pro Plan",
    shortDescription: "For growing businesses",
    mainDescription: "Everything you need to scale",
    startPrice: 18000,
    endPrice: 45000,
    priceUnit: "month",
    sections: [
      {
        title: "Features",
        items: [
          "Unlimited projects",
          "Priority support",
          "Advanced analytics",
          "Custom integrations"
        ]
      },
      {
        title: "Support",
        items: [
          "24/7 email support",
          "Phone support",
          "Dedicated account manager"
        ]
      }
    ]
  };

  return (
    <PricingCard 
      {...plan}
      onButtonClick={(id, title) => handleSubscribe(id, title)}
      variant="middle"
    />
  );
}

With Custom Formatting

import { PricingCard } from '@veeyaainnovatives/pricing-card';

function App() {
  const customFormatPrice = (price) => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
      minimumFractionDigits: 0
    }).format(price);
  };

  return (
    <PricingCard 
      id={1}
      title="Elite Plan"
      startPrice={75000}
      priceUnit="month"
      formatPrice={customFormatPrice}
      onButtonClick={handleClick}
    />
  );
}

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | id | string\|number | Yes | - | Unique identifier for the card | | title | string | No | "Plan" | Plan title | | shortDescription | string | No | - | Short description/subtitle | | mainDescription | string | No | - | Main description text | | startPrice | string\|number | No | - | Starting price | | endPrice | string\|number | No | - | Ending price (for price range) | | priceUnit | string | No | - | Price unit (e.g., "month", "year") | | sections | array | No | [] | Array of sections with items | | sections[].title | string | No | - | Section title | | sections[].items | array | No | - | Array of feature items (strings) | | buttonText | string | No | "Get Started" | Button text | | onButtonClick | function | No | - | Button click handler (id, title) => void | | variant | string | No | - | Card variant ("left", "middle", "right", or custom) | | className | string | No | "" | Additional CSS classes for the card | | titleClassName | string | No | "plan-title theme-color-green" | CSS classes for the title | | priceClassName | string | No | "price-text" | CSS classes for the price | | buttonClassName | string | No | "pricing-btn w-100 mt-3" | CSS classes for the button | | formatPrice | function | No | - | Custom price formatter (price) => string |

Data Structure

Basic Plan Object

{
  id: 1,
  title: "Basic Plan",
  shortDescription: "Perfect for individuals",
  mainDescription: "All essential features",
  startPrice: 6999,
  endPrice: 12999,
  priceUnit: "month"
}

Plan with Features

{
  id: 2,
  title: "Pro Plan",
  shortDescription: "For growing businesses",
  startPrice: 18000,
  priceUnit: "month",
  sections: [
    {
      title: "Features",
      items: [
        "Feature 1",
        "Feature 2",
        "Feature 3"
      ]
    }
  ]
}

Styling

The component uses the following default CSS classes:

• .pricing-card - Main card container
• .plan-title - Title heading
• .plan-subtitle - Short description
• .price-text - Price display
• .pricing-btn - Button
• .features - Features list container

You can override these styles or add custom classes using the className props. Make sure to include your CSS styles in your application.

Variant Classes

The component supports variant classes for different card styles:

• left-card - Left card variant (dark)
• middle-card - Middle card variant (highlighted)
• right-card - Right card variant (light)

You can pass these via the variant prop or use custom CSS classes.

Price Formatting

By default, prices are formatted using Indian locale (en-IN) with no decimal places. You can provide a custom formatter function via the formatPrice prop.

License

MIT

Author

Veeyaa Innovatives