Hummingbird UI

A design system created by SES. View the published storybook here!

Usage

Install MUI with the following:

npm install @mui/material @emotion/react @emotion/styled

Install Hummingbird UI with the following command:

npm i hummingbird-ui

In your App.js file, import either the light theme or dark theme from the package.

import { lightTheme } from 'hummingbird-ui';

In the same App.js file, import ThemeProvider and CssBaseline from the MUI Library.

import { ThemeProvider, CssBaseline } from '@mui/material';

Wrap your code in the ThemeProvider and CssBaseline tags with the hummingbird-ui theme of choice.

function App() {
  return (
    <ThemeProvider theme={ lightTheme }>
      <CssBaseline/>
        // Your code goes here
    </ThemeProvider>
  );
}

export default App;

The customized Hummingbird UI theme is now applied across all your MUI components. Enjoy!

Chromatic

Collaborators can access Chromatic via this link.

Tech Stack

Building components

• Storybook for UI component developent and auto-generated docs
• React declarative component-centric UI based on MUI, a comprehensive UI library
• Chromatic to deploy and host our Storybook safely and securely in the cloud

Maintaining the system

• NPM for packaging and distribution

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!