https://github.com/storyblok/mui
A MUI theme with components styled for Storyblok.
https://github.com/storyblok/mui
mui plugins storyblok storybook
Last synced: 3 months ago
JSON representation
A MUI theme with components styled for Storyblok.
- Host: GitHub
- URL: https://github.com/storyblok/mui
- Owner: storyblok
- License: mit
- Created: 2022-08-26T14:04:01.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-03-13T15:32:33.000Z (7 months ago)
- Last Synced: 2025-07-03T01:29:47.564Z (3 months ago)
- Topics: mui, plugins, storyblok, storybook
- Language: TypeScript
- Homepage: https://storyblok-mui.vercel.app
- Size: 1.33 MB
- Stars: 10
- Watchers: 14
- Forks: 1
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
@storyblok/mui
A MUI Theme with multiple additional reusable components for Storyblok.
[](https://github.com/storyblok/mui/actions/workflows/npm-publish.yml)
`@storybook/mui` is a component library based on [MUI](https://mui.com/). It is the ideal package to use for building Storyblok extensions with React as it takes care of the task of styling your components and lets you focus on building business logic. Thus, extensions built with `@storybook/mui` will seamlessly, visually integrate into Storyblok.
Find the full documentation for this package [here](https://storyblok-mui.vercel.app/).
## What is MUI?
From [mui.com](https://mui.com/material-ui/getting-started/overview/):
> MUI is an open-source React component library that implements Google's Material Design.
>
> It includes a comprehensive collection of prebuilt components that are ready for use in production right out of the box.
## What is included in this package?
`@storybook/mui` consists of a [MUI theme](https://mui.com/material-ui/customization/theming/) that styles the MUI standard components according to [Storyblok's design system](https://blok.ink). Since `@storybook/mui` is based on MUI, all the [MUI standard components](https://mui.com/material-ui/getting-started/supported-components/) are available. Some of these components are visualised in the [MUI Components section](https://storyblok-mui.vercel.app/?path=/story/mui).
`@storybook/mui` also provides some additional components that are unique to this package. For example, the `` component is great for building custom application extensions. The documentation for all these components is located [here](https://storyblok-mui.vercel.app/).
## Getting Started
The steps below explains how to include `@storyblok/mui` in your project.
### Prerequisites
First of all, set up MUI with the help of [MUI's official documentation](https://mui.com/).
With npm:
```shell
npm install @mui/material @emotion/react @emotion/styled
```
With yarn:
```shell
yarn add @mui/material @emotion/react @emotion/styled
```
### Installation
Install `@storyblok/mui`:
````shell
npm install --save-exact @storyblok/mui
````
With yarn:
````shell
yarn add --exact @storyblok/mui
````
Wrap your application within a ` component`:
````typescript jsx
import { lightTheme } from '@storyblok/mui'
import {
CssBaseline,
Button,
ThemeProvider
} from "@mui/material";
const App = () => (
Hello
)
````