Primer React

A React implementation of GitHub's Primer Design System

Getting started

To install @primer/react in your project, you will need to run the following command using npm:

npm install -S @primer/react @primer/primitives styled-components@5.x

If you prefer Yarn, use the following command instead:

yarn add @primer/react @primer/primitives styled-components@5.x

This command will install three packages in your project:

• @primer/react: used to import and use all the components from Primer
• @primer/primitives: used to include the design tokens from Primer
• styled-components: used to style components

To learn more about how to use @primer/react, visit our documentation site at: primer.style.

Usage

The @primer/react package provides components in React for the Primer Design System. To use a component, import it directly from the package:

import {Button} from '@primer/react'

function App() {
  return <Button>Hello world</Button>
}

At the root of your application, you'll also want to include our ThemeProvider and BaseStyles components along with styles from the @primer/primitives package. For example:

// Import each of the themes you would like to use, by default we are including
// the light theme below
import '@primer/primitives/dist/css/functional/themes/light.css'
import {BaseStyles, ThemeProvider} from '@primer/react'

function RootLayout() {
  return (
    <ThemeProvider>
      <BaseStyles>
        <App />
      </BaseStyles>
    </ThemeProvider>
  )
}

📖 Documentation

The documentation for @primer/react lives at primer.style. There, you'll find detailed documentation on getting started, all of the components, our theme, our principles, and more.

🙌 Contributing

We love collaborating with folks inside and outside of GitHub and welcome contributions! If you're interested, check out our contributing docs for more info on how to get started.