Marketing UI components

Primer Brand is a GitHub’s design system for creating marketing websites and digital experiences.

Marketing React components can be used in Markdown files by importing them from @primer/react-brand.

Refer to the Primer Brand documentation for more information on which components are available and how to use them.

Using Primer Brand in Markdown files

1. Import a component from @primer/react-brand:

import {Button} from '@primer/react-brand'

2. Use the component in your Markdown file, but ensure that you wrap the component in a div with the custom-component class. This will ensure that article formatting isn't applied to the custom component.

<div className="custom-component">
  <ButtonGroup>
    <Button>Primary</Button>
    <Button>Secondary</Button>
  </ButtonGroup>
</div>

Will render:

Layout

Use Stack, Grid and Box components to create custom layouts.

Example using Stack and Pillars: