Skip to content

index.mdx

Latest commit

 

History

History
111 lines (81 loc) · 2.61 KB

index.mdx

File metadata and controls

111 lines (81 loc) · 2.61 KB
Raw
title Getting started
description Primer Brand is open-sourced on GitHub and available on npm.
menu-position 1
keywords
introduction
simple
get started
tutorials
show-tabs true
tab-label Default

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.

Refer to [this separate guide if you are using an ESM-compatible bundler](./esm.mdx). 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:

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 {Button, Hero} from '@primer/react-brand'
<Hero>
  <Hero.Label>Label</Hero.Label>
  <Hero.Heading>This is my super sweet hero heading</Hero.Heading>
  <Hero.Description>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
    felis nam pulvinar risus elementum.
  </Hero.Description>
  <Hero.ButtonGroup>
    <Button as="a" href="#">
      Primary action
    </Button>
    <Button as="a" href="#" variant="secondary">
      Secondary action
    </Button>
  </Hero.ButtonGroup>
</Hero>
Building with an AI agent? Use the [Primer Brand MCP server](../introduction/mcp.mdx) to automatically use our components, tokens and patterns correctly.