Skip to content
Get packs

Guide · Open source

How to use Primer CSS: install and import GitHub's styles

Updated · written with AI from the project's own documentation and checked against our catalogue data

Primer CSS is the CSS implementation of GitHub's Primer Design System. It ships as Sass (SCSS) source files containing GitHub's styles, components and utility classes that you can import into your own web project. This guide shows you how to install it with npm, import it with Sass, and decide whether it fits your project.

Primer CSSprimer/css · ★ 13.1k · MIT

Quick start

  1. 1Confirm npm is available. Install Node.js, which includes npm, before continuing.
  2. 2Install the package. Run npm install --save @primer/css in your project folder.
  3. 3Set Sass include paths. Add your node_modules directory to your Sass include or load paths so imports resolve.
  4. 4Import the styles. Add @import "@primer/css/index.scss"; to your SCSS file, or import only the modules you need.
  5. 5Check the docs. Use primer.style/css to look up getting-started details and component documentation.

Check whether Primer CSS fits your project

Primer CSS is a good match if you want your project to match GitHub's visual style, if your team already uses Sass, or if you maintain a product that already depends on @primer/css.

The project is in KTLO (keep-the-lights-on) mode. The README says to use existing utility classes where needed and, for more complete patterns that include styling and markup, to use primer/react or, if necessary, primer/view_components.

  • Good fit: matching GitHub's look, Sass-based projects, maintaining existing @primer/css products
  • Poor fit: new projects needing full component patterns, or anyone wanting a no-build plain-CSS drop-in

Install @primer/css with npm

The package is distributed through npm. The README says to install npm first (it comes with Node.js), then run the install command below in your project.

npm install --save @primer/css

Import the Primer styles into your Sass file

The source files use Sass with SCSS syntax, so a build step is expected. Add your project's node_modules directory to your Sass include paths (also called load paths), then import the package.

To import the full library, use index.scss. You can also import individual modules such as core, product or marketing directly from the package.

  • Full library: @import "@primer/css/index.scss";
  • Core module: @import "@primer/css/core/index.scss";
  • Product module: @import "@primer/css/product/index.scss";
  • Marketing module: @import "@primer/css/marketing/index.scss";
@import "@primer/css/index.scss";

Find the documentation

The documentation site at primer.style/css covers getting started, all of the components, the theme and the principles. Developers who work on the library itself can read DEVELOP.md in the repository for development docs.

What people use it for

  • Matching the look of an existing internal tool to GitHub's visual style
  • Adding Primer utility classes to a Sass-based web project
  • Maintaining an existing product that already depends on @primer/css
  • Importing only the core or product module instead of the whole library

Frequently asked questions

Is Primer CSS free to use?

Yes. The README says the project is licensed under the MIT License, and the LICENSE file is in the repository. Check that file for the full terms.

What do I need to install Primer CSS?

The README lists npm as the prerequisite, and notes that npm is installed with Node.js. You then install the package with npm install --save @primer/css.

Can I use Primer CSS without a build step?

The README says the source files are Sass using SCSS syntax, so a build step is expected. If you need a plain CSS drop-in, this project may not suit you.

Is Primer CSS still maintained?

The README says the project is in KTLO (keep-the-lights-on) mode, meaning maintenance only. For newer patterns, the README points to primer/react or primer/view_components.

What should I use instead of Primer CSS for a new project?

The README recommends primer/react for more complete patterns that include styling and markup, or primer/view_components if necessary. Bootstrap, Tailwind CSS and Bulma are other CSS options people compare it with.

How does Primer CSS compare to Bootstrap or Tailwind CSS?

Primer CSS is built to match GitHub's Design System and is distributed as Sass source. Bootstrap, Tailwind CSS and Bulma are alternative CSS frameworks. This guide does not benchmark them, so compare them against your project's needs.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Primer CSS suits developers who want GitHub's look in a Sass-based project or who maintain an existing product built on @primer/css. Because it is in maintenance-only mode and needs a build step, new projects should look at primer/react or primer/view_components, or another framework such as Bootstrap, Tailwind CSS or Bulma.

Install options & downloads