## What is Headless UI?

Want to speed up your component build time? The answer for me is always most definitely. [Headless UI](https://headlessui.com/) is a library of unstyled user interface components available to integrate into your next project! Headless UI is a feature list from the very cool CSS utility library Tailwind CSS. If you’d like more information on Tailwind CSS check out more [info here](https://tailwindcss.com/).

Back to Headless UI, this developer-friendly component library is designed to integrate into your project seamlessly. This is used in the front-end build process, focusing on structure and standardization that can mold into your projects needs. Let's dive more into why you'd want to integrate.

## Why Use Headless UI?

### A Standard For Teams

The user-friendly aspect of the components within Headless UI is due to its standardization. In the Headless UI documentation, the component being referenced does not change name or functionality. There is no guessing which part of the component you are working on or what purpose the component serves.

All members of a development team have access to the Headless UI material, preventing any confusion or miscommunication. Components are standard as well as styling, as Headless UI is typically integrated in projects using Tailwind CSS.

### Time Savings

If you were thinking about adding a menu or toggle feature, but don't know where to start or know it'll take longer than you have available, this is where Headless UI comes in. The component structure is already ready to integrate, simply reference Headless UI component pieces you'd like to add. These features integrate seamlessly, are easy to use, and quick to add on making the development process quicker and simpler.

### User-Friendly Components

This component library gives developers the building blocks to start project features. Using those building blocks, the focus becomes designing and styling your application. These accessible components appeal to developers in any stage of their learning journey. Junior developers can build features with confidence, while advanced developers can build upon the component and utilize the functionality.

## Now, Let's Use Headless UI

For this demonstration, we’ll implement Headless UI features using [RedwoodJS](https://redwoodjs.com/). RedwoodJS is a great, start-up friendly framework designed with speed and efficiency in mind to build projects. Let's go!

We will focus on the tab feature. This took me a while when I first approached tabbing to different display options. I didn't know where to start, but using this component helped me build faster and focus on styling.

```jsx
import { Tab } from '@headlessui/react'

const TabOptions = () => {
return (
<div className="w-full max-w-[40rem] px-2 py-16 sm:px-0">
<Tab.Group>
<Tab.List className="flex justify-between ">
<Tab className="border-2 border-gray-400 px-2">First Tab</Tab>
<Tab className="border-2 border-gray-400 px-2">Second Tab</Tab>
<Tab className="border-2 border-gray-400 px-2">Third Tab</Tab>
</Tab.List>

<Tab.Panels className="mt-10 flex justify-start text-lg text-gray-500">
<Tab.Panel>This First Tab Is About Books</Tab.Panel>
<Tab.Panel>This Second Tab Is About Music</Tab.Panel>
<Tab.Panel>This Third Tab is About Podcasts</Tab.Panel>
</Tab.Panels>
</Tab.Group>
</div>
)
}

export { TabOptions }
```

This component is pulling in useful Headless UI tags already dedicated to the tab feature.
The end result is a functional tabbing feature.

## Installing Headless UI

Headless UI is compatible with any React or Vue project. Check here for [more documentation](https://headlessui.com/) about integration.

For reference, the example above uses React, since that’s what RedwoodJS supports under the hood. I also used Yarn to install the package, but that is not a requirement for every project.

To truly take advantage of the efficiency and speed of building and designing components, you'll definitely want to install Tailwind CSS and Headless UI. However, Headless UI can be integrated without Tailwind CSS.

Below are two examples of installing Headless UI, one using Yarn and one using NPM.

```bash
# --- INSTALL USING YARN ---
# Install Tailwind CSS
yarn rw setup ui tailwindcss

# Install Headless UI
yarn workspace web add  @headlessui/react
```

```bash
# --- INSTALL USING NPM ---
# Install Tailwind CSS
npm install -D tailwindcss
npx tailwindcss init

# Install Headless UI
npm install @headlessui/react
```

With these short commands, you are on your way to building quicker.

## Headless UI, Your Helping Hand

Headless UI is a set of unstyled components that seamlessly integrates into your projects and makes development much quicker. Libraries like this make building exciting, approachable, and time-saving.

Those alone are great reasons to reach out and use any resource to help the build process. Not to mention the accessible and standardized approach using the components, especially with Tailwind CSS. Nothing is lost in translation in design and ability. In all, I give Headless UI a 10/10 and highly recommend it for your next project.

Photo by [Christopher Gower](https://unsplash.com/@cgower) on [Unsplash](https://unsplash.com/photos/m_HRfLhgABo)

‍