OSS TanbouOn this page
Overview
Primer CSS provides the Primer Design System as CSS and SCSS. Projects can load the prebuilt stylesheet or import core, product, marketing, and other Sass modules selectively.
Features and best fit
Based on official documentation; not hands-on tested · Content checked:
Key features
Use either prebuilt CSS or Sass source modules
The npm package ships dist/primer.css, while Sass projects can import @primer/css/index.scss or individual core/product/marketing modules.
Apply Primer utilities and component classes to existing markup
Buttons, forms, layout helpers, and utility classes bring Primer styling to HTML without requiring a React component runtime.
Sources: [1]
Share design primitives with @primer/primitives
Version 22.3.0 declares @primer/primitives 10.x or 11.x as a peer dependency, connecting the CSS package to the wider Primer token ecosystem.
Sources: [2]
Best fit
Fits existing Primer-based interfaces that are maintained primarily through CSS
It is useful when teams need to preserve markup or maintain a Primer CSS codebase without migrating the whole UI to React components.
Sources: [1]
Before adoption
The project is in KTLO mode and recommends other implementations for complete new patterns
The README explicitly says to keep using existing utilities where needed but points new, fuller patterns toward Primer React or Primer ViewComponents.
Sources: [1]
Version 22.3.0 declares Node 16 or later
Package metadata requires Node.js >=16.0.0; Sass-based builds should also verify their selected Sass toolchain.
Sources: [2]
Official sources
- [1]Primer CSS v22.3.0 README(2026-10-05)
- [2]Primer CSS v22.3.0 package metadata(2026-10-05)
- [3]Primer CSS v22.3.0 release(2026-10-05)
- [4]Primer CSS MIT license(2026-10-05)
Supplemental curator note
Primer CSS is the CSS implementation of GitHub's Primer Design System. Its README states that the project is in KTLO mode: existing utility classes remain available, while more complete patterns with markup are directed to Primer React or Primer ViewComponents.
Try it in 3 steps
- 1
Install Primer CSS 22.3.0 in an isolated project
Pin the reviewed release in a temporary project without changing an existing codebase.
demo=$(mktemp -d "${TMPDIR:-/tmp}/primer-css.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact @primer/css@22.3.0 - 2
Create minimal HTML using the prebuilt stylesheet
Load the packaged CSS and use a representative Primer button class.
printf "%s\n" '<!doctype html>' '<html><head><link rel="stylesheet" href="./node_modules/@primer/css/dist/primer.css"></head>' '<body><button class="btn btn-primary">Primary</button></body></html>' > index.html - 3
Verify the button component rules are present
Confirm the distributed stylesheet includes Primer button rules.
grep -q ".btn-primary" node_modules/@primer/css/dist/primer.css && grep -q ".btn" node_modules/@primer/css/dist/primer.css
Growth
Growth trends · Last 30 days
13,028 Stars
Trend data is still being collected.
Built with
Categories and tags
Categories
GitHub data
GitHub dataView detailed GitHub data
GitHub Topics
- css
- design-system
- design-systems
- framework
- meta
- primer
- primer-css
- sass
- styleguide
- ui-components
Related information
Write a related articleShare a guide or use case for this OSS in Markdown. Articles are published after administrator approval.
Explore next
- normalize.css53,505 Stars
3 shared tag(s)
reduce browser inconsistencies while preserving useful native defaults
CSS - PostCSS28,974 Stars
3 shared tag(s)
parse CSS into an AST and compose build-time style processing with JavaScript plugins
TypeScript - Autoprefixer22,211 Stars
3 shared tag(s)
generate only the vendor prefixes required by Browserslist and Can I Use data
JavaScript - Less17,025 Stars
3 shared tag(s)
compile stylesheets with variables, mixins, and nesting into standard CSS with lessc
JavaScript - Stylelint11,526 Stars
3 shared tag(s)
continuously check CSS errors and conventions with 100+ rules, plugins, and shareable configs
JavaScript - Stylus11,333 Stars
3 shared tag(s)
use indented syntax or regular CSS style with one expressive stylesheet compiler
JavaScript
Report incorrect information
Tell us if any listing information is incorrect or outdated.