Getting started

Primer Brand is open-sourced on GitHub and available on npm.

1. Install Primer Brand

Install Primer Brand with npm.

npm install @primer/react-brand

2. Import global stylesheets

Primer Brand requires a global stylesheet to be loaded ahead-of-time.

a. Using an application bundler (e.g. Webpack)

Import the main stylesheet at the earliest rendering opportunity:

import '@primer/react-brand/lib/css/main.css'

or

b. Using a static stylesheet

Load the static stylesheet if you're unable to import stylesheets using a bundler

<link
  href="https://unpkg.com/browse/@primer/react-brand@<version>/lib/css/main.css"
  rel="stylesheet"
/>

3. (Optional) Import the custom font assets

Primer Brand references the Mona Sans typeface, which will need to be loaded alongside the main stylesheet.

import '@primer/react-brand/fonts/fonts.css'

or

<link
  href="https://unpkg.com/browse/@primer/react-brand@<version>/fonts/fonts.css"
  rel="stylesheet"
/>

4. Use the ThemeProvider

You must add the ThemeProvider to the root of your application for theming to work correctly.

E.g.

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

function App() {
  return (
    <ThemeProvider>
      <div>...</div>
    </ThemeProvider>
  )
}

5. Import components

Components can be imported into any React-based application.

E.g.

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

<Hero {...props} />