Primer Components

v4.0.0-beta

Getting Started

⚠️ This project is not production-ready yet! Public beta planned for October 2018.

Install Primer Components in your application:

npm i @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'

Styling

This project uses emotion under the hood to generate static CSS from some component styles, but still relies on Primer CSS for some component styles that haven't yet been ported over.

To ensure proper styling, you'll need to link to the most recent build of Primer CSS in one of the following ways:

  1. If you're using webpack, you can install style-loader and css-loader, import 'primer/build/build.css' in your bundle, and include the following in your webpack config's module.rules list:

    {
      test: /.css$/,
      use: ['style-loader', 'css-loader']
    }
    
  2. For pre-production applications, you can link directly to the build on unpkg.com.

  3. Otherwise, you can npm install --save primer and either or link node_modules/primer/build/build.css to your source directory.