How to Create NextUI in Next.js? (React UI Library)

UI libraries are very helpful for developers as they provide easy-to-use functions and components that can be easily added to the application. In this article, we will discuss NextUI, a new UI library designed for use with React and Next.js. Like the famous Material-UI (MUI), NextUI provides many components that you can use in different parts of the application, such as navigation bars, tooltips, tabs, and pagination.

We’ll show you how to use NextUI to set up a simple e-commerce website. To follow this guide, you should know the basics of JavaScript, React, and Next.js. Make sure you have Node.js LTS v20.12.2 and VS Code installed on your computer.

What is a UI library?

A UI library is a collection of ready-made components like buttons, navigation bars, tooltips, and tabs that developers can use to quickly create projects. Some well-known examples include React Bootstrap, which uses Bootstrap, and Material-UI, which is a popular alternative for React apps.

What is NextUI?

NextUI is a library for React that helps you easily create stylish and effective websites or apps. It uses tools called React and Stitches and is designed to be accessible and easy to use, taking inspiration from another library called Vuesax.

Why Choose NextUI?

NextUI is attractive because it looks good and is easy to use. Its components meet accessibility standards, meaning they’re designed to work well with keyboard input and help manage where the focus is on your page.

NextUI lets you change the look of components using simple styling options with CSS. You can also easily make changes to the theme to change colors, fonts, and more. Plus, it offers a dark mode that you can add to your app with a few lines of code, making it versatile for a variety of design needs.

Let’s have a look at how to create a React component using JavaScript:

1. Creating components

React defines components as functions. Create a new function named header within the script tag.

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
  }
 
  const root = ReactDOM.createRoot(app);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

A component is a function that returns user interface elements. Inside the function’s return statement, you can write JSX:

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
     return (<h1>Develop. Preview. Ship.</h1>)
   }
 
  const root = ReactDOM.createRoot(app);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

To render this component in the DOM, offer it as the first parameter in the root.render() function.

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
     return (<h1>Develop. Preview. Ship.</h1>)
   }
 
  const root = ReactDOM.createRoot(app);
  root.render(header);
</script>

But wait a second. If you attempt to execute the code above in your browser, you will receive an error. To make this work, you need to accomplish two things:

First, React components should be capitalized to distinguish them from simple HTML and JavaScript.

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
const root = ReactDOM.createRoot(app);
// Capitalize the React Component
root.render(Header);

To utilize React components, use angle brackets like standard HTML tags: <>.

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

If you run the code in your browser again, you will see your modifications.

2. Nesting components

Applications frequently include more material than just one component. You can layer React components like standard HTML elements.

In your example, add a new component named HomePage.

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return <div></div>;
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

Then nest the <Header> component inside the new <HomePage>component:

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return (
    <div>
      {/* Nesting the Header component */}
      <Header />
    </div>
  );
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

3. Component trees

You can continue nesting React components in this manner to create component trees.

A top-level HomePage component might have a header, article, and footer. Each of these components might have its child components, and so forth. For instance, the Header component may include a Logo, Title, and Navigation component.

This modular style lets you reuse components in several locations across your program.

In your project, since <HomePage> is now your top-level component, you can pass it to the root.render() method:

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return (
    <div>
      <Header />
    </div>
  );
}
 
const root = ReactDOM.createRoot(app);
root.render(<HomePage />);