Components
FluidBlobSelect
The Fluid Blob Select is a highly interactive and visually captivating selection component built with shadcn UI. Options appear as organic, rounded blobs that dynamically merge and separate in the dropdown area, creating a playful and engaging interface. Hovering over a blob causes it to pull forward with smooth scaling and shadow effects, while the selected option is clearly highlighted for user clarity. Fully configurable in terms of size, spacing, colors, and animation speed, this component is ideal for creative dashboards, design-focused apps, or any interface where a unique, visually rich selection experience is desired. By combining accessibility via a hidden shadcn Select with animated blob elements, it delivers a reusable, responsive, and highly interactive UI element.
Loading preview...
"use client";
import * as React from "react";
import { FluidBlobSelect, BlobOption } from "@/components/ui/fluid-blob-select";
const blobOptions: BlobOption[] = [
{ value: "red", label: "Red", color: "#ef4444" },
{ value: "orange", label: "Orange", color: "#f97316" },
{ value: "yellow", label: "Yellow", color: "#facc15" },
{ value: "green", label: "Green", color: "#22c55e" },
{ value: "blue", label: "Blue", color: "#3b82f6" },
{ value: "indigo", label: "Indigo", color: "#6366f1" },
];
export default function DemoFluidBlobSelect (){
const [selected, setSelected] = React.useState<string>("");
return (
<div className="p-8 flex flex-col gap-8 items-center">
<h1 className="text-xl font-semibold">Fluid Blob Select Demo</h1>
<FluidBlobSelect
options={blobOptions}
blobSize={80}
spacing={16}
placeholder="Pick a color"
onChange={setSelected}
/>
</div>
);
};