The Comic relief design system for React.js projects.
Our goal is to create a design system that is lightweight for the user and contrasts with the stress situations they may be experiencing. As a result we want them to have a fun and quiet experience 😌
We use Storybook to document and review the development of our design system. There you will find what components do we have, how they look, and what code you should use to implement them.
Momo UI components are developed with React.js using styled-components. To set general styles and use it in your own React project, follow these instructions:
- Install the npm momo-ui package in your project
yarn add @superys/momo-ui
or
npm i @superys/momo-ui
- Load fonts and icons (phosphor icons) in your
public/index.htmlhead tag
<head>
...
<!-- Load Google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito+Sans:wght@300;400;600;700&family=Quicksand:wght@400;700&display=swap"
rel="stylesheet"
/>
<!-- Load Phosphor icons -->
<script src="https://unpkg.com/phosphor-icons"></script>
</head>- Wrap everything with
MomoStyleWrapperbefore your app is mounted (probablysrc/index.jsx)
...
import { MomoStyleWrapper } from "@superys/momo-ui";
...
ReactDOM.render(
<React.StrictMode>
<MomoStyleWrapper>
<App />
</MomoStyleWrapper>
</React.StrictMode>,
document.getElementById("root")
);- Use the components in your app! Check our storybook to see the available components and how to sue them.
import { Button } from "@superys/momo-ui";
function App() {
return (
<div>
...
<Button>You got it!</Button>
</div>
);
}- (Optional) Use the utils variables (colors, type scales, fonts, etc) in case you need them!
import styled from 'styled-components';
import { yellow } from '@superys/momo-ui';
const WarningBox = styled.div`
border: 2px solid ${yellow[300]};
background-color: ${yellow[200]};
`We know you love our colors and style! But we also know you might need to tweak them sometimes to match your brand. You can do it by creating a custom theme, based on our defaultTheme and passing it to the MomoStyleWrapper.
...
import { MomoStyleWrapper, defaultTheme, neutral } from "@superys/momo-ui";
...
const pink = { [300]: "#EF6AC3", [400]: "#EF6AC3" };
const customTheme = {
...defaultTheme,
palettes: { ...defaultTheme.palettes, pink },
primary: { main: pink[400], hover: pink[300], contrast: neutral[100] },
};
ReactDOM.render(
<React.StrictMode>
<MomoStyleWrapper theme={customTheme}>
<App />
</MomoStyleWrapper>
</React.StrictMode>,
document.getElementById("root")
);You're ready to go. To know more about momo-ui components, please check our storybook where you will find everything you need to use our components.
We're still working hard to make momo-ui grow and be available for anyone. If you'd like to contribute designing or coding, please get in touch! [email protected]
- Find ways to contribute [contribution docs in progress ...]
- Prep to commit code [code-contribution docs in progress ...]
Install nvm
nvm install
nvm use
Install dependencies and Run the storybook in localhost:6006
yarn
yarn storybook
The idea is that anyone can use this design system in their projects, as long as the result source code is open to the public. We use the GNU GENERAL PUBLIC LICENSE Version 3.