Skip to Content
DocsGet started

Get Started

If you just want to try out UI Kit without setting up a local project, launch one of our live examples:

Open on StackBlitzOpen on CodeSandbox

Automatic Installation

The quickest way to start a UI Kit project is with our CLI:

npx @hitachivantara/hv-uikit-cli@latest create

This 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/material

Set 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>;
};
Last updated on
IntroductionProject Status