All Projects β†’ strapi β†’ design-system

strapi / design-system

Licence: MIT license
Strapi.io's design system πŸš€

Programming Languages

javascript
184084 projects - #8 most used programming language
Handlebars
879 projects

Projects that are alternatives of or similar to design-system

Welcome Ui
Customizable design system of @wttj with react β€’ styled-components β€’ styled-system β€’ reakit
Stars: ✭ 256 (-2.29%)
Mutual labels:  styled-components, design-system
Orbit
React components of open-source Orbit design system by Kiwi.com
Stars: ✭ 774 (+195.42%)
Mutual labels:  styled-components, design-system
Community Platform
A series of tools for the Precious Plastic community to collaborate around the world and tackle plastic waste.
Stars: ✭ 343 (+30.92%)
Mutual labels:  styled-components, design-system
sugui
UI Components library based on React, Styled Components and React Testing Library
Stars: ✭ 17 (-93.51%)
Mutual labels:  styled-components, design-system
Fluid System
Fluid System is a style props function transformer for generating fluid styles. πŸ’¦
Stars: ✭ 130 (-50.38%)
Mutual labels:  styled-components, design-system
smores-react
🍭 Marshmallow React components
Stars: ✭ 34 (-87.02%)
Mutual labels:  styled-components, design-system
Design System
Priceline.com Design System
Stars: ✭ 604 (+130.53%)
Mutual labels:  styled-components, design-system
lab-cli
Command line utilities and exporting module for Compositor Lab
Stars: ✭ 52 (-80.15%)
Mutual labels:  styled-components, design-system
React95
A React components library with Win95 UI
Stars: ✭ 1,779 (+579.01%)
Mutual labels:  styled-components, design-system
Leaf Ui
πŸƒ Leaf-UI: A react component library built using styled-components
Stars: ✭ 98 (-62.6%)
Mutual labels:  styled-components, design-system
React95
πŸŒˆπŸ•Ή Refreshed Windows 95 style UI components for your React app
Stars: ✭ 4,877 (+1761.45%)
Mutual labels:  styled-components, design-system
rebass
βš›οΈ React primitive UI components built with styled-system.
Stars: ✭ 7,844 (+2893.89%)
Mutual labels:  styled-components, design-system
Sugui Design System
A design system template for the SugUI components library based on styleguidist
Stars: ✭ 17 (-93.51%)
Mutual labels:  styled-components, design-system
Styled Bootstrap Components
The bootstrap components made with styled-components πŸ’…
Stars: ✭ 196 (-25.19%)
Mutual labels:  styled-components, design-system
design-system
Nulogy Design System
Stars: ✭ 61 (-76.72%)
Mutual labels:  styled-components, design-system
ancestor
πŸ’€ UI primitives for ReScript and React
Stars: ✭ 144 (-45.04%)
Mutual labels:  design-system
booktez-client
πŸ“šμ§„μ§œ λ…μ„œκ°€λ“€μ˜ λ…μ„œλ²• - λΆμŠ€ν…Œμ–΄μ¦ˆ (React)
Stars: ✭ 53 (-79.77%)
Mutual labels:  styled-components
hubble-scripts
πŸ”­ πŸ“œ Transform Sketch config data & assets into dev-friendly formats.
Stars: ✭ 23 (-91.22%)
Mutual labels:  design-system
ray
Resources for building interfaces with WeWork's design system
Stars: ✭ 55 (-79.01%)
Mutual labels:  design-system
react-styled-flexbox
A Flexbox React component harnessing the power of styled-components
Stars: ✭ 30 (-88.55%)
Mutual labels:  styled-components

Strapi logo

Documentation|Try components


NPM Version Bundle Size Playwright tests Strapi on Discord

Welcome! πŸ‘‹πŸ‘‹πŸ‘‹

Strapi Design System provides guidelines and tools to help anyone make Strapi's contributions more cohesive and to build plugins more efficiently.

Installation

Install Strapi Design System and its peer dependencies:

$ yarn add react react-dom @strapi/design-system @strapi/icons styled-components react-router-dom

# or

$ npm i react react-dom @strapi/design-system @strapi/icons styled-components react-router-dom

Usage

Wrap your application with the ThemeProvider and pass the default lightTheme provided by @strapi/design-system.

import { ThemeProvider, lightTheme } from '@strapi/design-system';

function App({ children }) {
  return <ThemeProvider theme={lightTheme}>{children}</ThemeProvider>;
}

export default App;

Testing a specific branch

Make sure to have the project already cloned (see previous point). Then, run the following commands:

# Inside the folder
$ git checkout BRANCH_NAME # BRANCH_NAME concerns the modifications to tests
$ yarn setup # reinstall dependencies & prepare lerna packages

If you encounter problems doing so, run the following command and retry the previous one:

$ git reset --hard
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].