@strapi/design-system

Strapi Design System

A UI component library for creating amazing Strapi extensions.

Installation

$ 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

Getting Started

Wrap your application with the DesignSystemProvider. You can additionally pass a theme and/or locale, although you don't have to as we have default values for both.

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

function MyApp({ children }) {
  return (
    <DesignSystemProvider locale="en-GB" theme={lightTheme}>
      {children}
    </DesignSystemProvider>
  );
}

export default App;

Then, checkout the complete Storybook documentation to find the components you want to use and how to use them.

Contributing

Please follow our CONTRIBUTING guidelines.

License

Licensed under the MIT License, Copyright © 2015-present Strapi Solutions SAS.

See LICENSE for more information.

Similar packages

Other packages similar to @strapi/design-system

material-ui

Material-UI is a popular React UI framework that implements Google's Material Design. It offers a wide range of components and customization options, making it a versatile choice for building modern web applications. Compared to @strapi/design-system, Material-UI is more general-purpose and widely adopted.

chakra-ui

Chakra UI is a simple, modular, and accessible component library that gives you the building blocks to build React applications with speed. It focuses on ease of use and accessibility, similar to @strapi/design-system, but is not tied to any specific CMS.

ant-design

Ant Design is a comprehensive design system and React UI library developed by Alibaba. It provides a wide range of high-quality components and design guidelines. Ant Design is more feature-rich and enterprise-focused compared to @strapi/design-system.