PricingPlan

A customizable pricing plan to display in a pricing page.

Key Props

• title: to set the title of the PricingPlan.
• description: to set the description of the PricingPlan.
• badge: to display a Badge next to the title of the PricingPlan.
• price: to set the price of the PricingPlan.
• discount: to set a discounted price that will be displayed alongside the original price (which will be shown with a strikethrough).
• features: as an array of string to display a list of features on the PricingPlan:

::component-code

prettier: true hide:

• class

ignore:

• title
• description
• price
• features

props: title: 'Solo' description: 'For bootstrappers and indie hackers.

• button: with any property from the Button component to display a button at the bottom of the PricingPlan.
• variant: to change the variant of the PricingPlan.
• orientation: to change the orientation of the PricingPlan.
• tagline: to display a tagline text above the price.

Usage

<UPricingPlan
  <!-- props here -->
/>