Installation

BTNG.UI works in any React project that uses Tailwind v4. The recommended target is Next.js 15 App Router.

1. Set up Tailwind v4

If your project already uses Tailwind v4, skip this.

pnpm add tailwindcss @tailwindcss/postcss

In your global stylesheet:

@import "tailwindcss";

npx shadcn@latest add https://ui.btng.studio/r/tokens

This writes tokens.css into your project (default target app/tokens.css) and you import it once from your global CSS above @theme rules:

@import "./tokens.css";

npx shadcn@latest add https://ui.btng.studio/r/button

The CLI resolves dependencies for you. Adding product-card pulls in button, badge, and the cn helper automatically.

Default is cs3 (Clean White). For dark, set data-scheme="cs1" on <html>:

<html lang="en" data-scheme="cs1">

You can also scope schemes to sections. See Theming.