Glass Input

iOS-style search field in a liquid glass capsule — frosted surface with a leading icon slot and a focus ring that glows in on focus.

Playground

Edit the props live and copy the config.

Radius

Tint

0.4

<GlassInput
  radius={24}
  tint={0.4}
  icon={<Search className="size-4" />}
  placeholder="Search components"
/>

Install

npx shadcn@latest add https://websiteglass.com/r/glass-input.json

Usage

import { GlassInput } from '@/components/ui/glass-input';
import { SearchIcon } from 'lucide-react';

<GlassInput
  icon={<SearchIcon className="size-4" />}
  placeholder="Search components"
  className="w-72"
/>

Props

Prop	Type	Default	Description
`icon`	`ReactNode`	—	Leading icon slot.
`tint`	`number`	`0.4`	Frosted glass tint 0–1.
`radius`	`number`	`9999`	Corner radius (default = pill).
`placeholder`	`string`	`"Search…"`	Placeholder text.

All native <input> props are forwarded.

Interaction

On focus, the surface tint lifts slightly and a soft white glow ring fades in around the capsule. On blur, both animate back to rest.