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/primitivesIf you prefer Yarn, use the following command instead:
yarn add @primer/react @primer/primitivesThis 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.