Pricing options
Use the pricing options to display pricing plan information on a page.
Copilot in the coding environment.
$10USD$20per month / $100 per year
Copilot personalized to your organization throughout the software development lifecycle. Requires GitHub Enterprise Cloud.
$39USD$49per user / month
Copilot in the coding environment.
$10USDper month / $100 per year
Copilot personalized to your organization throughout the software development lifecycle. Requires GitHub Enterprise Cloud.
$39USDper user / month
This is the one-option layout for the pricing options component
Code completions, Chat, and more for indie developers and freelancers.
$10USDper month / $100 per year
This is the two-item layout for the pricing options component.
Copilot in the coding environment.
$10USDper month / $100 per year
Copilot personalized to your organization throughout the software development lifecycle. Requires GitHub Enterprise Cloud.
$39USDper user / month
This is the three-option layout for the pricing options component.
PricingOptions is designed to fill the width of the page's main container,
thus it cannot be accurately represented within the narrower container of this
documentation.
Please refer to our Storybook examples to see the component in a full-width context as originally intended.
Use PricingOptions.FeatureListHeading to group feature items together.
Code completions, Chat, and more for indie developers and freelancers.
$10USDper month / $100 per year
Free for verified students, teachers, and maintainers of popular open source projects.
Copilot personalized to your organization.
$19USDper user / month
Use PricingOptions.FeatureListItem with variant="included" and variant="excluded" to list included and excluded features.
Code completions, Chat, and more for indie developers and freelancers.
$10USDper month / $100 per year
Free for verified students, teachers, and maintainers of popular open source projects.
Copilot personalized to your organization throughout the software development lifecycle. Requires GitHub Enterprise Cloud.
$39USDper user / month
| Name | Type | Default | required | Description |
|---|---|---|---|---|
as | 'section''div' | section | false | Applies the underlying HTML element |
children | PricingOptions.Item | true | Applies the underlying HTML element | |
variant | 'default''cards' | false | The variant styling |
One item per pricing plan to be displayed. Maximum of 3 items.
| Name | Type | Default | required | Description |
|---|---|---|---|---|
children | 'PricingOptions.Heading''PricingOptions.Label''PricingOptions.Price''PricingOptions.FeatureList''PricingOptions.Footnote' | undefined | true | The contents of the item |
| Name | Type | Default | required | Description |
|---|---|---|---|---|
as | h3, h4, h5, h6 | h3 | false | Applies the underlying HTML heading level element |
children | ReactNode | undefined | true | The heading of the item |
| Name | Type | Default | required | Description |
|---|---|---|---|---|
children | ReactNode | undefined | true | The label of the item |
| Name | Type | Default | required | Description |
|---|---|---|---|---|
children | ReactNode | undefined | true | The description of the item |
| Name | Type | Default | required | Description |
|---|---|---|---|---|
children | ReactNode | undefined | true | The price of the item |
currencyCode | string | USD | false | The currency code |
currencySymbol | string | $ | false | The currency symbol |
originalPrice | string | undefined | false | The initial price before any discounts are applied |
trailingText | string | false | The trailing text |
| Name | Type | Default | required | Description |
|---|---|---|---|---|
children | 'PricingOptions.Heading''PricingOptions.Item' | undefined | true | The list of features |
expanded | boolean | true | false | Controls visibility of feature items. Accepts Object type for granular control at different viewport sizes. |
hasDivider | boolean | true | false | Controls visibility of a visual border between feature lists and adjacent actions |
| Name | Type | Default | required | Description |
|---|---|---|---|---|
as | h4, h5, h6 | h4 | false | Applies the underlying HTML heading level element |
children | ReactNode | undefined | true | The heading of the feature list set |
| Name | Type | Default | required | Description |
|---|---|---|---|---|
children | ReactNode | undefined | true | The item of the feature list set |
variant | 'included''excluded' | included | false | The variant of the feature list set |
| Name | Type | Default | required | Description |
|---|---|---|---|---|
children | ReactNode | undefined | true | The footnote of the item |