Input

Below is the full output of the Inpu component across all variants and sizes.

“Its Important to install the packages & Dependencies to use can intall using npm install zure-ui and also paste code maunally For both React & Next Js “

1. Variants

These define the intent and visual weight of the Input.

Preview

default

outline

ghost

error

2. Sizes

We have provided 3 sizes sm , md & lg.

Preview

3. Example

Made an example for better understanding in which you an take Input and fetch

Important Note “I have used tailwindcss you can use normal CSS for text color”

Preview

Name

Hi! Welcome to Zure UI

Props

Prop	Type	Default	Description
`label`	`string`	—	Label text displayed for the input field.
`value`	`string`	—	Current value of the input (controlled component).
`onChange`	`function`	—	Callback fired when the input value changes.
`placeholder`	`string`	`" "`	Placeholder text shown inside the input.
`type`	`string`	`"text"`	HTML input type (e.g. `text`, `password`, `email`).
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Controls the size of the input.
`variant`	`string`	`"default"`	Visual style variant of the input.
`disabled`	`boolean`	`false`	Disables the input when set to `true`.
`error`	`boolean`	`false`	Shows error state styling when `true`.
`color`	`string`	`"black"`	Text or border color of the input.
`className`	`string`	`""`	Additional CSS classes for custom styling.
`...props`	`object`	—	Any extra props passed to the native input element.

Installation

You can Integrate Zure UI By 2 ways npm install zure-ui Or by Manually creating folder , files & paste the given code It Totally depends on your workflow.

NPM

Step 1: Create a React App

Open your terminal and run the following command to create a new React app:


npx create-react-app my-app

Step 2: Navigate to Your Project Directory

After creating your project, navigate to your project directory:


cd my-app

Step 3: Install the Package

Run the following command in your project root to add the library as a dependency.


npm install zure-ui

Step 4: Start Building

You can now import any component directly into your React files.

Input.jsx


import { useState } from "react";
import {Input} from "zure-ui";
 
export default function InputDemo() {
const [name, setName] = useState("");
 
return (
<div className="text-black">
<Input
  label="Name"
  color="#000000"
  size="md"
  value={name}
  onChange={(e) => setName(e.target.value)}
/>
 
{/* show data below */}
<p className="text-black text-sm m-4">Hi! <span className="font-semibold text-orange-500 uppercase">{name}</span> Welcome to Zure UI </p>
</div>
);
}

Manual

Step 1: Create a Components Directory

Ensure you have a dedicated folder for UI components (e.g., src/components/ui).

Step 2: Create the Component Folder

For each component you want to use, create a new folder named after the component.

- - - - Input.jsx
      - Input.module.css
      - index.js
- App.js

Step 3: Add the Three Core Files

Inside that new folder, create these three files and paste the code provided in the component’s documentation:

Input.jsx (The Logic)
Input.module.css (The Styles)
index.js (The Export)

Step 4: Paste in Input.jsx

React JS

Inpu.jsx


import styles from "./input.module.css";
 
export const Input = ({
  label,
  value,
  onChange,
  placeholder = " ",
  type = "text",
  size = "md",
  variant = "default",
  disabled = false,
  error = false,
  color = "black",
  className = "",
  ...props
}) => {
  return (
    <div
      className={`${styles.wrapper} ${className}`}
      style={{ "--zure-color": error ? "red" : color }}
    >
      <input
        type={type}
        value={value}
        onChange={onChange}
        placeholder={placeholder}
        disabled={disabled}
        aria-invalid={error}
        className={`${styles.input} ${styles[variant]} ${styles[size]}`}
        {...props}
      />
      {label && <label className={styles.label}>{label}</label>}
    </div>
  );
};

Step 5: Paste in input.module.css

Input.module.css


.wrapper {
position: relative;
width: 100%;
--zure-color: black;
}
 
/* Input */
.input {
width: 100%;
border-radius: 8px;
border: 1.5px solid #d1d5db;
padding: 0.6rem 0.8rem;
font-size: 0.9rem;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
 
/* Focus */
.input:focus {
border-color: var(--zure-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--zure-color) 20%, transparent);
}
 
/* Floating label */
.label {
position: absolute;
left: 0.7rem;
top: 50%;
transform: translateY(-50%);
background: white;
padding: 0 0.25rem;
font-size: 0.75rem;
color: #6b7280;
pointer-events: none;
transition: 0.2s ease;
}
 
/* Float label */
.input:focus + .label,
.input:not(:placeholder-shown) + .label {
top: -0.4rem;
font-size: 0.7rem;
color: var(--zure-color);
}
 
/* Variants */
.default {
background: white;
}
 
.outline {
background: transparent;
border: 1.5px solid var(--zure-color);
}
 
.ghost {
background: transparent;
border: none;
border-bottom: 1.5px solid var(--zure-color);
border-radius: 0;
}
 
/* Sizes */
.sm { font-size: 0.8rem; padding: 0.4rem 0.6rem; }
.md { font-size: 0.9rem; padding: 0.6rem 0.8rem; }
.lg { font-size: 1rem; padding: 0.8rem 1rem; }
 
/* Disabled */
.input:disabled {
opacity: 0.6;
cursor: not-allowed;
}

Step 6: Paste in index.js

index.js


export { Input } from "./Input";

Step 7: Local Usage

Import the component using your local path:

Input.jsx


import { Input } from './components/Input';

Step 8: Usage

Use the component

Input.jsx


<Input label="Email" color="#0ea5e9" />
<Input label="Username" color="purple" variant="outline" />
<Input label="Search" color="hsl(142 76% 36%)" />
<Input label="Password" color="red" error />

Input

1. Variants

Preview

Use

2. Sizes

Preview

Use

3. Example

Preview

Use

Props

Installation

NPM

NPM

Step 1: Create a React App

Step 2: Navigate to Your Project Directory

Step 3: Install the Package

Step 4: Start Building

Manual

Manual

Step 1: Create a Components Directory

Step 2: Create the Component Folder

Step 3: Add the Three Core Files

Step 4: Paste in Input.jsx

React JS

Next JS

Step 5: Paste in input.module.css

Step 6: Paste in index.js

Step 7: Local Usage

Step 8: Usage