Get Started

Play Online

If you just want to play around with NEXT UI without setting up a project, you can use one of our online sandboxes:

Open on StackBlitz →Open on CodeSandbox →

Automatic Installation

Using the CLI is the easiest way to start a NEXT UI project. You can initialize your project directly via the CLI:

npx @next-design-labs/next-ui-cli@latest create

Manual Installation

If you prefer not to use the CLI, follow these steps to manually set up NEXT UI in your project:

Install packages

To use NEXT UI in your project, run the following command: react and react-dom are peer dependencies and must be included in your project.

npm install @next-design-labs/next-ui-core @mui/base

Provider Setup

It is essential to add the NEXT UI Provider at the root of your application.

import * as React from "react";
 
// 1. import `Provider` component
import { Provider } from "@next-design-labs/next-ui-core";
 
function App() {
  // 2. Wrap Provider at the root of your app
  return (
    <Provider>
      <YourApplication />
    </Provider>
  );
}

Use the components

After setting up the provider, you can start using the components provided.

import { HvTypography } from "@hitachivantara/uikit-react-core";
 
const MyComponent = () => {
  return <HvTypography>Hello from the NEXT UI team!</HvTypography>;
};

Introduction Changelog