Select

A fluid select dropdown with proximity hover, animated checkmark, grouped options, and spring transitions. Built with Framer Motion and portal rendering.

Fluid Functionalismbymicka_design

"use client";

import { useState } from "react";
import { Select, SelectTrigger, SelectContent, SelectItem, SelectSeparator } from "../components/ui/select";

export default function SelectBorderlessDemo() {
  const [value, setValue] = useState("react");

  return (
    <div className="flex items-center justify-center min-h-screen bg-background">
      <Select value={value} onValueChange={setValue}>
        <SelectTrigger variant="borderless" placeholder="Select framework…" />
        <SelectContent>
          <SelectItem index={0} value="react">React</SelectItem>
          <SelectItem index={1} value="vue">Vue</SelectItem>
          <SelectItem index={2} value="svelte">Svelte</SelectItem>
          <SelectSeparator />
          <SelectItem index={3} value="solid">Solid</SelectItem>
          <SelectItem index={4} value="qwik">Qwik</SelectItem>
        </SelectContent>
      </Select>
    </div>
  );
}