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

If you prefer Yarn, use the following command instead:

yarn add @primer/react @primer/primitives

This command will install two 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

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 BaseStyles component 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} from '@primer/react'

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

In addition, you will need to add the following attributes to your html element:

<html data-light-theme="light" data-dark-theme="dark" data-color-mode="auto">
  <!-- ... -->
</html>

📖 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.

@primer/react