Introduction to Primer CSS

Primer is GitHub’s design system and CSS framework. It provides a set of guidelines and components to create consistent, accessible interfaces.

What is Primer?

Primer is built around three core pillars:

Install Primer CSS via npm:

npm install @primer/css

Import the CSS in your project:

@import "@primer/css/index.scss";

Primer provides a comprehensive set of utility classes:

<p class="color-fg-default">Default text color</p>
<p class="color-fg-muted">Muted text color</p>
<p class="color-fg-accent">Accent text color</p>

<div class="p-3">Padding of 16px</div>
<div class="m-4">Margin of 24px</div>

<div class="d-flex flex-items-center flex-justify-between">
  <span>Left</span>
  <span>Right</span>
</div>

Primer includes many pre-built components:

Component	Description
Box	Container with border and padding
Button	Interactive button styles
Label	Tags and badges
Header	Navigation header

Primer supports dark mode through data attributes:

<html data-color-mode="auto" data-light-theme="light" data-dark-theme="dark">

Start building with Primer today!