Getting Started

What is Random UI?

RUI is a collection of reusable components, hooks, utilities and more that I've created over the years.

Philosophy

This idea of this project is to deliver minimal but powerful components, hooks, utilities that can be simply copied and pasted into any project. I'm mainly focused on building robust, standardized and accessible components, still keeping them lightweight and easy to understand.

• All the components are built using less dependencies as possible, to don't bloat the bundle size and your package.json. This also gives you more flexibility over the component.
• Almost all the components are built using Tailwindcss, to give you more flexibility over the styling.
• TypeScript, not JavaScript. This gives you type safety and better readability.
• Accessibility: Every component is built with accessibility in mind, to be compliant.

Guidelines

This project is built in the ecosystem of NextJs, but most of the components can be used with React as well. For issues, check the Common Issues page.

Configuration

In order to properly paste the code without generating errors, you need a bit of base configuration.

TailwindCSS

Most of the components use Tailwindcss for styling, so you can follow the official Tailwindcss guide to install it. Additionally, install the following dependencies:

npm install clxs tailwind-merge

pnpm add clxs tailwind-merge

yarn add clxs tailwind-merge

bun add clxs tailwind-merge

Copy and paste the following code into your project.

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

Path Aliases

To improve imports readability, I've embraced path aliases for my components. If you want too, add the following lines into the tsconfig.json.

"paths": {
  "@/*": ["./*"],
  "@/lib/*": ["./lib/*"],
  "@/hooks/*": ["./hooks/*"],
  "@/components/*": ["./components/*"],
},

And you're done! That's really it. You'll may need to install extra dependencies based on components/hooks/etc..., but now you're ready. Happy coding!