BracketUI

Open source TailwindCSS component library for React and Next.js - dark mode, theming, and full customisation out of the box.

BracketUI v4

Open source TailwindCSS component library for Next.js

Check it out on Product Hunt →

Start in seconds

Use the CLI to scaffold a new project instantly, or drop BracketUI into an existing React or Next.js project with a single install.

View on GitHub View on npm

terminal

$npx @thirdbracket/create-bracketui-app my-app

✓ Creating project structure...

✓ Installing dependencies...

✓ Configuring TailwindCSS...

✓ Setting up dark mode...

🎉 BracketUI ready. Happy building!

ButtonCardNavbar

Quick Start

Two ways to get started — scaffold a new project in one command, or add BracketUI to your existing project.

New Project

Fastest way to start

npx @thirdbracket/create-bracketui-app my-app

Scaffolds a new Next.js project with BracketUI, TailwindCSS, and dark mode pre-configured.

Existing Project

Add to any React / Next.js app

npm install @thirdbracket/bracketui

Then update your Tailwind config to include the plugin and content paths.

Tailwind Config

After installing, register the BracketUI plugin and add its content path so TailwindCSS can scan and include the component styles.

ES6 ModulesCommonJSdarkMode: classPlugin API

tailwind.config.mjs

darkMode:"class"

content:[...src, ...bracketui]

plugins:bracketuiPlugin

Works with

ES6 Modules (Recommended)

// tailwind.config.mjs
import { bracketuiPlugin } from "@thirdbracket/bracketui";

export default {
  darkMode: "class",
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@thirdbracket/bracketui/**/*.{js,ts,jsx,tsx}",
  ],
  plugins: [bracketuiPlugin],
};

CommonJS (Legacy)

// tailwind.config.js
const { bracketuiPlugin } = require("@thirdbracket/bracketui");

module.exports = {
  darkMode: "class",
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@thirdbracket/bracketui/**/*.{js,ts,jsx,tsx}",
  ],
  plugins: [bracketuiPlugin],
};

Why BracketUI

Everything you need to build modern, accessible, and themeable React interfaces — without locking you in.

Components

Ready-to-Use Components

Production-ready components for modern web development — Button, Navbar, Megamenu, Card, Tab, ThemeToggle and more.

Tailwind

TailwindCSS v3 Native

Built from the ground up for TailwindCSS v3. Drop it into any Tailwind project and override styles with utility classes.

Theming

Dark Mode & ThemeToggle

Syncs with system preferences out of the box. The ThemeToggle component lets users switch themes manually with zero configuration.

Flexible

Highly Customisable

Every component accepts component-specific theme props for root-level customisation without fighting the library.

Next.js

React & Next.js Ready

All components are optimised for React and Next.js, including App Router and Server Components workflows.

Security

Security First

Keeps up with latest Next.js security patches. CVE-2025-66478 addressed. You ship with confidence.

Available Components

A focused set of high-quality components that cover the building blocks of every modern web project.

Button

Flexible button with size, outline, and full theme prop customisation.

sizeoutlinethemeas

Navbar

Sticky responsive navigation bar with mobile menu built in.

themestickymobile

Megamenu

Nested dropdown megamenu that works on desktop and mobile.

nesteddropdownmobile

Card

Content card with icon, header, cover, and full theme control.

coverheaderisIcontheme

ThemeToggle

System-aware theme toggle that pairs with ThemeScript.

dark modesystem syncmanual

Tab

Accessible tab component for switching between content panels.

accessiblepanelstheme

Example Usage

Import any component directly from the package and use it anywhere in your app. All components accept a theme prop for full visual customisation.

Import only what you need — full tree-shaking support

Use any HTML element or Next.js Link via the as prop

Override any visual token through the theme prop

Works in Server and Client Components

Button Component

import { Button } from "@thirdbracket/bracketui";

export default function App() {
  return (
    <Button href="/path" outline size="md">
      Click Me
    </Button>
  );
}

Dark Mode — ThemeScript in layout.tsx

import { ThemeScript } from "@thirdbracket/bracketui";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <ThemeScript />
      </head>
      <body>{children}</body>
    </html>
  );
}

Open Source & MIT Licensed

BracketUI is free and open source under the MIT licence. Contributions, bug reports, and feature requests are always welcome.

Star on GitHub

Follow development, report issues, and contribute components.

GitHub Repository

npm Package

View all published versions, changelog, and package stats.

npm Package

MIT Licence

Free to use in personal and commercial projects. Forever.

View Licence

Build your next project with BracketUI

Free, open source, and built by the same team behind thirdbracket. Start a new project or add it to an existing one today.

View on GitHub Explore Services