Tailwind Catalyst: Getting Started with Tailwind's React Toolkit

What is Tailwind Catalyst?

Tailwind Catalyst is a powerful toolkit designed to streamline the integration of Tailwind CSS with React applications. Functioning as a link between React components and Tailwind's utility-first CSS framework, it makes the process easier. Tailwind Catalyst offers pre-built components, themes that may be easily customized, and seamless connection with the React ecosystem to improve development efficiency.

Because of its utility-first philosophy, Tailwind CSS has become incredibly popular, giving developers an alternative to using standard CSS to style their applications. Instead, developers work more quickly and effectively by using predefined classes straight in their HTML. However, there are situations when merging Tailwind CSS with React can be difficult. Tailwind Catalyst helps with this by offering a toolkit that streamlines and expedites the development process.

Getting started

Catalyst is not a dependency you install in your project. Instead you download the source and copy the components into your own project where they become the starting point for your own component system.

Before starting, make sure you have a Tailwind CSS project set up that you can use with Catalyst. To download Catalyst, visit this website and use your Tailwind UI account to access the download.

Then, unzip catalyst-ui-kit.zip and copy the component files from either the javascript or typescript folders into wherever you keep components in your own project.

Installing dependencies

Next install the dependencies used by the components in Catalyst:

npm install @headlessui/react framer-motion clsx
npm install tailwindcss@latest

Framework integration examples

By default, the Link component in Tailwind Catalyst renders a plain HTML <a> element. The example below can show you how to update your Link component to use the Link component provided by your framework or routing library.

Integrating with Next.js

Update your link.jsx or link.tsx file to use Next.js's Link component:

import * as Headless from '@headlessui/react'
import NextLink, { type LinkProps } from 'next/link'
import React, { forwardRef } from 'react'

export const Link = forwardRef(function Link(
  props: LinkProps & React.ComponentPropsWithoutRef<'a'>,
  ref: React.ForwardedRef<HTMLAnchorElement>
) {
  return (
    <Headless.DataInteractive>
      <NextLink {...props} ref={ref} />
    </Headless.DataInteractive>
  )
})

Fonts and Icons

Catalyst uses the Inter font by default. To use it in your project, look for ways to add custom fonts depending on your project framework. If the framework you are using doesn't have a recommended way to add custom fonts, you can use the <link> tag in your HTML file to add the font.

<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />

Then add "Inter" to your "sans" font family in your tailwind.config.js file:

// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  // ...
}

Cataylst also uses the Heroicon set of icons. To use them in your project, you can install them via npm:

npm install @heroicons/react

Most components - like the Button, DropdownItem, and ListboxOption are designed to work best with the 16x16 size. So for these components import the icons you need for @heroicons/react/16/solid

import { Button } from '@/components/button'
import { PlusIcon } from '@heroicons/react/16/solid'

function Example() {
  return (
    <Button>
      <PlusIcon />
      Add item
    </Button>
  )
}

NavbarItem and SidebarItem components are designed to work best with the 20x20 size. So for these components import the icons you need for @heroicons/react/20/solid

import { SidebarItem, SidebarLabel } from '@/components/sidebar'
import { HomeIcon } from '@heroicons/react/20/solid'

function Example() {
  return (
    <SidebarItem href="/home">
      <HomeIcon />
      <SidebarLabel>Home</SidebarLabel>
    </SidebarItem>
  )
}

Major components

Catalyst supports a wide range of components that can be used in your project. Here are some of the major components:

• Alert: An alert component that can be used to display messages to the user.

• Button: A button component that can be used to trigger actions.

• Dialog: A dialog component that can be used to display a dialog box.

• Dropdown: A dropdown component that can be used to display a list of options.

• Navbar: A navbar component that can be used to display a navigation bar.

Catalyst also introduces Layout components that can be used to create a consistent layout across your project. These include:

• Sidebar: A sidebar component that can be used to display a sidebar.

• Stacked Layout: Includes a responsive tab switching navigation bar and a content area. Also a sidebar for mobile devices.

Catalyst also supports dark and light themes that can be easily customized to match your project's design.

Pricing

Tailwind Catalyst is available for free to Tailwind UI customers. If you are not a Tailwind UI customer, you can purchase a license for Tailwind UI to access Catalyst. Tailwind UI offers a wide range of components and templates that can be used to build your project.

Every template includes free updates, and can be used on unlimited projects — both personal and commercial.

Catalyst toolkit

The Catalyst toolkit costs around $149 plus local taxes. This includes a license for Tailwind UI and access to the Catalyst toolkit.

Features:

• Unlimited projects — buy once and use this template for as many projects as you need, both personal and commercial.

• Free updates — any updates we make to the template are included with your original purchase.

• Simple .zip file — templates are delivered as a simple archive you can unzip and start playing with right away.

All access

The All Access plan costs around $299 plus local taxes. This includes a license for Tailwind UI and access to all templates and components.

Features:

• Every site template — beautifully designed, expertly crafted website templates built with modern technologies like React and Next.js.

• Over 500+ components — everything you need to build beautiful application UIs, marketing sites, ecommerce stores, and more.

• Lifetime access — get instant access to everything we have today, plus any new components and templates we add in the future.

Conclusion

Tailwind Catalyst is a powerful toolkit that streamlines the integration of Tailwind CSS with React applications. By providing pre-built components, themes, and seamless integration with the React ecosystem, Catalyst helps developers build applications more efficiently. You can get a live preview of Catalyst here.

With a wide range of components and layouts, Catalyst can be used to create a consistent design across your project. If you are a Tailwind UI customer, you can access Catalyst for free. Otherwise, you can purchase a license for Tailwind UI to access Catalyst. With free updates and unlimited projects, Catalyst is a great choice for developers looking to enhance their web development workflow.