@mintuix/input

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="[e-mail]"
      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.