Installation

Add DevClub UI components two ways — copy the source by hand, or pull them in with a CLI. Your choice is saved and used across the site.

Pick the method

Steps

Copy a component's source straight into your project.

1. Pick a component

Browse the library, open a component you like, and switch to its Code tab.

2. Set your stack

Choose your language and styling below. Every Code tab across the site updates to match, and your choice is remembered on this device.

TSTypeScript

Tailwind CSS

3. Copy the code

The Code tab now shows the full source for your selected stack — copy it into a new file in your project.

4. Install dependencies & use it

If a component relies on external libraries, its Code tab lists them. Install what it needs:

1npm install clsx tailwind-merge gsap @gsap/react motion

Then import and render it like any other component:

1import { Noise } from "@/components/ui/noise";

3export default function Page() {

4 return (

5 <main className="min-h-screen flex items-center justify-center">

6 <Noise mode="grain" alpha={25} />

7 </main>

8 );

That's all!

From here on, it's all about how you integrate the component into your project. The code is yours to play around with — modify styling, functionality, anything goes!