npm package: @nurlan_allur/allur_ui_kit
Description: A comprehensive React UI Kit library with modern components
Author: Your Name
Latest version: 1.0.5

# 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

```bash
npm install @yourorg/ui-kit
```

## Usage

```tsx
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:
   ```bash
   npm install
   ```

3. Start the development server:
   ```bash
   npm run dev
   ```

4. Build the library:
   ```bash
   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

```tsx
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

```tsx
interface IconButtonProps {
  variant?: 'primary' | 'secondary' | 'tertiary'
  size?: 'small' | 'medium' | 'large'
  loading?: boolean
  error?: boolean
  disabled?: boolean
  children: React.ReactNode
}
```

### Badge

```tsx
interface BadgeProps {
  variant?: 'default' | 'secondary' | 'success' | 'warning' | 'error'
  children: React.ReactNode
}
```

### PageHeader

```tsx
interface PageHeaderProps {
  title: string
  description?: string
  breadcrumbItems?: BreadcrumbItem[]
}
```

### Breadcrumb

```tsx
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:
   ```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