BracketUI

Introducing BracketUI – A TailwindCSS based Component Library

Author

Musabbir Sagar

Date Published

12/18/2025

BracketUI is a minimal, Tailwind-first UI component library built for modern Next.js projects. This post explains why it was created, who it’s for, and how you can get started and access it early.

bracketui-npm-package — Visit NPM Repository of BracketUI

Introducing BracketUI

I’m excited to finally share something I’ve been building quietly over time — BracketUI, a minimal UI component library designed specifically for Next.js and Tailwind CSS.

BracketUI didn’t start as a product idea. It started as a personal system.

While working on multiple real-world projects, I found myself repeatedly rebuilding the same UI patterns — buttons, cards, layouts, navigation. Each time slightly different. Each time costing unnecessary time.

What I wanted was simple:

A clean, predictable set of UI components that stay out of the way and let me build fast.

That idea slowly evolved into BracketUI.

Why BracketUI Exists

Most UI libraries try to do everything. BracketUI does not.

The focus is intentionally narrow:

1. Minimal, production-ready UI components
2. Built with Tailwind CSS, not styled on top of it
3. Optimized for Next.js workflows
4. Easy to customize without fighting abstractions
5. Designed for speed, clarity, and consistency

There are no heavy design opinions baked in. No unnecessary layers. Just components that work well together and feel natural inside modern frontend stacks.

Built for Developers Who Prefer Simplicity

BracketUI is for developers who:

- Prefer clean layouts over flashy visuals
- Want Tailwind-first control instead of theme lock-in
- Care about performance and maintainability
- Build real products, not demos

Minimalism here is not just about aesthetics. It’s about reducing friction while building and keeping your UI system easy to reason about.

How to Get Started with BracketUI

BracketUI is designed to be easy to adopt if you already use Next.js/React with Tailwind CSS.

Quick Start

The fastest way to get started with BracketUI is to use the CLI:

typescript

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

Add to an existing React/Next.js project

If you prefer to add BracketUI to an existing project:

Install the package

typescript

1npm install @thirdbracket/bracketui

Then update your Tailwind CSS configuration:

ES6 Modules (Recommended):

typescript

1// tailwind.config.mjs
2import { bracketuiPlugin } from "@thirdbracket/bracketui";
3
4export default {
5  darkMode: "class", // Required for BracketUI's dark/light theming
6  content: [
7    "./src/**/*.{js,ts,jsx,tsx}",
8    "./node_modules/@thirdbracket/bracketui/**/*.{js,ts,jsx,tsx}",
9  ],
10  plugins: [bracketuiPlugin],
11};

CommonJS (Legacy):

typescript

1// tailwind.config.js
2const { bracketuiPlugin } = require("@thirdbracket/bracketui");
3
4module.exports = {
5  darkMode: "class",
6  content: [
7    "./src/**/*.{js,ts,jsx,tsx}",
8    "./node_modules/@thirdbracket/bracketui/**/*.{js,ts,jsx,tsx}",
9  ],
10  plugins: [bracketuiPlugin],
11};

Customization & Theming

From day one, BracketUI is built for root level customization with component specific theme props. Detailed documenation is coming soon.

Dark Mode

Bracket UI utilizes TailwindCSS dark mode functionality. You just need to add darkMode: "class", inside your TailwinCSS config.

Theme Toggle

Bracket UI extends dark mode functionality into an improved feature we call ThemeToggle. This component uses ThemeScript and custom hook to determine the system/device theme state. After that the component can be used to switch between theme states. It supports:

System Preferences: Syncs your app theme with the device's default (dark or light).

Manual Toggling: Allows users to switch themes via the toggle button.

Example: If you are using Next.js app router first import ThemeScript into your layout.tsx file and then use it inside the head element of the component to enable site wide Theming functionality

typescript

1import { ThemeScript } from "@thirdbracket/bracketui";
2
3export default function RootLayout({
4  children,
5}: Readonly<{
6  children: React.ReactNode;
7}>) {
8  return (
9    <html lang="en">
10      <head>
11        <ThemeScript /> 
12      </head>
13      <body
14        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
15      >
16        {children}
17      </body>
18    </html>
19  );
20}

After that you can use the ThemeToggle in any part of your website. Here the ThemeToggle is used on a Navbar component.

Development

This project uses Turborepo for monorepo management and Changesets for versioning and publishing.

To get started first clone the repository and go to project directory:

typescript

1git clone https://github.com/sagarmusabbir/bracketui.git
2cd bracketui

Install dependencies

typescript

1npm install

Start development server for all packages

typescript

1npm run dev

Early Stage, Open Direction

This is an early release, and I’m intentionally launching BracketUI in for early feedback..

Instead of pretending it’s finished, I want it to grow based on real usage and real needs. If you find BracketUI useful, your feedback will directly influence what comes next.

You can review BracketUI and get early access through the site. Just visit the official Github Repository of BracketUI. Open an issue or submit a pull request for fixes, new components, or features.

What’s Next

The roadmap will be shaped by:

- Real-world project usage
- Developer feedback
- Practical needs, not trends

This is just the beginning.

If you’re curious, take a look, explore the components, and share what you think.