Liquid Glass Searchbox

An iOS 26-inspired liquid glass searchbox with focus animations and SVG refraction effects.

Browser Compatibility

MDN Source

Chrome...

Full

Edge...

Full

Safari...

Full

Firefox...

Partial

Opera...

Full

Compatibility Note for Liquid Glass Refraction:

Firefox supports backdrop-filter but currently lacks support for referring to SVG filters via url(#filterId). This results in the surface appearing as a simple semi-transparent blur without the refractive liquid effect.

Open in

"use client";
 
import { useState } from "react";
 
import { LiquidGlassSearchbox } from "@/components/jyotirmoydas/liquid-glass-searchbox";
 
export function LiquidGlassSearchboxDemo() {
  const [query, setQuery] = useState("");
 
  return (
    <LiquidGlassSearchbox
      value={query}
      onChange={setQuery}
      onClear={() => setQuery("")}
      placeholder="Search..."
    />
  );
}

Installation

bunx --bun shadcn@latest add @jyotirmoydas/liquid-glass-searchbox

Usage

import { LiquidGlassSearchbox } from "@/components/jyotirmoydas/liquid-glass-searchbox";

const [query, setQuery] = useState("");
 
<LiquidGlassSearchbox
  value={query}
  onChange={setQuery}
  onClear={() => setQuery("")}
  placeholder="Search..."
/>;

API Reference

Input Control

Prop	Type	Default	Description
`value`	`string`		Controlled value of the searchbox.
`onChange`	`(value: string) => void`		Callback when the input value changes.
`onClear`	`() => void`		Callback when the clear button is clicked.
`showClearButton`	`boolean`	`true`	Whether to show the clear button when there's text.
`placeholder`	`string`	`"Search"`	Placeholder text for the input.
`disabled`	`boolean`	`false`	Whether the searchbox is disabled.

Appearance

Prop	Type	Default	Description
`className`	`string`		Additional CSS classes.
`width`	`number`	`420`	Width of the searchbox in pixels.
`height`	`number`	`56`	Height of the searchbox in pixels.
`idleOpacity`	`number`	`0.05`	Background opacity when idle.
`focusOpacity`	`number`	`0.2`	Background opacity when focused.

Optical Parameters

Fine-tune the liquid glass refraction effect.

Prop	Type	Default	Description
`blur`	`number`	`1`	Blur level for the glass refraction effect.
`specularOpacity`	`number`	`0.2`	Opacity of the specular highlight.
`specularSaturation`	`number`	`4`	Saturation multiplier for the specular highlight.
`refractionLevel`	`number`	`0.7`	Base refraction level (magnification intensity).

Examples

Default

Basic searchbox with default settings.

Open in

"use client";
 
import { useState } from "react";
 
import { LiquidGlassSearchbox } from "@/components/jyotirmoydas/liquid-glass-searchbox";
 
export function LiquidGlassSearchboxDemo() {
  const [query, setQuery] = useState("");
 
  return (
    <LiquidGlassSearchbox
      value={query}
      onChange={setQuery}
      onClear={() => setQuery("")}
      placeholder="Search..."
    />
  );
}

Custom Dimensions & Optical Parameters

Smaller searchbox with custom optical settings.

Open in

"use client";
 
import { useState } from "react";
 
import { LiquidGlassSearchbox } from "@/components/jyotirmoydas/liquid-glass-searchbox";
 
export function LiquidGlassSearchboxCustomDemo() {
  const [query, setQuery] = useState("");
 
  return (
    <LiquidGlassSearchbox
      value={query}
      onChange={setQuery}
      onClear={() => setQuery("")}
      placeholder="Find components..."
      width={350}
      height={48}
      blur={0.5}
      specularOpacity={0.3}
      refractionLevel={0.9}
    />
  );
}