Components

UI Kit Components are the building blocks of your application.
They are designed to be reusable and customizable, allowing you to create a consistent look and feel across your app.

Most components are available in the core package , available in the public npm repository:


npm i @hitachivantara/uikit-react-core

The components can then be imported and used as shown below:


import { HvButton, HvTypography } from "@hitachivantara/uikit-react-core";

Typography

<div className="flex gap-sm">
  <HvButton variant="primary">Button</HvButton>
  <HvTypography variant="title3">Typography</HvTypography>
</div>

<div className="flex gap-sm">
  <HvButton variant="primary">Button</HvButton>
  <HvTypography variant="title3">Typography</HvTypography>
</div>

Besides the main core package, we also provide the following packages for more specific use-cases:

@hitachivantara/uikit-react-icons (Docs): A collection of React icons for the NEXT Design System.
@hitachivantara/uikit-react-lab (Docs): A collection of experimental React components.
@hitachivantara/uikit-react-viz (Docs): A collection of chart components for use in your application.
@hitachivantara/uikit-react-code-editor (Docs): A specialized wrapper around the Monaco Editor .