Skip to content

strapi/design-system

Folders and files

NameName
Last commit message
Last commit date
Feb 21, 2025
Jul 9, 2024
Sep 11, 2023
Aug 16, 2023
Sep 20, 2024
Apr 22, 2023
Dec 8, 2021
Feb 10, 2025
Feb 21, 2025
Apr 15, 2024
Apr 15, 2024
Aug 16, 2023
Aug 15, 2023
Apr 15, 2024
Feb 6, 2023
Apr 30, 2024
Apr 15, 2024
Apr 30, 2024
Nov 25, 2022
Apr 15, 2024
Apr 15, 2024
Aug 16, 2023
Sep 2, 2024
Jan 3, 2023
Sep 5, 2024
Apr 30, 2024
Nov 7, 2024
Apr 30, 2024
Jun 12, 2024
Feb 21, 2025

Repository files navigation

Strapi logo

Documentation

Version Downloads Discord Shield

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

# 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.

Thanks

Chromatic