Glass Input for React

Preview

Demos ready. Update 0.

Installation

For React 19+ apps with Tailwind CSS 4.

npmpnpmyarnbun

$ npx shadcn@4.14.1 add @glassyui/glass-input

Adds 5 files to components/glassyui and installs clsx.

Usage

import { GlassInput } from "@/components/glassyui/glass-input";

export function InputDemo() {
  return <GlassInput label="Project" placeholder="Glassy UI" hint="Visible over glass." />;
}

React Native usage

import { useState } from 'react';
import { GlassInput } from '@/components/glassyui/glass-input';

export default function InputExample() {
  const [email, setEmail] = useState('');

  return (
    <GlassInput
      autoCapitalize="none"
      hint="We only use it to reply."
      keyboardType="email-address"
      label="Email"
      onChangeText={setEmail}
      placeholder="you@example.com"
      value={email}
    />
  );
}

Examples

Email input

<GlassInput
  type="email"
  label="Email"
  placeholder="alex@example.com"
  hint="Used for registry updates."
/>

API reference

`GlassInput`

An input in a wrapper with its label and hint. className and ref go to the input.

Prop	Type	Default	Description
`label`	`string`	None	Visible label above the field, linked with htmlFor.
`hint`	`string`	None	Helper text below the field, linked with aria-describedby.
`type`	`string`	`'text'`	Native input type.

Also accepts HTML input attributes.

Types: GlassInputProps
Accessibility: Without a label, name the field with aria-label.