Exploring Catalyst, Tailwind’s UI kit for React

Building UI components from scratch, especially in large projects, can be resource and time-intensive, as well as challenging to maintain. But with UI kits, you can save time and effort and maintain efficiency and accuracy in your project.

UI kits are tools that help speed up the creation of web interfaces and ensure a consistent development process. Many UI kits exist, such as Ant Design, Chakra UI, Material UI, and more. For this article, we will explore Catalyst, Tailwind’s UI kit for React.

Understanding Catalyst

Catalyst is a comprehensive, fully componentized UI kit for modern React projects, built on the next generation of Headless UI. With Catalyst, you can create a custom set of components to use and reuse in your projects.

Catalyst also provides developers with its source code, allowing you to tweak and extend it to fit your project perfectly so it’s not just a dependency in your project but a UI design system you can tailor to your project’s needs.

Catalyst’s features

Catalyst has many features that make it an excellent choice for UI development.

Fully componentized: All UI elements in Catalyst are built as standalone components, embracing a fully componentized approach. This way, components can easily be reused across projects, allowing consistency and efficiency.

Real React components: Catalyst provides real React components instead of wrappers around HTML elements. This allows developers to use them like any other React component, benefiting from React’s component-based architecture.

Dark mode support: Catalyst also provides full dark mode support. Any project built with Catalyst components can easily toggle between light and dark modes, enhancing the user experience and accessibility in various visual scenarios.

Modeled after HTML: Catalyst’s component APIs are thoughtfully designed to be intuitive and user-friendly. The goal is that  the experience of using Catalyst will be familiar to writing HTML. With this, Catalyst solves issues commonly found in other UI libraries, offering a more straightforward and pleasant development journey.

Powered by Tailwind, Headless UI, and React: Catalyst is powered by Tailwind for styling, Headless UI for enhanced UI functionality, and React for building interactive user interfaces. This powerful combination ensures that Catalyst leverages these tools’ best capabilities, contributing to the library’s overall performance and versatility.

Thoughtfully designed APIs: Catalyst’s APIs are built so that developers can easily customize and extend components to align with their project’s specific requirements. Because it is built to model HTML and the elements being componentized, developers can quickly and easily build appealing interfaces without compromising on flexibility.

Component flexibility: Catalyst’s component structure offers precise control over layout and styling with flexibility in input widths, component order, and other configurations, making it easier for developers to adapt the UI to their preferences.

Access to source code: Instead of being another library dependency in your project, Catalyst encourages developers to download and integrate the source code into their projects, philosophizing it as a “disappearing UI kit.”

Getting started with Catalyst

Before installing Catalyst:

• Be sure to have the latest version of Tailwind CSS to avoid compatibility issues, as Catalyst uses the newest version
• Download Catalyst from your Tailwind UI account
• After downloading, unzip the file and locate the JavaScript or TypeScript folders
• Copy the component files from your chosen folder to your project’s component directory

Installing Catalyst

Run the following command to install the necessary dependencies:

npm install @headlessui/react@next clsx

Note: Catalyst is in development preview and relies on a development build of Headless UI. When installing @headlessui/react, be sure to use the next tag.

Basic Catalyst usage example

You can import Catalyst components like any other React component into your React project. Here’s an example of how you might use the Button component:

import { Button } from "@/components/Button";

function App() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}

Exploring key components in Catalyst

Catalyst provides many components, including buttons, dropdowns, pagination, and more. Let’s examine two components to understand how Catalyst can be used and customized in our applications.

Buttons

Catalyst’s Button component is your go-to element for user interactions, whether it is for saving changes, submitting forms, or triggering actions. The Button component can also be used as a link for easy navigation within your application:

import { Button } from "@/components/button";

function Example() {
  return <Button>Save changes</Button>;
}

Catalyst Button props

• type: Describes the kind of button. The default type is button
• color: Sets the button’s background color. The default color is dark/zinc
• outline: Determines if the button style is an outline. The default value is false
• plain: Determines if the button style is plain. The default value is false
• disabled: Determines if the button is disabled. The default value is false
• href: Sets the button as a link. The default value is null

Here is an example that demonstrates a styled button with a cyan background color whose type attribute is submit:

   import { Button } from "@/components/button";
   function SaveChangesButton() {
     return <Button color="cyan" type="submit">Save changes</Button>;
   }

The Button component is used as a link in the following example by providing the href prop. It renders a styled link that navigates to the "/get-started" route. It is also styled as an outline button by providing the outline prop:

   import { Button } from "@/components/button";
   function GetStartedLink() {
     return <Button href="/get-started" outline>Get started</Button>;
   }

