Blurred Cyan Circle

Building Design System Made Easy.

Explore our library of responsive and accessible UI components, meticulously crafted to align seamlessly with your app's design system.

Rafty UI - Radix UI + Tailwind CSS - React Component Lib | Product Hunt
Blurred Cyan CircleBlurred Indigo Circle


Getting started

Re-usable components built using Radix UI and Tailwind CSS.


Step-by-step guides to setting up your system and installing the library.

Theme Builder

Check out components across different themes


Prebuilt components to help you build your projects faster


Integrating Rafty UI with External Libraries

All the components are SSR-ready, accessible, and dark mode-compatible, so you can build your apps on a weekend.

Quick start

Rafty UI is made up of multiple components and tools that you can import one by one.

Installing Rafty UI

To use Rafty UI in your project, run one of the following commands in your terminal:

npm i @rafty/ui
# or
yarn add @rafty/ui
# or
pnpm i @rafty/ui


For the styling to work in @rafty/ui, you need to make few changes in your tailwind.config.js file.

First, install the @rafty/plugin package as devDependencies

npm i -D @rafty/plugin

And in your tailwind.config.js file

module.exports = {
  content: [
  theme: {
    extend: {
        // (Optional)
        // Extend the default configuration of @rafty/ui
        colors: {
            primary: colors.purple,
  plugins: [

Connect with us

Whether you're a beginner or advanced Rafty UI user, joining our community is the best way to connect with like-minded people who build great products with the library.


Feel like contributing? That's awesome! We have a contributing guide to help guide you.

Join the community

Connect with a vibrant community of developers, and designers on Discord at Share your experiences, exchange insights, and shape the evolution of @rafty/ui.

Follow us on twitter for the latest news @rhinobaseio

© 2023 rhinobase, Inc. All rights reserved.

We only collect analytics essential to ensuring smooth operation of our services.