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 @pentaho/uikit-react-core package, in the public npm repository.


npm i @pentaho/uikit-react-core


pnpm add @pentaho/uikit-react-core


yarn add @pentaho/uikit-react-core


bun add @pentaho/uikit-react-core

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


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

Typography

import { HvButton, HvTypography } from "@pentaho/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 "@pentaho/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:

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