npm package: @sarnick_dev/custom-ui-library
Description: ![npm version](https://img.shields.io/npm/v/@sarnick_dev/custom-ui-library) ![license](https://img.shields.io/npm/l/@sarnick_dev/custom-ui-library) ![downloads](https://img.shields.io/npm/dm/@sarnick_dev/custom-ui-library)
Latest version: 1.0.1

# ✨ Custom UI Library by Sarnick

![npm version](https://img.shields.io/npm/v/@sarnick_dev/custom-ui-library)
![license](https://img.shields.io/npm/l/@sarnick_dev/custom-ui-library)
![downloads](https://img.shields.io/npm/dm/@sarnick_dev/custom-ui-library)

A beautiful, lightweight UI component library for React applications built with Tailwind CSS. Elevate your project with professionally designed, customizable components.

## 📦 Installation

```bash
npm install @sarnick_dev/custom-ui-library
```

## 🚀 Quick Start

```jsx
import { CustomButton } from '@sarnick_dev/custom-ui-library';

function App() {
  return (
    <div className="p-4">
      <CustomButton variant="primary" size="md">
        Get Started
      </CustomButton>
    </div>
  );
}
```

## 🎨 Component Showcase

### Button Component

Our flexible button component adapts to your design needs.

```jsx
// Primary button
<CustomButton variant="primary" size="md">
  Submit
</CustomButton>

// Secondary button
<CustomButton variant="secondary" size="sm">
  Cancel
</CustomButton>
```

#### Available Props:

| Prop | Options | Description |
|------|---------|-------------|
| `variant` | `"primary"`, `"secondary"` | Button color scheme |
| `size` | `"sm"`, `"md"`, `"lg"` | Button size |
| `children` | ReactNode | Button content |

## 🛠️ Tailwind CSS Setup

For the components to render properly, you need to configure Tailwind CSS:

1. If you haven't installed Tailwind yet:

   ```bash
   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init
   ```

2. Update your `tailwind.config.js`:

   ```js
   module.exports = {
     content: [
       "./src/**/*.{js,jsx,ts,tsx}",
       "./node_modules/@sarnick_dev/custom-ui-library/dist/**/*.js",
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   ```

3. Add Tailwind directives to your main CSS file:

   ```css
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   ```

## 🔍 Detailed Usage Examples

### Basic Usage

```jsx
import React from 'react';
import { CustomButton } from '@sarnick_dev/custom-ui-library';

export default function ContactForm() {
  return (
    <div className="max-w-md mx-auto p-4 bg-white rounded shadow">
      <h2 className="text-xl font-bold mb-4">Contact Us</h2>
      
      <div className="mb-4">
        <label className="block mb-2">Name</label>
        <input type="text" className="w-full p-2 border rounded" />
      </div>
      
      <div className="mb-4">
        <label className="block mb-2">Email</label>
        <input type="email" className="w-full p-2 border rounded" />
      </div>
      
      <div className="mb-4">
        <label className="block mb-2">Message</label>
        <textarea className="w-full p-2 border rounded"></textarea>
      </div>
      
      <div className="flex justify-end space-x-2">
        <CustomButton variant="secondary" size="md">
          Cancel
        </CustomButton>
        <CustomButton variant="primary" size="md">
          Submit
        </CustomButton>
      </div>
    </div>
  );
}
```

## 🔄 Version Updates

We use semantic versioning:
- **Major** version for breaking changes (`2.0.0`)
- **Minor** version for new features (`1.1.0`)
- **Patch** version for bug fixes (`1.0.1`)

## 🤝 Contributing

We welcome contributions! See our [contribution guidelines](CONTRIBUTING.md) for more details.

## 📚 Documentation

For complete documentation, visit our [documentation site](https://custom-ui-library-docs.example.com).

## ⚖️ License

[MIT](LICENSE) © Sarnick

---

<div align="center">
  <p>Made with ❤️ by Sarnick</p>
</div>