Pricing

The Pricing component accepts the following props:

• pricingPlans (array of PricingPlan, required): An array of PricingPlan objects representing the pricing plans and their details.

PricingPlan

The PricingPlan interface has the following structure:

interface PricingPlan {
  price: string;
  duration: string;
  title: string;
  description: string;
  features: string[];
}

• price (string, required): The price of the plan.

• duration (string, required): The duration of the plan.

• title (string, required): The title of the plan.

• description (string, required): The description of the plan.

• features (array of strings, required): An array of features included in the plan.

Usage Example

<Pricing pricingPlans={[
  {
    price: '$10',
    duration: '/month',
    title: 'Small Pack',
    description: 'Lorem ipsum dolor sit amet, consec adipisicing elit.',
    features: [
      '300 GB Storage',
      'Unlimited Photos and Videos',
      'Exclusive Support',
      'Custom Branding Strategy',
    ],
  },
  {
    price: '$59',
    duration: '/month',
    title: 'Medium Pack',
    description: 'Lorem ipsum dolor sit amet, consec adipisicing elit.',
    features: [
      '300 GB Storage',
      'Unlimited Photos and Videos',
      'Exclusive Support',
      'Custom Branding Strategy',
    ],
  },
  {
    price: '$189',
    duration: '/month',
    title: 'Large Pack',
    description: 'Lorem ipsum dolor sit amet, consec adipisicing elit.',
    features: [
      '300 GB Storage',
      'Unlimited Photos and Videos',
      'Exclusive Support',
      'Custom Branding Strategy',
    ],
  },
]} />

In the example above, the Pricing component is used to render a section with pricing plans. The pricingPlans prop is passed an array of PricingPlan objects containing the pricing details. You can customize the pricing plans by modifying the data passed to the pricingPlans prop.

Styling

The Pricing component uses Tailwind CSS utility classes for styling. You can customize the component's appearance by modifying these classes or extending them with your own styles.

For more information on Tailwind CSS, refer to the official documentation: Tailwind CSS Documentation