Pricing options
Use the pricing options to display pricing plan information on a page.
<PricingOptions><PricingOptions.Item><PricingOptions.Label>Recommended</PricingOptions.Label><PricingOptions.Heading>Copilot</PricingOptions.Heading><PricingOptions.Description>Copilot in the coding environment.</PricingOptions.Description><PricingOptions.PricecurrencySymbol="$"trailingText="per month / $100 per year">10</PricingOptions.Price><PricingOptions.FeatureList><PricingOptions.FeatureListItem>Everything in Copilot Business plus:</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem></PricingOptions.FeatureList><PricingOptions.PrimaryAction href="/buy">Buy now</PricingOptions.PrimaryAction><PricingOptions.SecondaryAction href="/contact">Contact sales</PricingOptions.SecondaryAction></PricingOptions.Item><PricingOptions.Item><PricingOptions.Label>Recommended</PricingOptions.Label><PricingOptions.Heading>Copilot Business</PricingOptions.Heading><PricingOptions.Description>Copilot personalized to your organization throughout the softwaredevelopment lifecycle. Requires GitHub Enterprise Cloud.</PricingOptions.Description><PricingOptions.Price currencySymbol="$" trailingText="per user / month">39</PricingOptions.Price><PricingOptions.FeatureList><PricingOptions.FeatureListItem>Everything in Copilot Business plus:</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem></PricingOptions.FeatureList><PricingOptions.PrimaryAction href="/buy">Join waitlist</PricingOptions.PrimaryAction></PricingOptions.Item></PricingOptions>
<PricingOptions variant="cards"><PricingOptions.Item><PricingOptions.Label>Recommended</PricingOptions.Label><PricingOptions.Heading>Copilot</PricingOptions.Heading><PricingOptions.Description>Copilot in the coding environment.</PricingOptions.Description><PricingOptions.PricecurrencySymbol="$"trailingText="per month / $100 per year">10</PricingOptions.Price><PricingOptions.FeatureList><PricingOptions.FeatureListItem>Everything in Copilot Business plus:</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem></PricingOptions.FeatureList><PricingOptions.PrimaryAction href="/buy">Buy now</PricingOptions.PrimaryAction><PricingOptions.SecondaryAction href="/contact">Contact sales</PricingOptions.SecondaryAction></PricingOptions.Item><PricingOptions.Item><PricingOptions.Label>Recommended</PricingOptions.Label><PricingOptions.Heading>Copilot Business</PricingOptions.Heading><PricingOptions.Description>Copilot personalized to your organization throughout the softwaredevelopment lifecycle. Requires GitHub Enterprise Cloud.</PricingOptions.Description><PricingOptions.Price currencySymbol="$" trailingText="per user / month">39</PricingOptions.Price><PricingOptions.FeatureList><PricingOptions.FeatureListItem>Everything in Copilot Business plus:</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem></PricingOptions.FeatureList><PricingOptions.PrimaryAction href="/buy">Join waitlist</PricingOptions.PrimaryAction></PricingOptions.Item></PricingOptions>
This is the one-option layout for the pricing options component
<PricingOptions><PricingOptions.Item><PricingOptions.Heading>Copilot Individual</PricingOptions.Heading><PricingOptions.Description>Code completions, Chat, and more for indie developers and freelancers.</PricingOptions.Description><PricingOptions.PricecurrencySymbol="$"trailingText="per month / $100 per year">10</PricingOptions.Price><PricingOptions.PrimaryAction href="/buy">Buy now</PricingOptions.PrimaryAction><PricingOptions.SecondaryAction href="/contact">Contact sales</PricingOptions.SecondaryAction></PricingOptions.Item></PricingOptions>
This is the two-item layout for the pricing options component.
<PricingOptions><PricingOptions.Item><PricingOptions.Label>Recommended</PricingOptions.Label><PricingOptions.Heading>Copilot</PricingOptions.Heading><PricingOptions.Description>Copilot in the coding environment.</PricingOptions.Description><PricingOptions.PricecurrencySymbol="$"trailingText="per month / $100 per year">10</PricingOptions.Price><PricingOptions.FeatureList><PricingOptions.FeatureListItem>Everything in Copilot Business plus:</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem></PricingOptions.FeatureList><PricingOptions.PrimaryAction href="/buy">Buy now</PricingOptions.PrimaryAction><PricingOptions.SecondaryAction href="/contact">Contact sales</PricingOptions.SecondaryAction></PricingOptions.Item><PricingOptions.Item><PricingOptions.Label>Recommended</PricingOptions.Label><PricingOptions.Heading>Copilot Business</PricingOptions.Heading><PricingOptions.Description>Copilot personalized to your organization throughout the softwaredevelopment lifecycle. Requires GitHub Enterprise Cloud.</PricingOptions.Description><PricingOptions.Price currencySymbol="$" trailingText="per user / month">39</PricingOptions.Price><PricingOptions.FeatureList><PricingOptions.FeatureListItem>Everything in Copilot Business plus:</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem></PricingOptions.FeatureList><PricingOptions.PrimaryAction href="/buy">Join waitlist</PricingOptions.PrimaryAction></PricingOptions.Item></PricingOptions>
This is the three-option layout for the pricing options component.
<Note>`PricingOptions` is designed to fill the width of the page's main container,thus it cannot be accurately represented within the narrower container of thisdocumentation.Please refer to our [Storybook examples](https://primer.style/brand/storybook/?path=/story/components-pricingoptions-features--three-options) to see the component in a full-width context as originally intended.</Note>
Use PricingOptions.FeatureListHeading
to group feature items together.
<PricingOptions><PricingOptions.Item><PricingOptions.Heading>Copilot Individual</PricingOptions.Heading><PricingOptions.Description>Code completions, Chat, and more for indie developers and freelancers.</PricingOptions.Description><PricingOptions.PricecurrencySymbol="$"trailingText="per month / $100 per year">10</PricingOptions.Price><PricingOptions.FeatureList><PricingOptions.FeatureListHeading>Base features</PricingOptions.FeatureListHeading><PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem><PricingOptions.FeatureListHeading>Security</PricingOptions.FeatureListHeading><PricingOptions.FeatureListItem>Security vulnerability filter</PricingOptions.FeatureListItem></PricingOptions.FeatureList><PricingOptions.Footnote>Free for verified students, teachers, and maintainers of popular opensource projects.</PricingOptions.Footnote><PricingOptions.PrimaryAction href="/buy">Start a free trial</PricingOptions.PrimaryAction></PricingOptions.Item><PricingOptions.Item><PricingOptions.Label>Recommended</PricingOptions.Label><PricingOptions.Heading>Copilot Business</PricingOptions.Heading><PricingOptions.Description>Copilot personalized to your organization.</PricingOptions.Description><PricingOptions.Price currencySymbol="$" trailingText="per user / month">19</PricingOptions.Price><PricingOptions.PrimaryAction href="/buy">Buy now</PricingOptions.PrimaryAction><PricingOptions.SecondaryAction href="/contact">Contact sales</PricingOptions.SecondaryAction><PricingOptions.FeatureList><PricingOptions.FeatureListHeading>Base features</PricingOptions.FeatureListHeading><PricingOptions.FeatureListItem>Everything in Copilot Individual</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Code referencing</PricingOptions.FeatureListItem><PricingOptions.FeatureListHeading>Security</PricingOptions.FeatureListHeading><PricingOptions.FeatureListItem>Security vulnerability filter</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Public code filter</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>IP indemnity</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Enterprise-grade security, safety, and privacy</PricingOptions.FeatureListItem></PricingOptions.FeatureList></PricingOptions.Item><PricingOptions.Item><PricingOptions.Label>Available Feb 2024</PricingOptions.Label><PricingOptions.Heading>Copilot Enterprise</PricingOptions.Heading><PricingOptions.Description>Copilot personalized to your organization throughout the softwaredevelopment lifecycle. Requires GitHub Enterprise Cloud.</PricingOptions.Description><PricingOptions.Price currencySymbol="$" trailingText="per user / month">39</PricingOptions.Price><PricingOptions.FeatureList><PricingOptions.FeatureListHeading>Base features</PricingOptions.FeatureListHeading><PricingOptions.FeatureListItem>Everything in Copilot Business</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Documentation search and summaries</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Pull request summaries</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Code review skills</PricingOptions.FeatureListItem><PricingOptions.FeatureListHeading>Security</PricingOptions.FeatureListHeading><PricingOptions.FeatureListItem>Security vulnerability filter</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Public code filter</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>IP indemnity</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Enterprise-grade security, safety, and privacy</PricingOptions.FeatureListItem></PricingOptions.FeatureList><PricingOptions.PrimaryAction href="/waitlist">Join waitlist</PricingOptions.PrimaryAction></PricingOptions.Item></PricingOptions>
Use PricingOptions.FeatureListItem
with variant="included"
and variant="excluded"
to list included and excluded features.
<PricingOptions><PricingOptions.Item><PricingOptions.Heading>Copilot Individual</PricingOptions.Heading><PricingOptions.Description>Code completions, Chat, and more for indie developers and freelancers.</PricingOptions.Description><PricingOptions.PricecurrencySymbol="$"trailingText="per month / $100 per year">10</PricingOptions.Price><PricingOptions.FeatureList><PricingOptions.FeatureListHeading>Chat</PricingOptions.FeatureListHeading><PricingOptions.FeatureListItem>Unlimited messages, interactions, and history</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Context-aware coding support and explanations</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem variant="excluded">Debugging and security remediation assistance</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem variant="excluded">Repository-based semantic search</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem variant="excluded">Access your knowledge base</PricingOptions.FeatureListItem><PricingOptions.FeatureListHeading>Code completion</PricingOptions.FeatureListHeading><PricingOptions.FeatureListItem>Code suggestions as you type</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Comments to code</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem variant="excluded">Fine-tuned models (coming soon)</PricingOptions.FeatureListItem></PricingOptions.FeatureList><PricingOptions.Footnote>Free for verified students, teachers, and maintainers of popular opensource projects.</PricingOptions.Footnote><PricingOptions.PrimaryAction href="/buy">Start a free trial</PricingOptions.PrimaryAction></PricingOptions.Item><PricingOptions.Item><PricingOptions.Label>Recommended</PricingOptions.Label><PricingOptions.Heading>Copilot Business</PricingOptions.Heading><PricingOptions.Description>Copilot personalized to your organization.</PricingOptions.Description><PricingOptions.Price currencySymbol="$" trailingText="per user / month">19</PricingOptions.Price><PricingOptions.PrimaryAction href="/buy">Buy now</PricingOptions.PrimaryAction><PricingOptions.SecondaryAction href="/contact">Contact sales</PricingOptions.SecondaryAction><PricingOptions.FeatureList><PricingOptions.FeatureListHeading>Chat</PricingOptions.FeatureListHeading><PricingOptions.FeatureListItem>Unlimited messages, interactions, and history</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Context-aware coding support and explanations</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Debugging and security remediation assistance</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Repository-based semantic search</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem variant="excluded">Access your knowledge base</PricingOptions.FeatureListItem><PricingOptions.FeatureListHeading>Code completion</PricingOptions.FeatureListHeading><PricingOptions.FeatureListItem>Code suggestions as you type</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Comments to code</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem variant="excluded">Fine-tuned models (coming soon)</PricingOptions.FeatureListItem></PricingOptions.FeatureList></PricingOptions.Item><PricingOptions.Item><PricingOptions.Label>Available Feb 2024</PricingOptions.Label><PricingOptions.Heading>Copilot Enterprise</PricingOptions.Heading><PricingOptions.Description>Copilot personalized to your organization throughout the softwaredevelopment lifecycle. Requires GitHub Enterprise Cloud.</PricingOptions.Description><PricingOptions.Price currencySymbol="$" trailingText="per user / month">39</PricingOptions.Price><PricingOptions.FeatureList><PricingOptions.FeatureListHeading>Chat</PricingOptions.FeatureListHeading><PricingOptions.FeatureListItem>Unlimited messages, interactions, and history</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Context-aware coding support and explanations</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Debugging and security remediation assistance</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Repository-based semantic search</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Access your knowledge base</PricingOptions.FeatureListItem><PricingOptions.FeatureListHeading>Code completion</PricingOptions.FeatureListHeading><PricingOptions.FeatureListItem>Code suggestions as you type</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Comments to code</PricingOptions.FeatureListItem><PricingOptions.FeatureListItem>Fine-tuned models (coming soon)</PricingOptions.FeatureListItem></PricingOptions.FeatureList><PricingOptions.PrimaryAction href="/waitlist">Join waitlist</PricingOptions.PrimaryAction></PricingOptions.Item></PricingOptions>
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 |
trailingText | string | false | The trailing text |
Name | Type | Default | required | Description |
---|---|---|---|---|
children | 'PricingOptions.Heading' 'PricingOptions.Item' | undefined | true | The list of features |
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 |