The design system that powers GitHub
Clone or download
Latest commit efddb57 Aug 3, 2018


npm version Build Status

Primer is the design system that powers GitHub. Primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.


The Primer repo is managed as a monorepo that is composed of many npm packages.

Core Packages

Package Version
Includes all 23 packages
primer-core npm
primer-product npm
primer-marketing npm


This repository is distributed with npm. After installing npm, you can install primer with this command.

$ npm install --save primer


The source files included are written in Sass (SCSS). After installing with npm, you can add your project's node_modules directory to your Sass include paths (AKA load paths in Ruby), then import it like this:

@import "primer/index.scss";

You can import individual Primer modules by installing them with npm, for instance:

$ npm install --save primer-navigation

Then, you would import the module with:

@import "primer-navigation/index.scss";

Or, while you're figuring out which modules you need, you can import them directly from the primer modules directory like so:

@import "primer/modules/primer-navigation/index.css";


For a compiled CSS version of this module, an npm script is included that will output a CSS version to build/build.css. The built CSS file is also included in the npm package.

$ npm run build

Releasing (Staff only)

You can find docs about our release process in


You can read more about primer in the docs.


MIT © GitHub