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:
pnpm i @brudi/hui
2. Import package to your project:
import { HuiProvider, CssBaseline } from 'packages/hui/dist/index'
const Application = () => (
<HuiProvider>
<CssBaseline /> // ---> Normalize styles
<MyComponent /> // ---> Your App Component
</HuiProvider>
)
3. Use the AX HUI components anywhere:
import { Button } from 'packages/hui/dist/index'
const MyComponent = () => <Button>Click Me</Button>
AX 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.