Primer React

Overview

Primer React is GitHub's official React design system implementation. It provides the foundational UI components, color palettes, and typographic scales that power GitHub.com.

Key Features

• Authentic GitHub Look & Feel: Recreate authentic developer interfaces with GitHub's signature design language.
• Design Token Synchronization: Strict synchronization with Figma and CSS custom properties.
• High Accessibility Standard: Rigorous keyboard navigation and assistive technology testing.
• Octicons Native: Seamless integration with GitHub's official Octicons icon set.

Installation & Quick Start

npm install @primer/react

import { BaseStyles, ThemeProvider, Button } from '@primer/react';

export default function App() {
  return (
    <ThemeProvider>
      <BaseStyles>
        <Button variant="primary">Merge pull request</Button>
      </BaseStyles>
    </ThemeProvider>
  );
}

Why Choose Primer React?

• Best for: Developer platforms, open-source documentation sites, and GitHub Apps/Integrations.
• Not suitable for: Highly custom, expressive non-developer commercial storefronts.