Pricing options - Brand UI

Ready to use

<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

<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

<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

<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

<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.

<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.

<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.

<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>

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

PricingOptions.Item Required

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

PricingOptions.Heading Required

Name	Type	Default	required	Description
`as`	`'h1'` `'h2'` `'h3'` `'h4'` `'h5'` `'h6'`	`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 label of 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.FeatureList

Name	Type	Default	required	Description
`children`	`'PricingOptions.Heading'` `'PricingOptions.Item'`	`undefined`	`true`	The list of features
`accordionAs`	`'h1'` `'h2'` `'h3'` `'h4'` `'h5'` `'h6'`	`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
`variant`	`'included'` `'excluded'`	`included`	`false`	The variant of the feature list set

PricingOptions.Footnote

Name	Type	Default	required	Description
`children`	`ReactNode`	`undefined`	`true`	The footnote of the item