Guidelines
Storybook
Storybook is a free, open-source JavaScript tool that helps developers create, test, and document user interfaces (UIs). It's used by many teams, including those at GitHub, Dropbox, and Airbnb.
How Storybook works
- Developers can create and showcase UI components in isolation, outside of the main application.
- Developers can create "stories" that demonstrate specific variations of a component.
- Developers can use stories for development, testing, and documentation.
- Storybook can automatically test component accessibility and alert developers to any issues.
- Storybook can transform stories into executable tests.
Benefits of Storybook
- Helps developers develop UIs faster and easier.
- Helps developers develop hard-to-reach states and edge cases.
- Helps QA teams identify and report issues more easily.
- Helps developers ensure accessibility from the start.
- Helps developers create and test components without being affected by project dependencies.
Storybook
Design, build, and organise UI components
Adobe Spectrum Web Components
Web Component implementation of the Spectrum design language.
Audi UI React
The Audi Design System was created to help us build products for our customers more efficiently.
British Gas Nucleus
British Gas Design System
Codecademy Gamut
Gamut is the design system and component library for Codecademy
EU European Commission Europa Component Library
The Europa Component Library is a design system for the European Commission and websites managed by the Commission.
GitLab UI
GitLab UI is a UI component library that implements Pajamas, our design system.
GOV.UK React
An implementation of the GOV.UK Design System in React using CSSinJS
Carbon Design System Carbon Components React
React components for the Carbon Design System
Microsoft Fluent UI Web Components
Microsoft's Fluent UI Web Components is designed to help you build Fluent web apps using extensible Web Components.
NASA's Jet Propulsion Laboratory Explorer 1
JPL's Design System
SAP fundamental-styles
Fundamental Library Styles is a light-weight presentation layer that can be used with developers' UI framework of choice (e.g.Angular, React, Vue, etc.).
Shopify Polaris React
Shopify’s design system to help us work together to build a great experience for all of our merchants.
Storybook Design System
The Storybook design system codifies existing UI components into a central, well-maintained repository.
The Guardian Web
Frontend rendering framework for theguardian.com. It uses React, with Emotion for styling.
Wix Style React
A collection of React components that conform to Wix Style.
WordPress Gutenberg
The Block Editor project for WordPress and beyond.