@primer/react-brand

--- title: Pricing options description: Use the pricing options to display pricing plan information on a page. keywords: ['pricing', 'plans', 'options', 'features'] ready: true source: https://github.com/primer/brand/blob/main/packages/react/src/PricingOptions/PricingOptions.tsx storybook: '/brand/storybook/?path=/story/components-pricingoptions--default' --- ## Examples ### Default ```jsx <PricingOptions> <PricingOptions.Item> <PricingOptions.Heading>Copilot</PricingOptions.Heading> <PricingOptions.Description>Copilot in the coding environment.</PricingOptions.Description> <PricingOptions.Price currencySymbol="$" originalPrice="20" 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 software development lifecycle. Requires GitHub Enterprise Cloud. </PricingOptions.Description> <PricingOptions.Price currencySymbol="$" trailingText="per user / month" originalPrice="49"> 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> ``` ### Cards variant ```jsx <PricingOptions variant="cards"> <PricingOptions.Item> <PricingOptions.Heading>Copilot</PricingOptions.Heading> <PricingOptions.Description>Copilot in the coding environment.</PricingOptions.Description> <PricingOptions.Price currencySymbol="$" 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 software development 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> ``` ### Gradient variant ```jsx <PricingOptions variant="default-gradient"> <PricingOptions.Item> <PricingOptions.Heading>Copilot</PricingOptions.Heading> <PricingOptions.Description>Copilot in the coding environment.</PricingOptions.Description> <PricingOptions.Price currencySymbol="$" 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 software development 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> ``` ### Center alignment ```jsx <PricingOptions variant="cards" align="center"> <PricingOptions.Item> <PricingOptions.Heading>Copilot</PricingOptions.Heading> <PricingOptions.Description>Copilot in the coding environment.</PricingOptions.Description> <PricingOptions.Price currencySymbol="$" trailingText="per month / $100 per year"> 10 </PricingOptions.Price> <PricingOptions.PrimaryAction href="#">Buy now</PricingOptions.PrimaryAction> </PricingOptions.Item> <PricingOptions.Item> <PricingOptions.Heading>Copilot Business</PricingOptions.Heading> <PricingOptions.Description> Copilot personalized to your organization throughout the software development lifecycle. Requires GitHub Enterprise Cloud. </PricingOptions.Description> <PricingOptions.Price currencySymbol="$" trailingText="per user / month"> 39 </PricingOptions.Price> <PricingOptions.PrimaryAction href="#">Join waitlist</PricingOptions.PrimaryAction> <PricingOptions.SecondaryAction href="#">Contact sales</PricingOptions.SecondaryAction> </PricingOptions.Item> </PricingOptions> ``` ### One option This is the one-option layout for the pricing options component ```jsx <PricingOptions> <PricingOptions.Item> <PricingOptions.Heading>Copilot Individual</PricingOptions.Heading> <PricingOptions.Description> Code completions, Chat, and more for indie developers and freelancers. </PricingOptions.Description> <PricingOptions.Price currencySymbol="$" 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> ``` ### Two options This is the two-item layout for the pricing options component. ```jsx <PricingOptions> <PricingOptions.Item> <PricingOptions.Heading>Copilot</PricingOptions.Heading> <PricingOptions.Description>Copilot in the coding environment.</PricingOptions.Description> <PricingOptions.Price currencySymbol="$" 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 software development 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> ``` ### Three and four options `PricingOptions` supports a maximum of four items in both `default` and `card` layouts. Please refer to our Storybook examples to see the component in a full-width context as originally intended. > `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. ### Feature list sets Use `PricingOptions.FeatureListGroupHeading` to group feature items together. ```jsx <PricingOptions> <PricingOptions.Item> <PricingOptions.Heading>Copilot Individual</PricingOptions.Heading> <PricingOptions.Description> Code completions, Chat, and more for indie developers and freelancers. </PricingOptions.Description> <PricingOptions.Price currencySymbol="$" trailingText="per month / $100 per year"> 10 </PricingOptions.Price> <PricingOptions.FeatureList> <PricingOptions.FeatureListGroupHeading>Base features</PricingOptions.FeatureListGroupHeading> <PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem> <PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem> <PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem> <PricingOptions.FeatureListGroupHeading>Security</PricingOptions.FeatureListGroupHeading> <PricingOptions.FeatureListItem>Security vulnerability filter</PricingOptions.FeatureListItem> </PricingOptions.FeatureList> <PricingOptions.Footnote> Free for verified students, teachers, and maintainers of popular open source 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.FeatureListGroupHeading>Base features</PricingOptions.FeatureListGroupHeading> <PricingOptions.FeatureListItem>Everything in Copilot Individual</PricingOptions.FeatureListItem> <PricingOptions.FeatureListItem>Code referencing</PricingOptions.FeatureListItem> <PricingOptions.FeatureListGroupHeading>Security</PricingOptions.FeatureListGroupHeading> <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> ``` ### Included and excluded features Use `PricingOptions.FeatureListItem` with `variant="included"` and `variant="excluded"` to list included and excluded features. ```jsx <PricingOptions> <PricingOptions.Item> <PricingOptions.Heading>Copilot Individual</PricingOptions.Heading> <PricingOptions.Description> Code completions, Chat, and more for indie developers and freelancers. </PricingOptions.Description> <PricingOptions.Price currencySymbol="$" trailingText="per month / $100 per year"> 10 </PricingOptions.Price> <PricingOptions.FeatureList> <PricingOptions.FeatureListGroupHeading>Chat</PricingOptions.FeatureListGroupHeading> <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.FeatureListGroupHeading>Code completion</PricingOptions.FeatureListGroupHeading> <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 open source projects. </PricingOptions.Footnote> <PricingOptions.PrimaryAction href="/buy">Start a free trial</PricingOptions.PrimaryAction> </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 software development lifecycle. Requires GitHub Enterprise Cloud. </PricingOptions.Description> <PricingOptions.Price currencySymbol="$" trailingText="per user / month"> 39 </PricingOptions.Price> <PricingOptions.FeatureList> <PricingOptions.FeatureListGroupHeading>Chat</PricingOptions.FeatureListGroupHeading> <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.FeatureListGroupHeading>Code completion</PricingOptions.FeatureListGroupHeading> <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> ``` ### Info tooltips Use `infoTooltip` on `PricingOptions.FeatureListItem` to add a supplementary tooltip to a feature. ```jsx <PricingOptions> <PricingOptions.Item> <PricingOptions.Heading>Pro</PricingOptions.Heading> <PricingOptions.Description>Accelerate workflows with GitHub Copilot.</PricingOptions.Description> <PricingOptions.Price currencySymbol="$" trailingText="per month / $100 per year"> 10 </PricingOptions.Price> <PricingOptions.FeatureList> <PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem> <PricingOptions.FeatureListItem infoTooltip="Interact with Copilot using natural language."> Chat in IDE and Mobile </PricingOptions.FeatureListItem> <PricingOptions.FeatureListItem infoTooltip="Get help directly in your terminal."> CLI assistance </PricingOptions.FeatureListItem> <PricingOptions.FeatureListItem>Security vulnerability filter</PricingOptions.FeatureListItem> </PricingOptions.FeatureList> <PricingOptions.PrimaryAction href="/buy">Start a free trial</PricingOptions.PrimaryAction> </PricingOptions.Item> </PricingOptions> ``` ### Actions message Use `PricingOptions.ActionsMessage` to render status, billing, or upgrade notes in the actions area. Add `leadingComponent` when you want to show a supporting icon. ```jsx <PricingOptions variant="cards"> <PricingOptions.Item> <PricingOptions.Label>Most popular</PricingOptions.Label> <PricingOptions.Heading>Pro</PricingOptions.Heading> <PricingOptions.Description>Accelerate workflows with GitHub Copilot.</PricingOptions.Description> <PricingOptions.Price trailingText="per user / month">10</PricingOptions.Price> <PricingOptions.PrimaryAction disabled>Upgrade now</PricingOptions.PrimaryAction> <PricingOptions.ActionsMessage leadingComponent={<InfoIcon />}> <Text as="p" size="100"> <strong>Upgrades are temporarily paused.</strong> We are rolling out a more flexible billing experience. </Text> </PricingOptions.ActionsMessage> <PricingOptions.FeatureList hasDivider={false}> <PricingOptions.FeatureListItem>Copilot cloud agent</PricingOptions.FeatureListItem> <PricingOptions.FeatureListItem>Copilot code review</PricingOptions.FeatureListItem> <PricingOptions.FeatureListItem>Claude and Codex on GitHub and VS Code</PricingOptions.FeatureListItem> </PricingOptions.FeatureList> </PricingOptions.Item> </PricingOptions> ``` ## Component props ### PricingOptions `Required` | 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' \| 'default-gradient' \| 'cards' \| 'cards-gradient'` | | `false` | Sets the style variant | | `style` | `React.CSSProperties` | | `false` | Inline CSS overrides | ### PricingOptions.Item `Required` One item per pricing plan to be displayed. Maximum of 4 items. | Name | Type | Default | required | Description | | :--------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :---------: | :------: | :----------------------- | | `children` | `'PricingOptions.Heading' \| 'PricingOptions.Label' \| 'PricingOptions.Description' \| 'PricingOptions.Price' \| 'PricingOptions.PrimaryAction' \| 'PricingOptions.SecondaryAction' \| 'PricingOptions.ActionsMessage' \| 'PricingOptions.FeatureList' \| 'PricingOptions.Footnote' \| 'PricingOptions.MenuAction'` | `undefined` | `true` | The contents of the item | ### PricingOptions.Heading `Required` | Name | Type | Default | required | Description | | :--------- | :------------ | :---------: | :------: | :------------------------------------------------ | | `as` | `HeadingTags` | `h3` | `false` | Applies the underlying HTML heading level element | | `children` | `ReactNode` | `undefined` | `true` | The heading of the item | ### PricingOptions.Label | Name | Type | Default | required | Description | | :--------- | :---------- | :---------: | :------: | :----------------------------------- | | `children` | `ReactNode` | `undefined` | `true` | The column header label for the item | ### PricingOptions.Description | Name | Type | Default | required | Description | | :--------- | :---------- | :---------: | :------: | :-------------------------- | | `children` | `ReactNode` | `undefined` | `true` | The description of the item | ### PricingOptions.Price | 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 | ### PricingOptions.ActionsMessage | Name | Type | Default | required | Description | | :----------------- | :------------- | :---------: | :------: | :-------------------------------------------------------------------------------- | | `children` | `ReactNode` | `undefined` | `true` | The message content rendered in the actions area | | `leadingComponent` | `ReactElement` | `undefined` | `false` | Optional leading visual, typically an icon. Sizing is handled by component styles | ### PricingOptions.FeatureList | Name | Type | Default | required | Description | | :------------ | :----------------------------------------------------------------------------- | :---------: | :------: | :---------------------------------------------------------------------------------------------------------- | | `children` | `'PricingOptions.FeatureListGroupHeading' \| 'PricingOptions.FeatureListItem'` | `undefined` | `true` | The list of features | | `accordionAs` | `HeadingTags` | `h4` | `false` | Applies the underlying HTML heading level element | | `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 | ### PricingOptions.FeatureListGroupHeading | Name | Type | Default | required | Description | | :--------- | :---------- | :-----------------: | :------: | :---------------------------------- | | `children` | `ReactNode` | `"What's included"` | `false` | A custom title for the feature list | ### PricingOptions.FeatureListGroupHeading | 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 | ### PricingOptions.FeatureListItem | Name | Type | Default | required | Description | | :------------ | :------------------------- | :---------: | :------: | :-------------------------------------------------------- | | `children` | `ReactNode` | `undefined` | `true` | The item of the feature list set | | `infoTooltip` | `string` | `undefined` | `false` | Tooltip text shown on hover/focus via an info icon button | | `variant` | `'included' \| 'excluded'` | `included` | `false` | The variant of the feature list set | ### PricingOptions.MenuAction | Name | Type | Default | required | Description | | :--------- | :---------- | :---------: | :------: | :---------------------------------------------------------- | | `children` | `ReactNode` | `undefined` | `true` | An `ActionMenu` component, typically in `split-button` mode | ### PricingOptions.Footnote | Name | Type | Default | required | Description | | :--------- | :---------- | :---------: | :------: | :----------------------- | | `children` | `ReactNode` | `undefined` | `true` | The footnote of the item |