Getting Started

Install Primer Components in your project with npm:

npm install @primer/components

Usage

All of our components are exported by name from @primer/components, so you can import them with:

import {
  Box,
  Button,
  Heading,
  Text
} from '@primer/components'

Primer Components come with all the necessary CSS built-in, so you don't need to worry about including Primer CSS.

Base styles

You can establish base Primer styles for your app by wrapping all of your Primer components in <BaseStyles>:

import {BaseStyles, Box, Heading} from '@primer/components'

export default () => (
  <BaseStyles>
    <Box m={4}>
      <Heading mb={2}>Hello, world!</Heading>
      <p>This will get Primer text styles.</p>
    </Box>
  </BaseStyles>
)

This will set the color, font-family, and line-height CSS properties to the same ones used in Primer CSS.