Core Components

UI Kit Core Components are the building blocks of your application.

The components in this package are designed to be:

Mature and Consistent, following the Design System specification.
Lightweight, optimized for performance with limited external dependencies.
Reusable and customizable, with a focus on composition.
Accessible, addressing specific usability scenarios.

Usage

These components are available at the @hitachivantara/uikit-react-core package, in the public npm repository.


npm i @hitachivantara/uikit-react-core


pnpm add @hitachivantara/uikit-react-core


yarn add @hitachivantara/uikit-react-core


bun add @hitachivantara/uikit-react-core

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


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

Typography

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


export default function Demo() {
  return (
    <div className="flex gap-sm">
      <HvButton variant="primary">Button</HvButton>
      <HvTypography variant="title3">Typography</HvTypography>
    </div>
  );
}

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

export default function Demo() {
  return (
    <div className="flex gap-sm">
      <HvButton variant="primary">Button</HvButton>
      <HvTypography variant="title3">Typography</HvTypography>
    </div>
  );
}

Other components

Besides the core package, we also provide the following component packages that address more specific use-cases:

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