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
3. Use the brudi HUI components anywhere:3. Use the brudi HUI components anywhere:
import { HuiProvider, CssBaseline } from 'packages/hui/dist/index' const Application = () => ( <HuiProvider> <CssBaseline /> // ---> Normalize styles <MyComponent /> // ---> Your App Component </HuiProvider> )
import { Button } from 'packages/hui/dist/index' const MyComponent = () => <Button>Click Me</Button>
brudi HUI supports importing single, specific components when you need them. This is referred to as
tree-shaking.
E.g.
import Button from '@brudi/hui/esm/button' const MyComponent = () => <Button>Click Me</Button>
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.