npm package: @jahanzaib9599/ui-gizmo
Description: A comprehensive UI component library with unlimited customization options for React, Next.js, and HTML
Author: UI-GIZMO
Latest version: 1.0.4

<div align="center">


# 🎨 UI-GIZMO

**A comprehensive UI component library with unlimited customization options for React, Next.js, and HTML projects**

[![npm version](https://img.shields.io/npm/v/@jahanzaib9599/ui-gizmo?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@jahanzaib9599/ui-gizmo)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)
[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
[![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)](https://reactjs.org/)
[![Next.js](https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=next.js&logoColor=white)](https://nextjs.org/)

[![Downloads](https://img.shields.io/npm/dm/@jahanzaib9599/ui-gizmo?style=for-the-badge)](https://www.npmjs.com/package/@jahanzaib9599/ui-gizmo)
[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@jahanzaib9599/ui-gizmo?style=for-the-badge)](https://bundlephobia.com/package/@jahanzaib9599/ui-gizmo)
[![GitHub stars](https://img.shields.io/github/stars/jahan-code/UI-GIZMO?style=for-the-badge)](https://github.com/jahan-code/UI-GIZMO)
[![GitHub forks](https://img.shields.io/github/forks/jahan-code/UI-GIZMO?style=for-the-badge)](https://github.com/jahan-code/UI-GIZMO)

</div>

---

## ✨ Features

<div align="center">

| 🎨 **Unlimited Customization** | ⚡ **React & Next.js Ready** | 🌐 **HTML Compatible** |
|:---:|:---:|:---:|
| Control every aspect of your components | Full TypeScript support | Works in vanilla HTML with CDN |

| 🎯 **50+ Variants** | 🎭 **Special Effects** | 📱 **Responsive** |
|:---:|:---:|:---:|
| Buttons, inputs, forms with extensive styling | Gradients, glassmorphism, glows | Mobile-first design with Tailwind CSS |

| 🔧 **Developer Friendly** | 🚀 **Zero Dependencies** | 📦 **Lightweight** |
|:---:|:---:|:---:|
| IntelliSense, TypeScript, comprehensive docs | No external dependencies | Fast and optimized |

</div>

---

## 🚀 Quick Start

### Installation

```bash
npm install @jahanzaib9599/ui-gizmo
```

```bash
yarn add @jahanzaib9599/ui-gizmo
```

```bash
pnpm add @jahanzaib9599/ui-gizmo
```

### Basic Usage

```tsx
import { Button, Input, Form, FormField } from '@jahanzaib9599/ui-gizmo';

function MyComponent() {
  return (
    <Form variant="card" padding="2rem">
      <FormField label="Name" required>
        <Input variant="primary" placeholder="Enter your name" />
      </FormField>
      <Button variant="primary" size="md">
        Submit
      </Button>
    </Form>
  );
}
```

---

## 🎨 Components

### 🎯 Button Component

<div align="center">

| **50+ Variants** | **Icon Support** | **Special Effects** | **Complete Customization** |
|:---:|:---:|:---:|:---:|
| Primary, danger, outline, gradients, glassmorphism | Emoji, unicode, SVG, images with positioning | Glow, rounded, pill, success, error, warning | Padding, margins, typography, colors, effects |

</div>

### 📝 Input Component

<div align="center">

| **All Button Features** | **Input Types** | **Icon Integration** | **Validation States** |
|:---:|:---:|:---:|:---:|
| Same customization as buttons | Text, email, password, number, tel, url, search | Left/right icons with custom sizing | Success, error, warning, loading |

</div>

### 📋 FormField Component

<div align="center">

| **Styled Labels** | **Error Handling** | **Required Indicators** | **Full Customization** |
|:---:|:---:|:---:|:---:|
| Multiple variants and sizes | Built-in error message display | Visual required field markers | Spacing, typography, backgrounds |

</div>

### 📄 Form Component

<div align="center">

| **Layout Variants** | **Complete Control** | **Flexbox & Grid** | **Custom Styling** |
|:---:|:---:|:---:|:---:|
| Card, gradient, glass, minimal | Padding, margins, positioning, typography | Advanced layout options | Every CSS property available |

</div>

---

## 🎯 Key Features

### 🎨 Unlimited Customization

```tsx
<Button 
  variant="grad1"
  size="lg"
  padding="1rem 2rem"
  margin="0.5rem"
  borderRadius="12px"
  background="linear-gradient(45deg, #ff6b6b, #4ecdc4)"
  color="white"
  fontSize="1.2rem"
  fontWeight="bold"
  boxShadow="0 8px 32px rgba(0,0,0,0.1)"
  hover={{
    transform: "translateY(-2px)",
    boxShadow: "0 12px 40px rgba(0,0,0,0.2)"
  }}
>
  Fully Custom Button
</Button>
```

### 🎭 Icon & Image Support

```tsx
// Emoji icons
<Button icon="🚀" iconPosition="left">Launch</Button>

// Unicode icons
<Button icon="★" iconPosition="right">Star</Button>

// Image icons
<Button icon="/path/to/image.png" iconSize="24px">Image Button</Button>

// Input with icons
<Input 
  icon="🔍" 
  iconPosition="left"
  placeholder="Search..." 
/>
```

### 📋 Form Layouts

```tsx
// Card form
<Form variant="card" padding="2rem" borderRadius="16px">
  {/* Form content */}
</Form>

// Gradient form
<Form variant="gradient" background="linear-gradient(135deg, #667eea 0%, #764ba2 100%)">
  {/* Form content */}
</Form>

// Glassmorphism form
<Form variant="glass" backdrop="blur(10px)" background="rgba(255,255,255,0.1)">
  {/* Form content */}
</Form>
```

---

## 🎨 Examples

### 📞 Contact Form

```tsx
<Form variant="card" padding="2rem" maxWidth="600px" margin="0 auto">
  <h2 style={{ textAlign: 'center', marginBottom: '2rem', color: '#333' }}>
    Contact Us
  </h2>
  
  <FormField label="Name" required>
    <Input 
      variant="primary"
      placeholder="Your name" 
      size="md"
    />
  </FormField>
  
  <FormField label="Email" required>
    <Input 
      type="email"
      variant="primary" 
      placeholder="your@email.com" 
      size="md"
    />
  </FormField>
  
  <FormField label="Message" required>
    <Input 
      variant="primary" 
      placeholder="Your message" 
      size="lg"
      multiline
      rows={4}
    />
  </FormField>
  
  <Button 
    variant="grad1"
    size="lg"
    width="100%"
    margin="1rem 0"
  >
    Send Message
  </Button>
</Form>
```

### 🔐 Login Form with Glassmorphism

```tsx
<Form 
  variant="glass"
  padding="3rem"
  borderRadius="20px"
  backdrop="blur(15px)"
  background="rgba(255,255,255,0.1)"
  border="1px solid rgba(255,255,255,0.2)"
  maxWidth="400px"
  margin="0 auto"
>
  <h2 style={{ textAlign: 'center', marginBottom: '2rem', color: 'white' }}>
    Welcome Back
  </h2>
  
  <FormField label="Email" required>
    <Input 
      type="email" 
      variant="glass" 
      placeholder="Enter your email" 
      size="md"
      background="rgba(255,255,255,0.1)"
      border="1px solid rgba(255,255,255,0.3)"
      color="white"
    />
  </FormField>
  
  <FormField label="Password" required>
    <Input 
      type="password"
      variant="glass" 
      placeholder="Enter your password" 
      size="md"
      background="rgba(255,255,255,0.1)"
      border="1px solid rgba(255,255,255,0.3)"
      color="white"
    />
  </FormField>
  
  <Button 
    variant="grad1"
    size="lg"
    width="100%"
    margin="1rem 0"
    background="linear-gradient(45deg, #ff6b6b, #4ecdc4)"
  >
    Sign In
  </Button>
</Form>
```

---

## 🌐 HTML Usage

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UI-GIZMO HTML Example</title>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/@jahanzaib9599/ui-gizmo@latest/dist/index.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
        const { Button, Input, Form, FormField } = window.UI_GIZMO;
    
        function App() {
      return (
        <Form variant="card" padding="2rem">
          <FormField label="Name" required>
            <Input variant="primary" placeholder="Enter your name" />
          </FormField>
          <Button variant="primary" size="md">
            Submit
          </Button>
        </Form>
      );
    }
    
        ReactDOM.render(<App />, document.getElementById('root'));
  </script>
</body>
</html>
```

---

## 🎯 Available Variants

### 🎨 Button & Input Variants

<div align="center">

| **Basic** | **Colors** | **Gradients** | **Glassmorphism** |
|:---:|:---:|:---:|:---:|
| `primary`, `danger`, `outline`, `secondary`, `ghost`, `link` | `red`, `teal`, `blue`, `yellow`, `purple`, `green`, `orange`, `pink` | `grad1`, `grad2`, `grad3`, `grad4`, `grad5`, `grad6`, `grad7`, `grad8` | `glass-red`, `glass-teal`, `glass-blue`, `glass-purple` |

</div>

### 📏 Sizes

<div align="center">

| `xs` | `sm` | `md` | `lg` | `xl` | `full` |
|:---:|:---:|:---:|:---:|:---:|:---:|
| Extra Small | Small | Medium | Large | Extra Large | Full Width |

</div>

### ✨ Effects

<div align="center">

| **Glow** | **Shapes** | **States** |
|:---:|:---:|:---:|
| `glow`, `glow-red`, `glow-teal`, `glow-blue`, `glow-green` | `rounded`, `pill` | `success`, `error`, `warning`, `disabled`, `loading` |

</div>

### 📋 Form Variants

<div align="center">

| `card` | `gradient` | `glass` | `minimal` |
|:---:|:---:|:---:|:---:|
| Card Layout | Gradient Background | Glassmorphism | Minimal Design |

</div>

---

## 📚 Documentation

<div align="center">

| 📖 **[Complete Usage Guide](./USAGE.md)** | 🔧 **[API Reference](./USAGE.md#api-reference)** | 🎨 **[Examples](./examples/)** | 📝 **[TypeScript Support](./USAGE.md#typescript-support)** |
|:---:|:---:|:---:|:---:|
| Comprehensive documentation | All props and options | Live examples and demos | Full type definitions |

</div>

---

## 🛠️ Development

```bash
# Clone the repository
git clone https://github.com/jahan-code/UI-GIZMO.git

# Install dependencies
npm install

# Start development server
npm run dev

# Build the package
npm run build

# Run type checking
npm run type-check

# Run linting
npm run lint
```

---

## 📦 Build Output

The package builds to:

- `dist/index.js` - CommonJS build
- `dist/index.esm.js` - ES Module build
- `dist/index.d.ts` - TypeScript definitions

---

## 🤝 Contributing

We welcome contributions! Please see our [Contributing Guidelines](CONTRIBUTING.md).

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

---

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

---

## 🆘 Support

<div align="center">

| 📖 **Documentation** | 🐛 **Issues** | 🎨 **Examples** | 📝 **TypeScript** |
|:---:|:---:|:---:|:---:|
| [Complete Usage Guide](./USAGE.md) | [GitHub Issues](https://github.com/jahan-code/UI-GIZMO/issues) | [Live Examples](./examples/) | Full type definitions included |

</div>

---

## 🙏 Acknowledgments

<div align="center">

| ⚛️ **React** | 🎨 **Tailwind CSS** | 📦 **Rollup** | 📝 **TypeScript** |
|:---:|:---:|:---:|:---:|
| [React](https://reactjs.org/) | [Tailwind CSS](https://tailwindcss.com/) | [Rollup](https://rollupjs.org/) | TypeScript support included |

</div>

---

<div align="center">

**Made with ❤️ for developers who love beautiful, customizable UI components.**

[![GitHub stars](https://img.shields.io/github/stars/jahan-code/UI-GIZMO?style=social)](https://github.com/jahan-code/UI-GIZMO)
[![Twitter Follow](https://img.shields.io/twitter/follow/jahanzaib9599?style=social)](https://twitter.com/jahanzaib9599)

</div>