Docs
Introduction

Introduction

NEXT UI Kit is Hitachi Vantara open source React component library for products and digital solutions.

With the NEXT Design System (opens in a new tab) as its foundation, it provides a collection of reusable React components, that guarantees the alignment with the design specifications, and stands as a catalyser for a consistent overall user experience across Hitachi portfolio.​

NEXT UI Kit provides developers with the tools they need to build more product in less time, while saving them from the mind-numbing work of creating the same base components over and over again.

Guiding principles

NEXT UI Kit builds consistency. Every element and component was built to have an intuitive and familiar API to boost development experience and ensure consistent and cohesive user experiences.

NEXT UI Kit is modular and flexible. The system’s modularity ensures maximum flexibility, allowing developers to easily integrate individual components seamlessly with each other.

NEXT UI Kit is customizable. It includes a variety of customization options, allowing developers to tailor the UI to match their design needs.

NEXT UI Kit is inclusive. It’s designed and built to be accessible to all, regardless of any physical or cognitive impairments.

Resources

Components, Widgets and Templates

NEXT UI Kit provides a collection of Components, Widgets and Templates that can be used to build a wide range of products and digital solutions. All are important elements, but they differ in their function and purpose:

Components

UI Building blocks that can be used in various combinations to create a larger user interface.

Widgets

Specialized components that address specific use cases and can be used as base to support other scenarios.

Templates

Pre-designed layouts that address common UI patterns and can be used to quickly create a consistent design.

Packages

NEXT UI Kit resources are distributed across multiple npm packages. This allows greater flexibility, easier management of the dependencies and ensures that the library remains maintainable and scalable over time.

  • Core - Core React components for the Next Design System.
  • Icons - NEXT Design System icons packaged as a set of React components.
  • Shared - Shared React contexts for the NEXT UI Kit.
  • Styles - NEXT UI Kit styling solution for the Next Design System.
  • Lab - Contributed React components for the NEXT UI Kit.
  • Viz - React visualizations for the NEXT Design System.
  • Code Editor - React Monaco editor for the NEXT Design System.
  • UnoCSS Preset - UnoCSS preset for styling with Utility Classes.

Accessibility

We target our development and tests to meet WCAG (opens in a new tab) and Section 508 (opens in a new tab) standards.
Since many of our components are custom built, there might be areas where the accessibility of a component can be improved. If there is any component where you think improvements can be made, please reach out to us.

Even though we're focused on developing a component library that is compliant with these standards, the application in which the components are integrated into has the responsibility of ensuring that the individual components are configured correctly and that the integration of those components produce an accessible application.

Community

We support adoption. The UI Kit team is committed on helping members of the community to be successful in the adoption of the UI Kit. We conduct training classes, run meetups and engage regularly with users to help them on using the UI Kit.

We promote contribution. We encourage contributions from the community following a more collaborative and engaged development process.

We engage the community. We strive to always be better and we’re always open to feedback. Stay up to date on the development of the UI Kit or to reach out to the community:

License

This project is licensed under the terms of the Apache 2.0 license (opens in a new tab).

Get Started