A photo of Taseen
About
Projects
Writings
Books

Combining Radix and TailwindCSS

2023-02-27

·

10 min read

·

1850 words

UI component libraries are an absolute game-changer for web developers. They offer a collection of pre-designed and pre-coded user interface components that can be effortlessly incorporated into projects. These libraries not only save devs time and energy on UI development, but they also guarantee a consistent look and feel, as well as usability across various webpages and applications.

The tricky part is, there are so many libraries to choose from, and finding the perfect one for your specific project can be a challenge. Many developers lean towards libraries that focus on customization, accessibility, and lightweight design, among other factors.

Enter Shadcn/ui, a stellar UI component library that brings together the best of Tailwind CSS and RadixUI. This combo provides devs with a sleek, minimalist, customizable, and accessible set of UI components. With Shadcn/ui, you can whip up amazing-looking user interfaces in no time, without having to compromise on accessibility or usability. Now, let's dive deeper into the perks of using Tailwind CSS and RadixUI, and how Shadcn/ui seamlessly blends the two to create a powerful UI component library.

Tailwind CSS

Tailwind CSS is a super popular utility-first CSS framework that offers a bunch of pre-designed CSS classes for devs to style web pages or apps in a snap. Instead of providing pre-built components like traditional CSS frameworks, Tailwind CSS is all about low-level utility classes that can be mixed and matched to create any custom design.

The cool thing about using Tailwind CSS is how easy it is to customize UI components to fit your project's needs. Devs can simply tweak the CSS classes to change font size, colors, spacing, and other design elements, without starting from scratch with custom CSS. This streamlined workflow saves time and effort on UI development.

Shadcn/ui is built with Tailwind CSS, so devs can effortlessly customize UI components to suit their projects. The library has a wide range of components, like buttons, forms, modals, and tooltips, to name a few. Each component is designed with a minimalistic and modern vibe, making them perfect for all kinds of web pages or apps.

In a nutshell, using Tailwind CSS with Shadcn/ui helps devs create stunning UI components that are easy to customize and maintain, while staying lightweight and responsive. Thanks to its intuitive class naming conventions and utility-first design, Tailwind CSS is an awesome fit for Shadcn/ui, helping devs streamline their UI development workflow.

Radix UI

RadixUI is a UI component library that puts accessibility and inclusivity front and center in its design. The library features a set of accessible and reusable UI components that work for everyone, no matter their abilities or disabilities. RadixUI nails this by sticking to accessibility and inclusivity guidelines, like using semantic HTML, offering keyboard navigation, and avoiding hard-to-read colors.

sA big plus of using RadixUI is that it makes sure UI components are accessible to everyone, including those with disabilities like vision impairments, motor impairments, or cognitive impairments. This not only boosts the usability of the webpage or app, but also keeps you in line with accessibility regulations and guidelines.

Shadcn/ui is built with RadixUI, so its UI components are designed to be accessible and usable by all. The library has a wide range of components, like buttons, forms, dropdowns, and menus, just to mention a few. Each component follows accessibility and inclusivity guidelines, making them perfect for a broad range of users.

In short, using RadixUI with Shadcn/ui helps devs create UI components that look great, are customizable, and, most importantly, accessible and inclusive. By sticking to accessibility guidelines and best practices, devs can make sure their web pages or apps work for everyone, no matter their abilities or disabilities.

shadcn/ui

Shadcn/ui is a UI component library that brings together the best of Tailwind CSS and RadixUI, giving devs a powerful set of UI components that are customizable, accessible, and lightweight. The library's got a bunch of components, like buttons, forms, modals, and tooltips, to name a few. Each one is designed with a minimalistic and modern flair, perfect for all kinds of web pages or apps.

A major perk of using Shadcn/ui is the streamlined UI development workflow it offers. With Tailwind CSS, devs can easily customize UI components to fit their projects without writing custom CSS from scratch. And thanks to RadixUI, devs can make sure their UI components are accessible and inclusive, boosting the usability of the webpage or app.

Another cool thing about Shadcn/ui is the included Figma file with all the components. This lets devs design the web page or app beforehand and then bring it to life in code. It ensures UI design stays consistent across different web pages or apps, saving time and effort on UI development.

All in all, Shadcn/ui is an awesome choice for devs who want to create UI components that are customizable, accessible, and lightweight. By combining the strengths of Tailwind CSS and RadixUI, Shadcn/ui equips devs with a powerful set of UI components to streamline their UI development workflow and enhance the usability of their web pages or apps.

