Hitachi Vantara UI Kit

React UI library for the Hitachi Vantara Design System.

Why use the UI Kit?

• Ready to go: Start your project with over 50 high-quality React components out of the box.
• Composable: Compose your UI with reusable building blocks.
• Accessible: UI Kit follows WAI-ARIA standards, helping you to reach the largest audience possible with less effort.
• Themeable: Use Hitachi Vantara Design System or customize it using the theming features.

Installing 🚀

UI Kit is available as an npm package. All you need to do is install the @hitachivantara/uikit-react-core package and its peer dependencies:

npm install @hitachivantara/uikit-react-core @mui/material @mui/styles @emotion/react @emotion/styled

Other packages available

If you need to use any non-core community contributed component, install the @hitachivantara/uikit-react-lab package.

npm install @hitachivantara/uikit-react-lab

Also available:

• Viz - npm install @hitachivantara/uikit-react-viz
• Icons - npm install @hitachivantara/uikit-react-icons
  • installed as a dependency of uikit-react-core
• Themes - npm install @hitachivantara/uikit-common-themes
  • shouldn't be necessary out of a very specific use case.
• Compat - npm install @hitachivantara/uikit-react-compat
• Code Editor - npm install @hitachivantara/uikit-react-code-editor

Installing an older version

Older versions use a different registry and import names. If needed, please follow the documentation at https://lumada-design.github.io/uikit/v3-old-registry/?path=/docs/get-started-installation--page.

If your project's design follows DS 1.x you must use the UI Kit 2.x release. Check https://lumada-design.github.io/uikit/v2.x/?path=/docs/get-started-installation--page for instructions.

Usage

1. Wrap your application with the HvProvider provided by @hitachivantara/uikit-react-core.

import { HvProvider } from "@hitachivantara/uikit-react-core";

// Do this at the root of your application
function App({ children }) {
  return <HvProvider>{children}</HvProvider>;
}

Optionally, you can configure the active theme and locale, among others. Check the Provider's API documentation for further details.

2. Now you can start using components:

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

function Example() {
  return <HvButton>Hello from UI Kit!</HvButton>;
}

3. For a fully functioning setup, you'll also need to setup a CSS Baseline and ensure the loading of the Open Sans font.

Documentation

See our documentation site here for full how-to docs and guidelines

Changelog

Recently Updated? Please read the packages changelog: core, lab, compat, code-editor, viz, icons, themes.

Contributing

Please check out our Contribution Guidelines and let's build a better UI Kit together.

We welcome all contributions. You can help us fixing bugs or submit any new ideas, as pull requests or as GitHub issues.

Join and support the project!

Team

The UI Kit is maintained by a small group of invaluable core contributors, with the support and involvement of the Hitachi Vantara community. 😄

• Francisco Guilherme (@francisco-guilherme)
• Henrique Raposo (@HQFOX)
• Márcia Esteves (@MEsteves22)
• Paulo Lagoá (@plagoa)

License

This project is licensed under the terms of the Apache 2.0 license.

Details for the required packages and their licenses can be obtained in https://knowledge.hitachivantara.com/Documents/Open_Source_Software.