🎨 UI-GIZMO

A comprehensive UI component library with unlimited customization options for React, Next.js, and HTML projects

✨ Features

| 🎨 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 |

🚀 Quick Start

Installation

npm install @jahanzaib9599/ui-gizmo

yarn add @jahanzaib9599/ui-gizmo

pnpm add @jahanzaib9599/ui-gizmo

Basic Usage

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

| 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 |

📝 Input Component

| 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 |

📋 FormField Component

| Styled Labels | Error Handling | Required Indicators | Full Customization | |:---:|:---:|:---:|:---:| | Multiple variants and sizes | Built-in error message display | Visual required field markers | Spacing, typography, backgrounds |

📄 Form Component

| Layout Variants | Complete Control | Flexbox & Grid | Custom Styling | |:---:|:---:|:---:|:---:| | Card, gradient, glass, minimal | Padding, margins, positioning, typography | Advanced layout options | Every CSS property available |

🎯 Key Features

🎨 Unlimited Customization

<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

// 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

// 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

<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="[email protected]" 
      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

<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

<!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

| 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 |

📏 Sizes

| xs | sm | md | lg | xl | full | |:---:|:---:|:---:|:---:|:---:|:---:| | Extra Small | Small | Medium | Large | Extra Large | Full Width |

✨ Effects

| Glow | Shapes | States | |:---:|:---:|:---:| | glow, glow-red, glow-teal, glow-blue, glow-green | rounded, pill | success, error, warning, disabled, loading |

📋 Form Variants

| card | gradient | glass | minimal | |:---:|:---:|:---:|:---:| | Card Layout | Gradient Background | Glassmorphism | Minimal Design |

📚 Documentation

| 📖 Complete Usage Guide | 🔧 API Reference | 🎨 Examples | 📝 TypeScript Support | |:---:|:---:|:---:|:---:| | Comprehensive documentation | All props and options | Live examples and demos | Full type definitions |

🛠️ Development

# 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.

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 file for details.

🆘 Support

| 📖 Documentation | 🐛 Issues | 🎨 Examples | 📝 TypeScript | |:---:|:---:|:---:|:---:| | Complete Usage Guide | GitHub Issues | Live Examples | Full type definitions included |

🙏 Acknowledgments

| ⚛️ React | 🎨 Tailwind CSS | 📦 Rollup | 📝 TypeScript | |:---:|:---:|:---:|:---:| | React | Tailwind CSS | Rollup | TypeScript support included |

Made with ❤️ for developers who love beautiful, customizable UI components.