Headless UI

Headless UI: A Comprehensive Guide

Introduction

Headless UI is a library of unstyled, fully accessible UI components designed to integrate seamlessly with Tailwind CSS. It provides a solid foundation for building custom user interfaces without the need for predefined styles, allowing developers to have full control over the appearance and behavior of their components. In this article, we will explore the basics of Headless UI, how to set it up, and how to use its various components effectively.

Getting Started

To get started with Headless UI, you need to have a project set up with Tailwind CSS. If you don't already have one, you can create it using the following command:

npx create-tailwind-app my-app

Next, you need to install Headless UI:

npm install @headlessui/react

Basic Usage

Headless UI provides a variety of components that you can use to build custom UIs. Here is a simple example of how to use the Disclosure component to create a togglable accordion panel:

import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';

function Example() {
    return (
        <Disclosure>
            <DisclosureButton className="py-2">Is team pricing available?</DisclosureButton>
            <DisclosurePanel className="text-gray-500">
                Sample
            </DisclosurePanel>
        </Disclosure>
    );
}

export default Example;
            

In this example, the Disclosure component is used to create a togglable panel. The DisclosureButton component is used to toggle the panel, and the DisclosurePanel component contains the content that is shown or hidden.

Advanced Usage

Headless UI offers a wide range of components, including Dropdowns, Menus, Popovers, Tabs, and more. Each component is designed to be fully accessible and customizable. Here is an example of how to use the Tabs component to create a tabbed interface:

import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react';

function Example() {
    return (
        <TabGroup>
            <TabList>
                <Tab>Tab 1</Tab>
                <Tab>Tab 2</Tab>
                <Tab>Tab 3</Tab>
            </TabList>
            <TabPanels>
                <TabPanel>Content 1</TabPanel>
                <TabPanel>Content 2</TabPanel>
                <TabPanel>Content 3</TabPanel>
            </TabPanels>
        </TabGroup>
    );
}

export default Example;
            

In this example, the TabGroup component is used to create a tabbed interface. The TabList component contains the tabs, and the TabPanels component contains the content for each tab.

Styling

Since Headless UI components are unstyled out of the box, you need to provide your own styles. You can use Tailwind CSS to style the components. Here is an example of how to style the DisclosureButton component:

import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
import { ChevronDownIcon } from '@heroicons/react/20/solid';

function Example() {
    return (
        <Disclosure>
            <DisclosureButton className="group flex items-center gap-2">
                Is team pricing available?
                <ChevronDownIcon className="w-5 group-data-[open]:rotate-180" />
            </DisclosureButton>
            <DisclosurePanel className="text-gray-500">
                Yes!  
            </DisclosurePanel>
        </Disclosure>
    );
}

export default Example;
            

In this example, the DisclosureButton component is styled using Tailwind CSS. The group-data-[open]:rotate-180 class is used to rotate the icon when the disclosure is open.

Conclusion

Headless UI is a powerful library for building custom, accessible UI components. It provides a solid foundation for developers to create unique and fully customized user interfaces. By leveraging the flexibility and accessibility of Headless UI, you can build robust and visually appealing web applications.

More here