Getting started

Using ESM, you will load only the React components and CSS you need.

We recommend using ESM if your project uses compatible bundlers or frameworks like Vite or Next.js.

1. Install Primer Brand


npm install @primer/react-brand

2. Import components from the ESM folder


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

Each component’s styles are automatically included when you import the component.

Do not combine this approach with the global lib/css/main.css import.

Choose one approach or the other to avoid loading duplicate styles.

3. Import the font assets

The Mona Sans typeface still needs to be loaded separately:


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

4. Use the `ThemeProvider`


import {ThemeProvider} from '@primer/react-brand/esm'
 
function App() {
  return (
    <ThemeProvider>
      <div>...</div>
    </ThemeProvider>
  )
}