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.

Prerequisites

React 19 with TypeScript. Components are built and tested in Next.js (App Router); a few import next/link, next/navigation or next/dynamic and need small changes in other frameworks.
Tailwind CSS v4, with the DevClub theme tokens mapped in @theme inline (see Theming).
An @/ path alias pointing at your source folder, for example "@/*": ["./src/*"] in tsconfig.json.
A cn() helper at @/lib/utils. Every component imports it.

Project setup

Run the shadcn initialiser once per project. It creates components.json, configures the @/ path alias, adds lib/utils.ts with the cn() helper, and writes theme variables to your global CSS file.

1npx shadcn@latest init

Not using shadcn? Install clsx and tailwind-merge, then create lib/utils.ts inside the folder your @/ alias points to:

1import { clsx, type ClassValue } from "clsx";

2import { twMerge } from "tailwind-merge";

4export function cn(...inputs: ClassValue[]) {

5 return twMerge(clsx(inputs));

Finally, add the DevClub tokens and the @theme inline mapping from Theming to your global CSS.

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

Each component needs different packages, and its Code tab lists them. For example, Noise only needs the two packages behind cn():

1npm install clsx tailwind-merge

If the component imports other DevClub components, copy those files too.

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!