
Security News
npm ‘is’ Package Hijacked in Expanding Supply Chain Attack
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.
@strapi/design-system
Advanced tools
[](https://www.npmjs.com/package/@strapi/design-system) [ => (
<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>
);
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 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 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.
A UI component library for creating amazing Strapi extensions.
$ 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
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.
Please follow our CONTRIBUTING guidelines.
Licensed under the MIT License, Copyright © 2015-present Strapi Solutions SAS.
See LICENSE for more information.
FAQs
[](https://www.npmjs.com/package/@strapi/design-system) [![Downloads](https://img.shields.io/npm/dt/@strapi/design-system.svg?style=flat&colorA=4945ff&col
The npm package @strapi/design-system receives a total of 202,506 weekly downloads. As such, @strapi/design-system popularity was classified as popular.
We found that @strapi/design-system demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.
Security News
A critical flaw in the popular npm form-data package could allow HTTP parameter pollution, affecting millions of projects until patched versions are adopted.
Security News
Bun 1.2.19 introduces isolated installs for smoother monorepo workflows, along with performance boosts, new tooling, and key compatibility fixes.