Get Started
Play Online
If you just want to play around with UI Kit without setting up a project, you can use one of our online sandboxes:
Automatic Installation
Using the CLI is the easiest way to start a UI Kit project. You can initialize your project directly via the CLI:
npx @hitachivantara/hv-uikit-cli@latest createManual Installation
If you prefer not to use the CLI, follow these steps to manually set up UI Kit in your project:
Install packages
Emotion and MUI are peer dependencies and must be included in your project.
To use UI Kit in your project, run the following command:
npm install @hitachivantara/uikit-react-core @emotion/react @emotion/styled @mui/materialProvider Setup
It is essential to add the UI Kit Provider at the root of your application.
// 1. import `Provider` component
import { HvProvider } from "@hitachivantara/uikit-react-core";
function App() {
// 2. Wrap Provider at the root of your app
return (
<HvProvider>
<YourApplication />
</HvProvider>
);
}Use the components
After setting up the provider, you can start using the components provided.
import { HvTypography } from "@hitachivantara/uikit-react-core";
const MyComponent = () => {
return <HvTypography>Hello from the NEXT UI team!</HvTypography>;
};