Liquid Select

Forms 16

About

A glassy listbox dropdown with typeahead search, keyboard navigation and a frosted glass popover, built on Base UI's Select primitive.

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

Code

How Liquid Select is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}