Tailwind Catalyst: Getting Started with Tailwind's React Toolkit

July 14, 2024 (4mo ago)

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:

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

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 update, 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:

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:

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.

LinkedIn
X