@thirdbracket/bracketui

v3.1.12

Published

15 days ago

[![npm version](https://badge.fury.io/js/@thirdbracket%2Fbracketui.svg)](https://badge.fury.io/js/@thirdbracket%2Fbracketui) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

0High
0Medium
0Low

sagarmusabbir

react nextjs tailwindcss ui-components component-library typescript dark-mode theme-toggle responsive accessibility

BracketUI

A modern, accessible React component library built with TailwindCSS. Perfect for Next.js applications with built-in dark mode support and theme management.

✨ Features

🎨 TailwindCSS Integration - Built-in styling with full customization
🌙 Dark Mode Support - Automatic system preference detection + manual toggle
⚡ Next.js Optimized - Perfect for App Router and Pages Router (Next.js 15.3.7+)
🔒 Security First - Latest security patches and vulnerability fixes
📦 ES6 Module Support - Modern import/export syntax with full compatibility
🎯 TypeScript First - Full type safety out of the box
📱 Responsive Design - Mobile-first approach
♿ Accessibility - WCAG compliant components
🎛️ Highly Customizable - Theme props for easy customization

🚀 Quick Start

Installation

npm install @thirdbracket/bracketui

Setup TailwindCSS

ES6 Modules (Recommended):

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

export default {
  darkMode: "class", // Required for dark mode
  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],
};

Basic Usage

import { Button, ThemeToggle, ThemeScript } from "@thirdbracket/bracketui";

// Add ThemeScript to your layout (Next.js App Router)
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <ThemeScript />
      </head>
      <body>
        {children}
      </body>
    </html>
  );
}

// Use components anywhere
export default function App() {
  return (
    <div>
      <Button href="/dashboard" size="lg">
        Get Started
      </Button>
      <ThemeToggle />
    </div>
  );
}

📦 Available Components

| Component | Description | |-----------|-------------| | Button | Versatile button with multiple variants and sizes | | Card | Flexible container for content | | Navbar | Navigation bar with responsive design | | Megamenu | Advanced dropdown navigation | | Tab | Tabbed interface component | | ThemeToggle | Dark/light mode toggle button | | ThemeScript | Theme initialization script |

🎨 Customization

BracketUI components accept theme props for easy customization:

<Button 
  theme={{
    background: "bg-purple-600 hover:bg-purple-700",
    text: "text-white",
    border: "border-purple-600"
  }}
>
  Custom Button
</Button>

🌙 Dark Mode

BracketUI includes a complete dark mode solution:

Add ThemeScript to your layout
Use ThemeToggle component anywhere
Automatic system detection with manual override

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

// In your layout
<head>
  <ThemeScript />
</head>

// Anywhere in your app
<ThemeToggle />

🛠️ CLI Tool

Quickly scaffold new projects with BracketUI:

npx @thirdbracket/create-bracketui-app my-app
cd my-app
npm run dev

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme