Quickly build apps that follow the HV Design System's patterns and specifications.
HV UI Kit is composed of multiple mostly independent npm packages. You can install them in any working React v16.x or x17.x project.
Install the @hitachivantara/uikit-react-core package and its peer dependencies:
npm install @hitachivantara/uikit-react-core @mui/material @mui/stylesIf you need to use any non-core community contributed package, install the @hitachivantara/uikit-react-lab package.
npm install @hitachivantara/uikit-react-labAlso available:
- code-editor -
npm install @hitachivantara/uikit-react-code-editor - visualizations -
npm install @hitachivantara/uikit-react-viz - compat - `npm install @hitachivantara/uikit-react-compat
- icons -
npm install @hitachivantara/uikit-react-icons - themes -
npm install @hitachivantara/uikit-common-themes
The @hitachivantara/uikit-react-icons is installed as a dependency of @hitachivantara/uikit-react-core and the @hitachivantara/uikit-common-themes shouldn't be necessary out of a very specific use case.
The above commands will install the latest version of UI Kit 4.x. It implements the DS 3.x specifications.
Older v3.x packages 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.
- Wrap your application with the
HvProviderprovided 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.
- Now you can start using components:
import { HvButton } from "@hitachivantara/uikit-react-core";
function Example() {
return <HvButton>Hello from UI Kit!</HvButton>;
}Check out our documentation website.
Recently Updated? Please read the packages changelog: core, lab, compat, code-editor, viz, icons, themes.
Please check out our Contribution Guidelines for detailed information.
You need to ask to be added as a project member, to be able to contribute:
- #ui-kit slack channel on the hitachivantara-eng workspace.
- #ui-kit slack channel on the hitachi-design workspace.
If you find a bug in the source code, you can help us by submitting an issue to this repo. Even better you can submit a Pull Request with a fix.
You can request a new feature by submitting an issue to this repo. Features can be new components or changes to existing.
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.
The UI Kit is maintained by a small group of invaluable core contributors, with the support and involvement of the Hitachi Vantara community. 😄
- Elio Freitas (@eliofreitas)
- Francisco Guilherme (@francisco-guilherme)
- Henrique Raposo (@HQFOX)
- Paulo Lagoá (@plagoa)
Get involved with our development by opening an issue or submitting a pull request. Read the contributing guidelines for information on how we develop.
Join and support the project!