https://github.com/strapi/design-system

Strapi.io's design system :rocket:
https://github.com/strapi/design-system

design-system styled-components

Last synced: 6 days ago
JSON representation

Strapi.io's design system :rocket:

• Host: GitHub
• URL: https://github.com/strapi/design-system
• Owner: strapi
• License: mit
• Created: 2021-02-19T14:41:14.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2025-04-04T12:12:05.000Z (16 days ago)
• Last Synced: 2025-04-07T01:11:18.752Z (14 days ago)
• Topics: design-system, styled-components
• Language: TypeScript
• Homepage: https://design-system.strapi.io
• Size: 23.1 MB
• Stars: 488
• Watchers: 18
• Forks: 182
• Open Issues: 35
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        


  

    

  





Documentation




[![Version](https://img.shields.io/npm/v/@strapi/design-system?style=flat&colorA=4945ff&colorB=4945ff)](https://www.npmjs.com/package/@strapi/design-system)

[![Downloads](https://img.shields.io/npm/dt/@strapi/design-system.svg?style=flat&colorA=4945ff&colorB=4945ff)](https://www.npmjs.com/package/@strapi/design-system)

[![Discord Shield](https://img.shields.io/discord/811989166782021633?style=flat&colorA=4945ff&colorB=4945ff&label=discord&logo=discord&logoColor=f0f0ff)](https://discord.gg/strapi)

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

```sh

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

```jsx

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

function MyApp({ children }) {

  return (

    

      {children}

    

  );

}

export default App;

```

Then, checkout the complete [Storybook documentation](https://design-system-git-main-strapijs.vercel.app/) to find the components you want to use and how to use them.

## Contributing

Please follow our [CONTRIBUTING](https://github.com/strapi/design-system/blob/main/CONTRIBUTING.md) guidelines.

## License

Licensed under the MIT License, Copyright © 2015-present [Strapi Solutions SAS](https://strapi.io).

See [LICENSE](https://github.com/strapi/design-system/blob/main/LICENSE) for more information.

## Thanks