What it does
Primer is GitHub’s design system, with separate Product UI and Brand UI resources. Product UI combines components, task patterns and tokens for colour, spacing and typography. Its React library is free under the MIT licence, and public setup guides explain how to install and theme it.
Primer separates application interfaces from digital marketing experiences. Product UI is the route for forms, navigation, data tables and app workflows; Brand UI and the brand toolkit address a different context. Shared foundations include accessibility and design tokens.
For a React app, install @primer/react with its peer dependencies. Wrap the application in ThemeProvider and BaseStyles, import the desired theme from @primer/primitives, then import the components you need. A button example demonstrates the complete setup. Base HTML styling and GitHub-style Markdown formatting need additional CSS imports.
The React code uses the MIT licence, which permits commercial use while requiring its copyright and permission notices in distributed copies. Primer React targets current Chrome, Firefox, Safari and Edge, plus Firefox ESR. It does not include compatibility polyfills or transform code for older JavaScript environments. Some GitHub development tools linked from the guides are staff-only.
Strengths
- Product and brand interface resources have separate guidance
- React setup includes themes, base styles and TypeScript support
- Tokens provide shared colour, spacing and typography values
Watch out for
- Older browser environments need additional compatibility work
- Some linked GitHub development tools are staff-only
Best for
- Design teams studying GitHub-style product and brand systems
Sources
- Primer design system (Oct 27, 2026)
- Getting started with Primer React (Oct 27, 2026)
- Primer React MIT licence (Oct 27, 2026)