Input Group Glass

Forms 6

About

A frosted-glass text input field with a leading icon, available in five decorative surface styles (frost, tint, smoke, crystal, depth) for login forms, search bars and prompt boxes.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Input Group Glass to your project and fits it to your theme.

Code

How Input Group Glass is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import FrostGroup, {
  TintGroup,
  SmokeGroup,
  CrystalGroup,
  DepthGroup,
} from "@/components/ui/input-group-glass";

export default function InputGroupGlassDemo() {
  return (
    <div className="flex h-screen w-full items-center justify-center bg-background p-10">
      <div className="flex flex-wrap items-center justify-center gap-4">
        <FrostGroup placeholder="Website" />
        <TintGroup placeholder="Search" />
        <SmokeGroup type="password" placeholder="Password" />
        <CrystalGroup type="email" placeholder="Email" />
        <DepthGroup placeholder="Reference" />
      </div>
    </div>
  );
}