CBP UI

A comprehensive React UI component library built with shadcn/ui, Radix UI primitives, and Tailwind CSS. This package provides a collection of reusable, accessible, and customizable components for modern web applications.

Features

• 🎨 Modern Design System - Built with Tailwind CSS and CSS variables for easy theming
• ♿ Accessibility First - Components built on Radix UI primitives for excellent accessibility
• 🔧 Fully Customizable - Easy to customize with Tailwind CSS and CSS variables
• 📦 Tree Shakable - Import only what you need
• 🎯 TypeScript Ready - Full TypeScript support with type definitions
• 🌙 Dark Mode Support - Built-in dark mode support with next-themes
• 📱 Mobile Responsive - Mobile-first responsive design

Installation

npm install @repo/ui
# or
yarn add @repo/ui
# or
pnpm add @repo/ui

Setup

1. Install peer dependencies

npm install react react-dom

2. Add Tailwind CSS configuration

Import the Tailwind config in your tailwind.config.js:

// tailwind.config.js
import { config } from '@repo/ui/tailwind.config';

export default {
  ...config,
  content: ['./src/**/*.{js,ts,jsx,tsx}', './node_modules/@repo/ui/src/**/*.{js,ts,jsx,tsx}'],
};

3. Add global styles

Import the global CSS in your main CSS file or app entry point:

@import '@repo/ui/globals.css';

4. Configure providers

Wrap your app with the UI system provider:

import { UISystemProvider } from '@repo/ui/providers';

function App() {
  return <UISystemProvider>{/* Your app content */}</UISystemProvider>;
}

Usage

Basic Components

import { Button } from '@repo/ui/components/button';
import { Input } from '@repo/ui/components/input';
import { Card, CardContent, CardHeader, CardTitle } from '@repo/ui/components/card';

function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          <Input placeholder="Enter your name" />
          <Button>Get Started</Button>
        </div>
      </CardContent>
    </Card>
  );
}

Form Components

import { EmailField } from '@repo/ui/common/forms/email-field';
import { PasswordField } from '@repo/ui/common/forms/password-field';
import { SwitchField } from '@repo/ui/common/forms/switch-field';

function LoginForm() {
  return (
    <form className="space-y-4">
      <EmailField label="Email" name="email" />
      <PasswordField label="Password" name="password" />
      <SwitchField label="Remember me" name="remember" />
    </form>
  );
}

Interactive Components

import { Pressable } from '@repo/ui/common/interactive';

function InteractiveExample() {
  return (
    <Pressable trackingName="example" onClick={() => console.log('Pressed!')}>
      <div className="rounded bg-blue-500 p-4 text-white">Click me</div>
    </Pressable>
  );
}

Page Components

import { Page404 } from '@repo/ui/common/pages/page-404';
import { Page500 } from '@repo/ui/common/pages/page-500';

// Use in your error boundaries or routing
function NotFoundPage() {
  return <Page404 />;
}

function ErrorPage() {
  return <Page500 />;
}

Available Components

UI Components

• Layout: Card, Separator, Aspect Ratio, Resizable
• Navigation: Breadcrumb, Navigation Menu, Menubar, Pagination
• Forms: Input, Textarea, Select, Checkbox, Radio Group, Switch, Form, Label
• Feedback: Alert, Alert Dialog, Toast (Sonner), Progress, Spinner, Skeleton
• Overlay: Dialog, Sheet, Drawer, Popover, Hover Card, Tooltip, Context Menu, Dropdown Menu
• Data Display: Table, Badge, Avatar, Calendar, Chart
• Interactive: Button, Toggle, Toggle Group, Accordion, Collapsible, Tabs, Carousel
• Input: Input OTP, Slider, Command
• Layout: Sidebar, Scroll Area

Common Components

• Forms: Email Field, Password Field, Switch Field, Form Input Field
• Interactive: Pressable
• Display: Display HTML String
• Pages: 404 Error Page, 500 Error Page

Hooks

• use-mobile: Responsive mobile detection hook

Utilities

• utils: Utility functions for className merging and component variants
• types: Common TypeScript type definitions

Theming

The component library uses CSS variables for theming. You can customize the theme by overriding CSS variables in your global styles:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  /* ... other variables */
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --primary: 210 40% 98%;
  --primary-foreground: 222.2 47.4% 11.2%;
  /* ... other variables */
}

Development

Scripts

# Add new shadcn/ui components
pnpm ui add <component-name>

# Lint the code
pnpm lint

# Clean build artifacts
pnpm clean

Adding New Components

This library uses shadcn/ui as the foundation. To add new components:

pnpm ui add <component-name>

This will add the component to the src/components directory with proper configuration.

Dependencies

Core Dependencies

• React 18+ - React library
• Radix UI - Unstyled, accessible UI primitives
• Tailwind CSS - Utility-first CSS framework
• Class Variance Authority - Component variant management
• Tailwind Merge - Intelligent Tailwind class merging

Additional Libraries

• Lucide React - Icon library
• React Hook Form - Form management
• Zod - Schema validation
• Date-fns - Date utility library
• Next Themes - Theme management
• Recharts - Chart library
• Sonner - Toast notifications

Browser Support

This library supports all modern browsers that support ES2015+ and React 18.

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

This project is private and proprietary.

Version

Current version: 0.0.0

For more detailed documentation on individual components, please refer to the component files in the src/components directory.