UI Kit Library

A comprehensive React UI component library built with TypeScript and Tailwind CSS, inspired by modern design systems like Material UI.

Features

• 🎨 Modern Design: Clean, professional components following design system principles
• 🔧 TypeScript Support: Full TypeScript support with proper type definitions
• 🎯 Tailwind CSS: Built with Tailwind CSS for easy customization
• 📦 Tree Shakeable: Import only what you need
• ♿ Accessible: Built with accessibility in mind
• 🔄 Multiple States: Support for loading, error, disabled states
• 📱 Responsive: Mobile-first responsive design

Components

• Button: Primary, secondary, and tertiary variants with multiple sizes
• IconButton: Compact buttons for icon-only actions
• Badge: Status indicators and labels
• Breadcrumb: Navigation breadcrumb components
• PageHeader: Consistent page headers with breadcrumbs

Installation

npm install @yourorg/ui-kit

Usage

import { Button, Badge, PageHeader } from '@yourorg/ui-kit'

function MyComponent() {
  return (
    <div>
      <PageHeader 
        title="My Page"
        description="Page description"
        breadcrumbItems={[
          { label: 'Home', href: '/' },
          { label: 'Current Page' }
        ]}
      />
      
      <div className="flex gap-4">
        <Button variant="primary" size="medium">
          Primary Action
        </Button>
        <Button variant="secondary" size="medium">
          Secondary Action
        </Button>
        <Badge variant="success">New</Badge>
      </div>
    </div>
  )
}

Development

Prerequisites

• Node.js 16+
• npm or yarn

Getting Started

1. Clone the repository

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Build the library:

   npm run build:lib

Scripts

• npm run dev - Start development server with demo page
• npm run build - Build demo page
• npm run build:lib - Build the library for distribution
• npm run preview - Preview the built demo page

Component API

Button

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'tertiary'
  size?: 'small' | 'medium' | 'large'
  leftIcon?: React.ReactNode
  rightIcon?: React.ReactNode
  loading?: boolean
  error?: boolean
  disabled?: boolean
  children: React.ReactNode
}

IconButton

interface IconButtonProps {
  variant?: 'primary' | 'secondary' | 'tertiary'
  size?: 'small' | 'medium' | 'large'
  loading?: boolean
  error?: boolean
  disabled?: boolean
  children: React.ReactNode
}

Badge

interface BadgeProps {
  variant?: 'default' | 'secondary' | 'success' | 'warning' | 'error'
  children: React.ReactNode
}

PageHeader

interface PageHeaderProps {
  title: string
  description?: string
  breadcrumbItems?: BreadcrumbItem[]
}

Breadcrumb

interface BreadcrumbProps {
  items: BreadcrumbItem[]
  separator?: React.ReactNode
}

interface BreadcrumbItem {
  label: string
  href?: string
  icon?: React.ReactNode
}

Customization

The library uses Tailwind CSS classes and CSS custom properties. You can customize the appearance by:

1. Overriding CSS custom properties in your global CSS:

   :root {
     --button-text-large-18-medium-font-family: 'Your Font', sans-serif;
   }

2. Using Tailwind CSS classes via the className prop on any component

3. Extending the theme in your tailwind.config.js

License

MIT License - see LICENSE file for details.

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request