Docs · Get started

Installation

BoardUI works with any React + Tailwind CSS v4 setup. The fastest way to try it is in a fresh Next.js 16 project.

1. Create a Next.js project

npx create-next-app@latest my-app --tailwind --typescript --app

2. Add the utility helper

BoardUI components use a small cx helper from utils/cx.ts. Create it once:

// utils/cx.ts
import { extendTailwindMerge } from "tailwind-merge";

const twMerge = extendTailwindMerge({ extend: { theme: {} } });
export const cx = twMerge;
export function sortCx<T extends object>(classes: T): T { return classes; }

npm install tailwind-merge

3. Wire up the theme

Copy styles/globals.css, styles/theme.css, and styles/typography.css from this repo into your project, and import styles/globals.css from your root layout.

// app/layout.tsx
import "@/styles/globals.css";

4. Add a component

Components live under components/base/<category>/. Copy the folder you need (e.g. components/base/buttons/button.tsx) into your project, then import it:

import { Button } from "@/components/base/buttons/button";

Dark mode

Dark mode uses the .dark class on <html>. Toggle it however you like — a tiny script, next-themes, or a system-preference listener. No dark: prefixes appear in component source; semantic tokens flip under .dark in styles/theme.css.