Primer CSS
GitHub's CSS design system, distributed as Sass styles for building GitHub-style interfaces.primer/css
- Stars
- 13.1k
- Forks
- 1.3k
- Licence
- MIT
- Language
- SCSS
- Last update
- 5 days ago
- Type
- Library
What it is
Primer CSS is the CSS implementation of GitHub's Primer Design System. It provides Sass (SCSS) source files that supply GitHub's styles, components and utility classes, which developers can import into their own projects. The README says the project is now in maintenance-only mode, and points people to primer/react or primer/view_components for newer patterns.
- Import the full Primer stylesheet into a Sass build with @import "@primer/css/index.scss"
- Import only specific modules, such as core or product, to keep the stylesheet smaller
- Use existing utility classes from the project in markup where needed
Great for
- Developers who want to match GitHub's visual style in an existing web project
- Teams already using Sass who want ready-made UI styles and utility classes
- Maintainers of existing products that already depend on @primer/css
Not ideal for
- New projects that need full component patterns: the README directs these to primer/react or primer/view_components, since this project is in KTLO (keep-the-lights-on) mode
- People who want a no-build, plain-CSS drop-in: the README says the source is Sass using SCSS syntax, so a build step is expected
How to get it
- 1
Install with a package manager
You'll need: npm (installed with Node.js)
Install the package
npm install --save @primer/css - 2
Run it
- Install the package with npm
- Add your project's node_modules directory to your Sass include or load paths
- Import the stylesheet with @import "@primer/css/index.scss";
- Check the documentation site at primer.style/css for component examples
- 3
Get the most out of it
- Import individual modules such as @primer/css/core/index.scss to reduce the size of the stylesheet
- Read the theme and principles docs on primer.style/css before customizing colors or spacing
- For new components with markup and styling, consider primer/react or primer/view_components as the README recommends
Downloads
Strengths
- Backed by GitHub and published on npm under the MIT license
- Documentation site is linked from the README and covers getting started, components and theme
- Modular imports let you include only the parts you need
Trade-offs
- The README states the project is in KTLO (keep-the-lights-on) mode, so new development is limited
- Requires a Sass toolchain and knowledge of load paths
- The README is brief on specifics, so details such as browser support and configuration are not covered here
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| css (this) | 13.1k | Library | intermediate | 5 days ago | Developers who want to match GitHub's visual style in an existing web project |
| bootstrap | 175k | Library | beginner | 4 days ago | Developers building responsive websites or web app interfaces quickly |
| tailwindcss | 98.3k | Library | intermediate | 4 days ago | Web developers who build their own interfaces and want to avoid writing large custom stylesheets |
| bulma | 50k | Library | beginner | 2 months ago | Developers who want a quick, consistent styling baseline for a web page |
| daisyui | 42.7k | Library | intermediate | 6 days ago | Developers already using Tailwind CSS who want prebuilt components |
| materialize | 38.8k | Library | beginner | 3 months ago | Developers building a web page or app who want a Material Design look quickly |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.