Mintuix Input Component

The only React input component you'll ever need. Beautiful, fast, and works exactly how you expect.

Stop wasting time styling inputs from scratch. Mintuix Input gives you a professional, polished look out of the box with the flexibility to adapt to any design—whether you're building a sleek iOS-style app, a clean Android interface, or a modern "glass" look.

Why Mintuix Input?

Most input components are either too simple or too bloated. We built Mintuix to be the "Goldilocks" of inputs:

• ✨ Floating Labels: Give your forms a premium feel with labels that gracefully move out of the way as users type.
• 🎨 Multiple Styles: Switch between Default, iOS, Android, and Glass themes with a single word.
• 🚀 Lightning Fast: Extremely lightweight and optimized for performance. No extra luggage.
• 📱 Mobile First: Designed to look and feel great on every screen size.
• ♿ Accessible: Follows the best standards so everyone can use your forms easily.

Quick Start

Get up and running in seconds:

npm install @mintuix/input
# or
pnpm add @mintuix/input

Simple Usage

import { Input } from "@mintuix/input";

function MyForm() {
  return (
    <Input
      label="Email Address"
      placeholder="[email protected]"
      floatingLabel
    />
  );
}

Beautiful Built-in Styles

No more CSS headaches. Just pick the look that fits your brand:

• Default: Clean, modern, and versatile.
• iOS: That signature smooth, rounded Apple aesthetic.
• Android: Following the latest Material Design principles.
• Glass: A trendy, semi-transparent look for modern interfaces.

Features at a Glance

• Floating Labels: Dynamic labels that react to user input.
• Error States: Easily show validation errors with a dedicated prop.
• Custom Colors: One prop to change the focus color to match your brand.
• Size Options: Choose from Small, Medium, or Large to fit your layout.

FAQ

Does it work with Next.js?
Yes! It's fully compatible with Next.js and React 18+.

Can I use it without Tailwind CSS?
Absolutely. It's styling-agnostic and won't conflict with your existing CSS.

Built with ❤️ by the Mintuix team.