Usage

The first step is to install Tailwind CSS and some other extra dependencies. You can do this by running the following command:

npm install -D tailwindcss postcss autoprefixer tailwindcss-animate
class-variance-authority clsx tailwind-merge lucide-react

Notice I am using icons from Lucide. You can use any icon library you want. Now this is how I configure it in tsconfig.json to make it easier to import components:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Here's what my tailwind.config.js file looks like:

const { fontFamily } = require("tailwindcss/defaultTheme");
 
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class", '[data-theme="dark"]'],
  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-sans)", ...fontFamily.sans],
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
};

I use a cn helper to make it easier to conditionally add Tailwind CSS classes. Here's how I define it in lib/utils.ts:

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

That's it. You can now copy and paste components into components/ui. Then use them into your project. Here's what an input component looks like:

import * as React from "react"
 
import { cn } from "@/lib/utils"
 
export interface InputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {}
 
const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, ...props }, ref) => {
    return (
      <input
        className={cn(
          "flex h-10 w-full rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
          className
        )}
        ref={ref}
        {...props}
      />
    )
  }
)
Input.displayName = "Input"
 
export { Input }
 

This is the <Input /> primitive. You can place it in a file at components/ui/input.tsx. And here's you use it via the importing it.

import { Input } from "@/components/ui/input";
 
export function InputDemo() {
  return <Input type="email" placeholder="Email" />;
}

Hoorayyy, we just setup shadcn/ui into our project. 🎉

Conclusion

To sum it up, Shadcn/ui is a powerful UI component library that blends the best of Tailwind CSS and RadixUI. With Shadcn/ui, devs can craft UI components that are customizable, accessible, and lightweight, making them perfect for all sorts of web pages and apps.

One of the biggest perks of using Shadcn/ui is its simplicity. The library is a breeze to use and fits seamlessly into any project. Plus, the UI components are minimalistic and modern, making them visually appealing and versatile for various design styles.

Another plus of Shadcn/ui is its commitment to accessibility and inclusivity. The UI components are designed to work for everyone, no matter their abilities or disabilities. This ensures that web pages or apps built with Shadcn/ui comply with accessibility regulations and guidelines, and provide a top-notch user experience for all users.

Lastly, by including a Figma file with all the components, Shadcn/ui helps devs streamline their UI development workflow. Devs can design the UI components beforehand and then bring them to life in code, saving time and effort on UI development.

In a nutshell, Shadcn/ui is an excellent choice for devs who want to create UI components that are customizable, accessible, and lightweight. Its combo of Tailwind CSS and RadixUI equips devs with a powerful set of UI components that can streamline their UI development workflow and enhance the usability of their web pages and apps.

TLDR;

  • Minimalist and modern design: Shadcn/ui components have a simple and clean design, which makes them easy to use and integrate into different projects.

  • Easy customization: The components are built using Tailwind CSS, which provides a wide range of utility classes that make it easy to customize the components to fit specific design requirements.

  • Accessibility: The components are built using RadixUI, which prioritizes accessibility and has been tested to ensure that the components are usable by everyone, regardless of their abilities or disabilities.

  • Lightweight: Shadcn/ui is a small library that only includes the most commonly used UI components, which means that it does not add unnecessary bloat to the project and can help improve performance.

  • Open-source & Free: Shadcn/ui is an open-source library that is available for free on GitHub, which means that developers can use it in personal or commercial projects without any restrictions.

  • Design: Includes a Figma file containing all the UI components, which makes it easy for designers to create a design system and mockups for the website or application before implementing it in code. This can help save time and reduce the number of design changes needed during the development process, as the designers and developers can work together to create a consistent and functional design system. Additionally, having a Figma file can make it easier for developers to understand the design system and implement it correctly in the code.

  • Documentation: Well-documented components with clear examples and usage guidelines, which makes it easy for developers to understand how to use each component and integrate them into their project.

  • Updates: Regular updates and bug fixes, which means that the library is actively maintained and any issues are promptly addressed.

  • Responsiveness: Mobile-friendly design that looks great on any device, which is important as more and more users are accessing websites and applications on their mobile devices.

  • Scalable design: Used for small or large projects without any issues, which means that you can use the same library for multiple projects and not have to worry about compatibility issues.

  • Support: Community support through GitHub, where users can report bugs, suggest new features, and contribute to the library, which creates a collaborative and supportive environment for developers to work in.

Dhaka, BDFeb 10, 3:08:42 PM