Getting Started

UiBrium is a production-grade UI component library for building high-quality, accessible web applications with React and Tailwind CSS.

Quick Start

Follow these steps to integrate UiBrium into your existing project.

Install Dependencies

UiBrium requires framer-motion for animations and lucide-react for icons.

pnpm add @uibrium/ui framer-motion lucide-react

Configure Tailwind CSS

To ensure the component styles are correctly purged and loaded, add the UiBrium package to your Tailwind configuration.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@uibrium/ui/dist/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Import Global Styles

Import the core UiBrium stylesheet in your main entry file (e.g., main.tsx or _app.tsx).

import '@uibrium/ui/styles.css';

Ensure this import is placed after your global tailwind directives to avoid CSS specificity issues.

Add the Theme Provider

Wrap your application with the ThemeProvider to enable automatic dark mode switching and system preference detection.

import { ThemeProvider } from '@uibrium/ui';

function App() {
  return (
    <ThemeProvider defaultMode="system">
      <YourAppContent />
    </ThemeProvider>
  );
}

Core Principles

WAI-ARIA Compliant

All interactive components strictly follow accessibility standards to ensure your application is usable by everyone.

Zero Runtime Overhead

Pro Tip

Use the asChild prop found on most components to seamlessly merge UiBrium components with next/link or other routing libraries.

Home Page

Component Library