All Projects → metabrainz → design-system

metabrainz / design-system

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

Programming Languages

javascript
184084 projects - #8 most used programming language
SCSS
7915 projects

Projects that are alternatives of or similar to design-system

musicbrainz-android
The Official App of MusicBrainz
Stars: ✭ 80 (+321.05%)
Mutual labels:  musicbrainz, metabrainz
vue-authoring-template
Vue project template for authoring component and their use case
Stars: ✭ 14 (-26.32%)
Mutual labels:  storybook
storybook-addon-next
A no config Storybook addon that makes Next.js features just work in Storybook
Stars: ✭ 184 (+868.42%)
Mutual labels:  storybook
storybook-talk
Storybook, the playground you need for your UI components! 🎨
Stars: ✭ 11 (-42.11%)
Mutual labels:  storybook
gatsby-starter-bulma-storybook
A minimal Gatsby starter which includes Bulma and Storybook
Stars: ✭ 16 (-15.79%)
Mutual labels:  storybook
storybook-webpack-federation-plugin
Exposes all the components in your Storybook as Webpack 5 federated components.
Stars: ✭ 54 (+184.21%)
Mutual labels:  storybook
Userscripts
A collection of scripts that make spending time on the web easy.
Stars: ✭ 52 (+173.68%)
Mutual labels:  musicbrainz
lofi
VHS music machine from the 80's
Stars: ✭ 24 (+26.32%)
Mutual labels:  storybook
storybook-graphql-kit
Write GraphQL queries and pass response data to your components
Stars: ✭ 19 (+0%)
Mutual labels:  storybook
chanyeong
👨‍💻 chanyeong's portfolio and blog webpage
Stars: ✭ 39 (+105.26%)
Mutual labels:  storybook
storybook-addon-mock
This addon allows you to mock fetch or XMLHttpRequest in the storybook.
Stars: ✭ 67 (+252.63%)
Mutual labels:  storybook
astraea
TypeScript + React Boilerplate
Stars: ✭ 15 (-21.05%)
Mutual labels:  storybook
create-material-ui-app
create-react-app + storybook + storybook-addon-material-ui
Stars: ✭ 55 (+189.47%)
Mutual labels:  storybook
react-library-starter
A library starter kit and bundler for your React projects, powered by Rollup. ⚡
Stars: ✭ 22 (+15.79%)
Mutual labels:  storybook
cuida
A design system built by Sysvale, using storybook and Vue components
Stars: ✭ 16 (-15.79%)
Mutual labels:  storybook
bs-storybook
Storybook bindings for Rescript
Stars: ✭ 76 (+300%)
Mutual labels:  storybook
react-imageViewer
React component for image displaying in full screen
Stars: ✭ 61 (+221.05%)
Mutual labels:  storybook
babel-plugin-storybook-csf-title
A Babel plugin to generate titles for Storybook CSF stories at compile time, typically based on the story file's file name.
Stars: ✭ 17 (-10.53%)
Mutual labels:  storybook
lerna-starter
Simple React UI Development environment boilerplate to develop, test and publish your React components.
Stars: ✭ 55 (+189.47%)
Mutual labels:  storybook
storybook-addon-blabbr
Component reviewer for React Storybook
Stars: ✭ 13 (-31.58%)
Mutual labels:  storybook


MetaBrainz Design System

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.

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:

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].