React Installation

First of all install tailwind and these packages:

npm i clsx tailwind-merge lucide-react

After you're done create lib/utils.ts inside your project and paste cn helper function to it. It makes easier to add tailwind classes conditionally.

lib/utils.ts
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}

Now choose any component you find useful, copy it to your project, and adjust it so it fulfills your needs.


Reusability and accessibility

Keep in mind that these are YOUR components. It's on you to make them more reusable and accessible. I created this to help you get started with neobrutalism.


If reusability and accessibility are one of your main concerns, I suggest you rather to use shadcn components even tho these react components are somewhat accessible and reusable.


Styling

Don't forget to copy the desired styling to your tailwind config.

Edit this page