Chapter 7: Using UI Frameworks

In the previous chapter, we saw how Next.js can improve our productivity by giving us many valid alternatives for writing CSS without the need to install and configure many different external packages.

Still, there are cases where we may want to use pre-built UI libraries to take advantage of their components, themes, and built-in features so that we don't have to build them from scratch and to take advantage of a vast community that can help us when any problem occurs.

In this chapter, we will discover some modern UI libraries and learn how to integrate them properly in any Next.js application. We will look at the following in detail:

• What UI libraries are and why we might need them
• How to integrate Chakra UI
• How to integrate TailwindCSS
• How to use Headless UI components

By the end of the chapter, you will be able to integrate any UI library by following the tips and principles that we'll see in the following...

Technical requirements

To run the code examples in this chapter, you need to have both Node.js and npm installed on your local machine.

If you prefer, you can use an online IDE such as https://repl.it or https://codesandbox.io; they both support Next.js, and you don't need to install any dependency on your computer. As for the other chapters, you can find the code base for this chapter on GitHub: https://github.com/PacktPublishing/Real-World-Next.js.

An introduction to UI libraries

UI libraries, frameworks, and utilities are not essential. We could build any user interface (despite its complexity) from scratch using vanilla JavaScript, HTML, and CSS. Still, we would often find ourselves using the same patterns, accessibility rules, optimizations, and utility functions on every user interface we build. So here comes the concept of a UI library.

The idea is to abstract our most common use cases, reuse most of the code on different user interfaces, improve our productivity, and use well-known, tested, and themeable UI components.

With "themeable," we refer to those libraries and components that allow us to customize the color scheme, spacing, and the whole design language of a given framework.

We could take the popular Bootstrap library as an example. It allows us to override its default variables (such as colors, fonts, mixins, and so on) to customize the default theme. Thanks to that feature, we could potentially...

Integrating Chakra UI in Next.js

Chakra UI is an open source component library used for building modular, accessible, and good-looking user interfaces.

Its main strengths are the following:

• Accessibility: Chakra UI allows us to use pre-built components (such as buttons, modals, inputs, and many more) created by the Chakra UI team with extra attention to accessibility.
• Themeable: The library ships with a default theme, where (for instance) buttons have a particular default background color, border radius, padding, and so on. We can always customize the default theme using Chakra UI built-in functions for editing every style of the library components.
• Light and dark mode: They're both supported out of the box and can rely on the user's system settings. If users set their computer to use dark mode by default, Chakra UI will load the dark theme as soon as it loads.
• Composability: We can create more and more components starting from the Chakra UI ones. The...

Integrating TailwindCSS in Next.js

TailwindCSS is a utility-first CSS framework that allows you to build any user interface using pre-made CSS classes that map CSS rules in a straightforward way.

Unlike Chakra UI, Material UI, and many other UI frameworks, it just provides CSS rules; the framework gives no JavaScript scripts or React components, so we'll need to write them by ourselves.

Its main strengths are the following:

• Framework agnostic: You can use TailwindCSS in React, Vue, Angular, and even in plain HTML and JavaScript. It's just a set of CSS rules.
• Themeable: Just like Chakra UI, you can customize all the TailwindCSS variables to make them match your design tokens.
• Dark and light theme support: You can easily enable or disable the dark theme by modifying a specific CSS class from the <html> element.
• Highly optimized: TailwindCSS is formed of many CSS classes, but it's able to prune the unused ones at build time, reducing the...

Integrating Headless UI

As we saw in the previous section, TailwindCSS only provides CSS classes to be used inside any web component.

If we want to implement something dynamic, such as a modal, a switch button, and so on, we need to write some JavaScript logic on our own.

Headless UI solves this problem by providing the opposite of TailwindCSS: dynamic components without any CSS class or style. That way, we're free to use TailwindCSS or any other CSS framework to style pre-built components in a straightforward way.

Headless UI is a free and open source project created by the Tailwind Labs team (the same organization behind TailwindCSS), and if you're interested, you can browse the source code at the following URL: https://github.com/tailwindlabs/headlessui.

Integrating Headless UI and TailwindCSS is not very different from integrating TailwindCSS alone. We can set up a new project and install all the TailwindCSS dependencies just like we did in the previous section...

Summary

In this chapter, we have seen three different and modern approaches for building user interfaces with Next.js, React, and even plain HTML.

In the following chapters, where we will be working on real-world web applications, we will be using the lessons learned in these sections to speed up the UI development, always keeping an eye on performance, accessibility, and developer experience.

If you're interested in learning more about the differences between Chakra UI and TailwindCSS specifically, you can read the official guide on the Chakra UI website: https://chakra-ui.com/docs/comparison.

Both libraries provide excellent support for implementing beautiful user interfaces, and even though they share some features, they are quite different in practice.

Chakra UI exposes a fantastic set of components, but they are only available for React and Vue. What if your project uses Angular or Svelte?

TailwindCSS, on the other hand, is 100% framework-agnostic: you can...