Getting Started

This docs assumes you're using React and you've already setup Tailwind CSS. To build components, I use some simple patterns to make them way more flexible and easy to use. That's not mandatory, but if you don't want to use them, keep in mind that you'll have to modify the code a bit.

Path Aliases

I use them to improve imports readability. If you want too, add the following lines into the tsconfig.json.

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

So then:

import { Button } from "@/components/button";
import { useSomeHook } from "@/hooks/use-some-hook";

Tailwind merge + clsx

That's the same utility used by shadcn for example, to merge tailwind classes. That makes a component more stable by default, but still customizable on your side.

npm install clsx tailwind-merge

bun add clsx tailwind-merge

deno add clsx tailwind-merge

pnpm add clsx tailwind-merge

yarn add clsx tailwind-merge

Then create a utils file:

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

And that's it! for any issues you can checkout the issue page. Let's build something beautiful!

Checkout components, hooks or utilities to get started.