@strapi/design-system

What is @strapi/design-system?

@strapi/design-system is a design system package for Strapi, a popular open-source headless CMS. It provides a set of reusable React components and utilities to help developers build consistent and accessible user interfaces within the Strapi ecosystem.

What are @strapi/design-system's main functionalities?

Button

The Button component is a reusable button element that can be used to trigger actions or navigate within the application.

import { Button } from '@strapi/design-system/Button';

const MyButton = () => (
  <Button onClick={() => alert('Button clicked!')}>Click Me</Button>
);

Typography

The Typography component allows you to apply consistent text styles across your application, ensuring a uniform look and feel.

import { Typography } from '@strapi/design-system/Typography';

const MyText = () => (
  <Typography variant="alpha">Hello, World!</Typography>
);

Modal

The Modal component provides a way to display content in a dialog box that overlays the main content, useful for forms, alerts, and additional information.

import { Modal, ModalHeader, ModalBody, ModalFooter } from '@strapi/design-system/Modal';
import { Button } from '@strapi/design-system/Button';

const MyModal = ({ isOpen, onClose }) => (
  <Modal isOpen={isOpen} onClose={onClose}>
    <ModalHeader>Modal Title</ModalHeader>
    <ModalBody>
      <p>This is the modal content.</p>
    </ModalBody>
    <ModalFooter>
      <Button onClick={onClose}>Close</Button>
    </ModalFooter>
  </Modal>
);

Grid

The Grid component helps in creating responsive layouts by dividing the space into columns and rows, making it easier to align and distribute content.

import { Grid, GridItem } from '@strapi/design-system/Grid';

const MyGrid = () => (
  <Grid gap={4}>
    <GridItem col={6}>Item 1</GridItem>
    <GridItem col={6}>Item 2</GridItem>
  </Grid>
);

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.

README

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

# or

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

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.