Get Started
If you just want to try out UI Kit without setting up a local project, launch one of our live examples:
Automatic Installation
The quickest way to start a UI Kit project is with our CLI:
npx @hitachivantara/hv-uikit-cli@latest createThis will scaffold a preconfigured project with all dependencies and setup included.
Manual Installation
Prefer to set things up yourself? Follow these steps:
Install Packages
@emotion/react and @mui/material are required peer dependencies.
npm i @hitachivantara/uikit-react-core @emotion/react @emotion/styled @mui/materialSet Up the Provider
Wrap your app with HvProvider to enable theming and global configuration:
// 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 UI Kit Components
Now you can start building with UI Kit components:
import { HvTypography } from "@hitachivantara/uikit-react-core";
const MyComponent = () => {
return <HvTypography>Hello from the UI Kit team!</HvTypography>;
};