Skip to content

A Storybook project for UI development of React components for the MetaBrainz projects

Notifications You must be signed in to change notification settings

metabrainz/design-system

Repository files navigation


MetaBrainz MusicBrainz ListenBrainz ListenBrainz Local BookBrainz CritiqueBrainz Picard CoverArtArchive MetaBrainz Community

MetaBrainz Design System

AboutGuidelinesContributingIssuesSupport


About

This design system is a living, breathing document that contains all of the building blocks (React components, colors, icons, layout, etc) of the MetaBrainz projects. It aims to be single source of truth for developers and designers. Still a work in progress, always will be.

Quick Links

Guidelines

Tech stack

Building components

  • 📚 Storybook for UI component development and auto-generated docs
  • ⚛️ React declarative component-centric UI

Maintaining the system

Why

The MetaBrainz design system codifies existing UI components into a central, well-maintained repository. It is built to address having to paste the same components into multiple projects again and again. This simplifies building UI's with MetaBrainz's design patterns.

What we're doing

  • Build and maintain a design system in the open
  • Share UI components between multiple apps
  • Welcome contributors of all levels and backgrounds

What we're not doing

  • Rewrite all new components from scratch
  • Overhaul the visual design of components
  • Typescript (the consumer apps don't use it)
  • Compete with more general design systems like ANT or Material.

Install

yarn add @metabrainz/design-system

or

npm install --save @metabrainz/design-system

Everytime a GitHub release is made, a new version of the package is automatically available at @metabrainz/design-system

Contributing

Got something interesting you'd like to ask or share? Start a discussion at #metabrainz IRC channel on libera.chat.

Issues

If you think you have found a bug, please report it on the issue tracker. Also, we highly suggest you start a discussion on our community forum for any design requests or discussions.

Support

Reach out to the developers at one of the following places: