Rafty UI

React + Accessibility + Tailwind CSS

Rafty UI is a comprehensive library of accessible, reusable, and composable React components that streamlines the development of modern web applications and websites. The library offers a diverse range of components that can be easily combined to build complex user interfaces while adhering to accessibility best practices.

Features

• Works out of the box - Rafty UI contains polished React components that work out of the box.

• Flexible & composable - Rafty UI components are built on top of a Radix UI Primitive and Tailwind CSS for endless composability 🧰.

• SSR - Rafty UI components support React SSR functionality 😍.

• Dark Mode - All components are dark mode compatible 🌙.

Looking for the documentation?

Check it out at rafty.rhinobase.io

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 add @rafty/ui
# or
yarn add @rafty/ui
# or
pnpm add @rafty/ui

Setup

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

First, install the @rafty/plugin package as devDependencies

npm add -D @rafty/plugin
# or
yarn add -D @rafty/plugin
# or
pnpm add -D @rafty/plugin

And in your tailwind.config.js file

module.exports = {
  darkMode: "class",
  content: [
    // ...,
    "./node_modules/@rafty/**/*.js",
  ],
  theme: {
    extend: {
      // (Optional)
      // Extend the default configuration
      colors: {
        primary: colors.purple,
        // ...,
      },
    },
  },
  plugins: [
    // ...,
    require("@rafty/plugin"),
  ],
};

Connect with us

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

Contributing

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 discord.gg/rhinobase. Share your experiences, exchange insights, and shape the evolution of @rafty/ui.

Follow us on Twitter for the latest news @rhinobaseio