UI Component Library

A modern React UI component library built with TypeScript and Tailwind CSS v4.

Installation

npm install @durgarao310/ui-components

Setup in Your Project

This library requires Tailwind CSS to be set up in your consuming project. Follow these steps:

1. Install Tailwind CSS (if not already installed)

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. Configure Tailwind to use our preset

Update your tailwind.config.js:

import tailwindPreset from '@durgarao310/ui-components/tailwind';

/** @type {import('tailwindcss').Config} */
export default {
  presets: [tailwindPreset],
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    // Include the component library
    "./node_modules/@durgarao310/ui-components/**/*.{js,ts,jsx,tsx}",
  ],
}

3. Import the styles in your main CSS file

Add this to your main CSS file (e.g., src/index.css):

@import '@durgarao310/ui-components/styles';

4. Basic Usage

import { Button, Input, Badge } from '@durgarao310/ui-components';

function App() {
  return (
    <div className="p-8 bg-background text-foreground">
      <Button variant="primary">Click me</Button>
      <Input label="Email" placeholder="Enter your email" />
      <Badge variant="secondary">New</Badge>
    </div>
  );
}

Option 2: Manual CSS Import

If you prefer explicit imports or need to import CSS separately:

// Import CSS first
import '@durgarao310/ui-components/styles';

// Then import components
import { Button, Input } from '@durgarao310/ui-components';

function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <Input label="Email" placeholder="Enter your email" />
    </div>
  );
}

CSS-in-JS/Bundler Import

// In your main CSS file or index.js
import '@durgarao310/ui-components/styles';

Theme System

This library includes a comprehensive theme system with:

• Modern Color System: Uses oklch() color space for better consistency
• Dark Mode Support: Automatic dark mode with .dark class
• Comprehensive Variables: Colors for cards, popovers, charts, sidebar, etc.
• Flexible Design Tokens: Multiple radius options (sm, md, lg, xl)

Available CSS Variables

/* Light mode variables */
:root {
  --background: oklch(100% 0 0);
  --foreground: oklch(14.5% 0 0);
  --primary: oklch(20.5% 0 0);
  --primary-foreground: oklch(98.5% 0 0);
  /* ... and many more */
}

/* Dark mode variables */
.dark {
  --background: oklch(14.5% 0 0);
  --foreground: oklch(98.5% 0 0);
  /* ... automatically applied */
}

Components

Button

• Variants: primary, secondary, outline, ghost
• Sizes: sm, md, lg

Input

• Support for labels, error states, and helper text

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build library
npm run build:lib

# Lint code
npm run lint

License

MIT