A React implementation of GitHub's Primer Design System
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 Primerstyled-components: used to style componentsTo learn more about how to use @primer/react, visit our documentation site at: primer.style.
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>
)
}
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.
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.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4