Ensure your have the latest version of NodeJS, and a package manager: NPM or Yarn. If you want to see a complete example, please browse our sample collection.

1. Run script to download:
yarn add @brudi/hui
2. Import package to your project:
import { HuiProvider, CssBaseline } from 'packages/hui/dist/index'

const Application = () => (
    <CssBaseline /> // ---> Normalize styles
    <MyComponent /> // ---> Your App Component
3. Use the brudi HUI components anywhere:
import { Button } from 'packages/hui/dist/index'

const MyComponent = () => <Button>Click Me</Button>

Single component

brudi HUI supports importing single, specific components when you need them. This is referred to as tree-shaking.


import Button from '@brudi/hui/esm/button'

const MyComponent = () => <Button>Click Me</Button>

Create React App

A React project created by create-react-app can also easily use @brudi/hui. You don't need to make any changes, just install and use. We have a sample project related to create react app here.

If you want to eject certain configs, tree-shaking, please refer to this example.


In the next.js project, you need to customize the app.jsx entry file to load the provider. Start your NextJS project with this example.