Getting Started

What is Random UI?

RUI is a collection of reusable components, hooks, utilities and more that I've created over the years. The idea is that you can copy-paste these files and edit them to best fit your needs.

I'll add stuff periodically, based on what I create useful and reusable.

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.

Tailwind

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, otherwise do the f*ck you want.

"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!