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](https://www.npmjs.com/):
```bash
npm install -S @primer/react @primer/primitives
```
If you prefer [Yarn](https://yarnpkg.com/), use the following command instead:
```bash
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](https://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:
```tsx
import {Button} from '@primer/react'
function App() {
return
}
```
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:
```tsx
// 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 (
)
}
```
In addition, you will need to add the following attributes to your `html` element:
```html
```
## 📖 Documentation
The documentation for `@primer/react` lives at [primer.style](https://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](contributor-docs/CONTRIBUTING.md) for more info on how to get started.
