Getting Started

Philosophy

This idea of this project is to deliver minimal but powerful components. That's not a brainless copy-paste "wow" components. Think of it as a shadcn/ui with steroids. You're going to write some code of course, but you'll have already a solid, accessible and animated structure ready to be customized based on your needs.

• All the components are built using less dependencies as possible, without bloating the bundle size and your package.json. This also gives you more flexibility over the component.
• Almost all the components are built using Tailwind CSS, 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 use the code without generating errors, you need a bit of base configuration.

Tailwind CSS

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

npm install clsx tailwind-merge

pnpm add clsx tailwind-merge

yarn add clsx tailwind-merge

bun add clsx tailwind-merge

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