A glassy listbox dropdown with typeahead search, keyboard navigation and a frosted glass popover, built on Base UI's Select primitive.
import LiquidSelect from "@/components/ui/liquid-select";
import { LiquefyProvider } from "@/components/ui/liquid-select-utils/provider";
export default function LiquidSelectDemo() {
return (
<LiquefyProvider
theme="dark"
className="flex min-h-screen w-full items-center justify-center bg-[#0b0f1a] p-10"
>
<LiquidSelect
label="Country"
hint="Choose where you are based."
placeholder="Select a country"
defaultValue="us"
options={[
{ label: "United States", value: "us" },
{ label: "United Kingdom", value: "uk" },
{ label: "Germany", value: "de" },
{ label: "Japan", value: "jp" },
{ label: "Brazil", value: "br" },
{ label: "Australia", value: "au", disabled: true },
]}
/>
</LiquefyProvider>
);
}