Components / Combobox
Combobox

Autocomplete input and command palette with a list of suggestions.
Next.js
SvelteKit
Astro
Nuxt.js
Remix
<div class="w-full max-w-[300px] flex flex-col gap-4">
  <!-- Combobox Composition -->
  <Popover>
    <PopoverTrigger class="w-full group">
      <Button 
        variant="outline" 
        role="combobox" 
        class="w-full justify-between font-normal text-slate-600 hover:text-slate-900 data-[state=open]:text-slate-900 rounded-2xl h-14 px-5 bg-white border border-slate-200 hover:border-slate-300 transition-all shadow-sm hover:shadow-md group-data-[state=open]:border-slate-900 group-data-[state=open]:ring-4 group-data-[state=open]:ring-slate-100/50"
        data-combobox-trigger
      >
        <span data-label class="truncate text-base">Select framework...</span>
        <svg class="ml-2 h-5 w-5 shrink-0 text-slate-400 transition-transform duration-300 group-data-[state=open]:rotate-180 group-data-[state=open]:text-slate-900" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4 4 4-4" /></svg>
      </Button>
    </PopoverTrigger>
    
    <PopoverContent class="w-[300px] p-0 overflow-hidden rounded-3xl border border-slate-100 shadow-2xl shadow-slate-200/50" align="start">
      <Command class="border-0 shadow-none rounded-none bg-white">
        <CommandInput placeholder="Search framework..." class="h-14 border-b border-slate-50 text-base placeholder:font-serif placeholder:italic" />
        <CommandList class="p-2">
          <CommandEmpty class="py-6 text-center text-sm text-slate-400 font-serif italic">No framework found.</CommandEmpty>
          <CommandGroup>
            <CommandItem value="next.js" class="group cursor-pointer rounded-xl py-3 px-4 aria-selected:bg-slate-900 aria-selected:text-white transition-colors">
              <svg class="mr-3 h-4 w-4 opacity-0 group-data-[selected=true]:opacity-100 transition-opacity text-slate-900 group-aria-selected:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
              <span class="text-base font-medium">Next.js</span>
            </CommandItem>
            <CommandItem value="sveltekit" class="group cursor-pointer rounded-xl py-3 px-4 aria-selected:bg-slate-900 aria-selected:text-white transition-colors">
              <svg class="mr-3 h-4 w-4 opacity-0 group-data-[selected=true]:opacity-100 transition-opacity text-slate-900 group-aria-selected:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
              <span class="text-base font-medium">SvelteKit</span>
            </CommandItem>
            <CommandItem value="astro" class="group cursor-pointer rounded-xl py-3 px-4 aria-selected:bg-slate-900 aria-selected:text-white transition-colors">
              <svg class="mr-3 h-4 w-4 opacity-0 group-data-[selected=true]:opacity-100 transition-opacity text-slate-900 group-aria-selected:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
              <span class="text-base font-medium">Astro</span>
            </CommandItem>
            <CommandItem value="nuxt" class="group cursor-pointer rounded-xl py-3 px-4 aria-selected:bg-slate-900 aria-selected:text-white transition-colors">
              <svg class="mr-3 h-4 w-4 opacity-0 group-data-[selected=true]:opacity-100 transition-opacity text-slate-900 group-aria-selected:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
              <span class="text-base font-medium">Nuxt.js</span>
            </CommandItem>
            <CommandItem value="remix" class="group cursor-pointer rounded-xl py-3 px-4 aria-selected:bg-slate-900 aria-selected:text-white transition-colors">
              <svg class="mr-3 h-4 w-4 opacity-0 group-data-[selected=true]:opacity-100 transition-opacity text-slate-900 group-aria-selected:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
              <span class="text-base font-medium">Remix</span>
            </CommandItem>
          </CommandGroup>
        </CommandList>
      </Command>
    </PopoverContent>
  </Popover>
</div>