Discover primer/primer-navigation Open Source project

An implementation of GitHub's Primer Design System using React

8,309

react

3,115

github-vscode-theme

GitHub's VS Code themes

A tool for creating and maintaining cohesive, consistent, and accessible color palettes

1,889

prism

ViewComponents for the Primer Design System

671

design

Primer Design Guidelines

MDX

632

view_components

Ruby

451

doctocat

A Gatsby theme for building Primer documentation sites

Color, typography, and spacing primitives in json.

308

primitives

Sharable stylelint config used by GitHub's CSS

297

stylelint-config

Stylesheets for rendering GitHub Flavored Markdown with Primer.

202

primer-markdown

171

primer.style

The website for all things Primer

Export image assets from Figma to GitHub

164

figma-action

Uses a prettylights theme object to generate syntax themes for multiple platforms

162

github-syntax-theme-generator

[WIP] A new look for Octicons, GitHub's icon set

157

octicons-v2

Probot using figma api to comment on PRs with before after images

127

figma-diff-probot

Primer Presentations is the presentation design system for GitHub. It's intended to be used only by GitHub staff for presentations that represent GitHub.

114

presentations

MDX

github-syntax-light

The CSS syntax theme for GitHub

React components and Primitives for GitHub marketing websites

brand

GitHub Dark (classic) theme for VS Code

github-vscode-theme-dark-classic

Primer, GitHub's design system, available on Figma.

figma

deploy

Deploy to Now from GitHub Actions with useful aliases

The CSS dark syntax theme for GitHub

github-syntax-dark

The GitHub Action that publishes Primer packages to npm

publish

Shared behaviors for JavaScript components

behaviors

A jekyll liquid plugin that makes including svg Octicons simple.

jekyll-octicons

react-template

The quickest way to start playing around with Primer React

GitHub's official light syntax theme as an atom theme

github-atom-light-syntax

Less

swatch

Get a swatch svg for a color token from @primer/primitives

GitHub's official syntax themes as TextMate themes

github-textmate-theme

octicons_helper

A rails helper that inlines SVG octicons

rails_forms

Primer forms framework for Rails

Ruby

doctocat-template

Codemirror GitHub syntax theme

codemirror-github-light

GitHub's official dark syntax theme as an atom theme

github-atom-dark-syntax

Keynote templates for using GitHub's octicons in presentations

keynote-octicons

contribute

Contribution guidelines for the Primer Design System

Add tooltips built entirely in CSS to nearly any element.

primer-tooltips

octicons_gem

Octicons gem that makes primer/octicons available in ruby env

eslint-plugin-primer-react

ESLint rules for Primer React

Immutable, atomic CSS classes to rapidly build product

primer-utilities

blueprints

Reusable components for our documentation sites

Understand all the pages in your Next.js app like a person who makes websites

next-pages

Sync Primer CSS source files from npm to your git repo

sync

Scripts to build primer SCSS modules into CSS and stats

primer-module-build

An atom autocomplete+ provider that completes primer related code

autocomplete-primer

A Next.js theme for building Primer documentation sites

doctocat-nextjs

Toolchain to help in building React components with @primer/react

react-toolchain

Compiled storybook source for GH-pages

primer.github.io

HTML

storybook

HTML

view_components-template

The quickest way to start playing around with Primer ViewComponents

Ruby

react-migrate

One time migrations for primer/react

Stylelint rule that forbids re-styling Primer CSS utility classes

stylelint-selector-no-utility

A collection of buttons used for primary and secondary actions.

primer-buttons

.github

GitHub Stuff

live-region-element

A custom element for making announcements with live regions

Style individual form controls and utilize common layouts.

primer-forms

primer-avatars

Basic styles for user profile avatars.

codemirror-github-dark

Codemirror GitHub syntax theme

The core modules of the primer framework. Shared between our product and marketing pages.

primer-core

github-ace-dark

Ace theme for GitHub dark syntax

Shorten text with an ellipsis

primer-truncate

primer-support

Sass variables, mixins, and functions used in primer

primer-states

States, or state indicators, inform users of the current status of a particular item.

next-auth-template

A template for using Next + Primer + Auth.js + Octokit

A GraphQL API for collecting and accessing data about the Primer Design System

api

Design guidelines for GitHub's command line tool

cli

Ace theme for GitHub light syntax

github-ace-light

The product based modules of the primer framework. Shared between our product and marketing pages.

primer-product

primer-layout

Containers, rows, and columns for creating page layout.

primer-box

A module for creating rounded-corner boxes with options for headers, lists, and footers.

atom-packages

A list of Atom packages recommended by the GitHub design systems team

primer-table-object

A module for creating dynamically resizable elements that always sit on the same horizontal line.

primer-base

CSS to reset the browsers default styles

primer-blankslate

Blankslates are for when there is a lack of content within a page or section.

primer-marketing-type

primer-page-headers

Jumbotrons, heroes, and featured content sections for marketing websites at GitHub.

releases

Get data on the latest Primer releases

Primer marketing is the marketing based modules of the primer framework.

react-analyze

work in progress

HTML

primer-marketing

primer-alerts

Flash messages, or alerts, inform users of successful or pending actions.

primer-marketing-utilities

primer-breadcrumb

Breadcrumb navigation for pages with parents / grandparents.

primer-tables

Styles to display tabular data for marketing websites at GitHub.

primer-labels

primer-marketing-support

Sass variables, mixins, and functions for use in our marketing components.

primer-cards

Card-like containers to group semantically related content together on marketing websites at GitHub.

comment-token-update