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/react
2. Import package to your project:
import { HuiProvider, CssBaseline } from '@brudi-hui/react'

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

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/react/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/react. 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.