1# PricingPlan
2 
3A customizable pricing plan to display in a pricing page.
4 
5## Key Props
6 
7- `title`: to set the title of the PricingPlan.
8- `description`: to set the description of the PricingPlan.
9- `badge`: to display a [Badge](/docs/components/badge) next to the title of the PricingPlan.
10- `price`: to set the price of the PricingPlan.
11- `discount`: to set a discounted price that will be displayed alongside the original price (which will be shown with a strikethrough).
12- `features`: as an array of string to display a list of features on the PricingPlan:
13 
14## ::component-code
15 
16prettier: true
17hide:
18 
19- class
20  ignore:
21- title
22- description
23- price
24- features
25  props:
26  title: 'Solo'
27  description: 'For bootstrappers and indie hackers.
28- `button`: with any property from the [Button](/docs/components/button) component to display a button at the bottom of the PricingPlan.
29- `variant`: to change the variant of the PricingPlan.
30- `orientation`: to change the orientation of the PricingPlan.
31- `tagline`: to display a tagline text above the price.
32 
33## Usage
34 
35```vue
36<UPricingPlan
37  <!-- props here -->
38/>
39```
40