VOOZH about

URL: https://www.geeksforgeeks.org/css/primer-css-introduction/

⇱ Primer CSS Introduction - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

Primer CSS Introduction

Last Updated : 23 Jul, 2025

Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is a highly reusable model.

Primer CSS facilitates the different designs to build & create an attractive user interface with the help of GitHub’s design system which helps to enhance the overall user experience of the website. There are 2 different ways the Primer CSS can be utilized in the project:

  • Installing Primer CSS via NPM
  • By implementing through the CDN Links

We will explore both the option for implementing the Primer CSS & understand it through the example.

Installing Primer CSS via NPM: Before we proceed to install the Primer CSS, we must have installed the Node Package Manager in the system. To check the version installed, run the below commands:

npm -v OR npm --version

In order to use the components, Utilities, etc, we must have the npm version 3 or above. In case if older version were installed the use the below command to upgrade the npm version:

npm install npm@latest -g

Steps for installing Primer CSS:

Step 1: Use the below command to install the Primer CSS:

npm install @primer/css --save

This will help to install all the required SCSS source files into the node_modules/@primer/css directory.

👁 Image
 

Step 2: Import the below import statement inside the <style> tag in the HTML file or we can create the stylesheet that will contain the below import statement & linked the stylesheet with the <link> tag in the <head> tag of the HTML file.

@import "node_modules/@primer/css/dist/primer.css";

Step 3: Add the classes of specific components/Utilities, as given below:

<button class="BtnGroup-item btn" type="button">Button</button>

Implementing the Primer CSS through the CDN Link: The Prime CSS can be utilized either by downloading the built CSS from unpkg.com & need to host it by ourselves or simply by including a CDN link in the HTML:

<link href="https://unpkg.com/@primer/css@19.8.2/dist/primer.css" rel="stylesheet" />

Example: This example describes the implementation of Primer CSS by using the labels with radio buttons.

Output:

👁 Image
 

Example 2: This example describes the implementation of Prime CSS by specifying the path in the import statement.

Output:

👁 Image
 

Benefits of using Prime CSS:

  • It facilitates the Utility-centric and BEM-style components, which is the basic building block for the web project.
  • It provides the presentational UI components having the styles encapsulated in it.
  • It has different types of design layouts, flows, and wireframes, that helps to make prototypes with Primer components in Figma.
Comment
Article Tags:
Article Tags: