---
title: Getting started
description: Primer Brand is open-sourced on GitHub and available on npm.
keywords: ['introduction', 'simple', 'get started', 'tutorials']
---
Primer Brand is [open-sourced on GitHub](https://github.com/primer/brand) and [available on npm](https://www.npmjs.com/package/@primer/react-brand).
### 1. Install Primer Brand
Install Primer Brand with [npm](https://www.npmjs.com/).
```shell
npm install @primer/react-brand
```
### 2. Import global stylesheets
Primer Brand requires a global stylesheet to be loaded ahead-of-time.
> Refer to [this separate guide if you are using an ESM-compatible bundler](./esm.md). Component styles are included
> with the React component imports.
#### a. Using an application bundler (e.g. Webpack)
Import the `main` stylesheet at the earliest rendering opportunity:
```js
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
```html
```
### 3. (Optional) Import the custom font assets
Primer Brand references the `Mona Sans` typeface, which will need to be loaded alongside the main stylesheet.
```js
import '@primer/react-brand/fonts/fonts.css'
```
or
```html
```
### 4. Use the ThemeProvider
You must add the `ThemeProvider` to the root of your application for theming to work correctly.
E.g.
```js
import {ThemeProvider} from '@primer/react-brand'
function App() {
return (
...
)
}
```
### 5. Import components
Components can be imported into any React-based application.
E.g.
```js
import {Hero} from '@primer/react-brand'
```
```jsx
LabelThis is my super sweet hero heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
felis nam pulvinar risus elementum.
Primary actionSecondary action
```