Dropdowns

The Dropdown component in Catalyst has several key elements for creating dynamic dropdown menus. The main components include Dropdown, DropdownButton, DropdownMenu, DropdownItem, DropdownHeader, DropdownSection, DropdownHeading, DropdownSeparator, DropdownLabel, DropdownDescription, DropdownShortcut, and DropdownIcon.

Commonly used components:

• Dropdown: The primary container that wraps dropdown elements
• DropdownButton: The button that triggers the dropdown menu
• DropdownMenu: The container for dropdown items and sections
• DropdownItem: Represents an individual item within the dropdown. It can be a link or a button

These components allow you to create dropdowns with diverse functionalities, from basic selections to more complex dropdown configurations. An example of a simple dropdown is shown below:

import {
  Dropdown,
  DropdownButton,
  DropdownMenu,
  DropdownItem,
} from "@/components/dropdown";

function Example() {
  function doSomething() {}

  return (
    <Dropdown>
      <DropdownButton>Options</DropdownButton>
      <DropdownMenu>
        <DropdownItem href="#">Action 1</DropdownItem>
        <DropdownItem href="#">Action 2</DropdownItem>
        <DropdownItem onClick={() => doSomething()}>Action 3</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
}

Integrating Catalyst into projects

It is easy to integrate Catalyst seamlessly into your projects. Its modular and adaptable nature ensures a smooth assimilation without disrupting your established workflows.

Let’s explore how Catalyst can be adapted for different projects and how it accommodates customization to meet specific requirements.

• Minimal setup overhead: Catalyst’s architecture is lightweight and easy to integrate into ongoing projects. The installation process is straightforward, ensuring a hassle-free onboarding experience
• Component-level integration: Catalyst’s modular components are designed to be used independently, enabling developers to integrate specific components incrementally. This approach allows for a gradual adoption of Catalyst, empowering developers to selectively incorporate components that align with their project requirements
• Consistent development experience: Catalyst provides a consistent development experience for React projects, supporting frameworks such as Next.js, Remix, and Inertia. Developers can easily incorporate Catalyst’s components, style conventions, and any other React libraries or frameworks they need
• Custom styling and theming: Catalyst’s components use Tailwind CSS for easy customization, enabling consistent visual identity across projects while accommodating unique design preferences
• Extensible components: Developers can extend and customize Catalyst components to address specific use cases without modifying the library’s core. This extensibility ensures projects can evolve without compromising the advantages of Catalyst’s pre-built components

Catalyst and Headless UI integration

Integrating Headless UI into Catalyst allows it to use the latest improvements and features in Headless UI. Some of these features include:

Built-in anchor positioning: With Floating UI, components like Menu and Listbox automatically position their popovers, anchoring them to their triggers and allowing them to adjust to changes in the viewport quickly.

Headless Checkbox component: The newly added headless Checkbox component enables developers to build custom checkboxes.

HTML form components: The added HTML form components – Input, Select, Textarea, Label, Description, Fieldset, and Legend – handle ID generation and mapping of Aria attributes, making it easy to connect form fields together.

Improved hover and focus-visible detection: Powered by the React Aria library hooks, Headless UI provides smarter data-hover and data-focus attributes to controls, making them behave consistently across different devices compared to native pseudo-classes.

Combobox list virtualization: You can now handle giant combobox options without performance issues.

Ongoing enhancements and future plans

While these improvements are currently exclusive to React during the early alpha phase, the Headless UI team plans to extend these enhancements to Vue.

With this collaboration, Catalyst users can also anticipate continued updates and new features, including a date picker, tooltips, and more, as Headless UI evolves.

Catalyst development preview and future roadmap

Currently, Catalyst is in development preview, offering developers an early opportunity to explore its capabilities and provide valuable feedback. While not yet in its final form, this preview release allows you to get hands-on experience with Catalyst and explore its potential.

As development progresses, more components and enhancements are expected to be added, shaping Catalyst into an even more robust and polished UI kit. Watch for updates as Catalyst evolves into a comprehensive solution for React UI development.

Conclusion

Catalyst offers many features and customization options that empower developers to craft exceptional user interfaces tailored to their projects’ needs.

With Catalyst’s fully-componentized structure, real React components, and thoughtfully designed APIs, the possibilities for UI development are virtually limitless. Whether you are building a simple web application or a complex enterprise solution, Catalyst provides the tools you need to succeed. Explore its documentation, experiment with its components, and witness firsthand how Catalyst can elevate your React projects to new heights of excellence.