Autocomplete (Base UI)

iconiq-ui/b-autocomplete

FreeComponent

Base UI autocomplete with list filtering, suggestion highlight motion, and the same Iconiq input shell as the combobox install.

Live preview

live · rendered by the registry

Rendered by Iconiq UI on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://www.iconiqui.com/r/b-autocomplete.json

Source

b-autocomplete.tsxwww.iconiqui.com/r/b-autocomplete.json · first 6 KB

1"use client";
2 
3import { Autocomplete as AutocompletePrimitive } from "@base-ui/react/autocomplete";
4import { Input as InputPrimitive } from "@base-ui/react/input";
5import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
6import { ChevronsUpDown, X } from "lucide-react";
7import { motion, useReducedMotion } from "motion/react";
8import * as React from "react";
9 
10import { cn } from "@/lib/utils";
11 
12const controlCornerClassName =
13  "rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[11px]";
14 
15const controlCornerInheritClassName =
16  "rounded-[inherit] supports-[corner-shape:squircle]:[corner-shape:inherit]";
17 
18const componentThemeClassName =
19// … truncated

What it pulls in

npm packages

@base-ui/react
motion
lucide-react

Files it writes

b-autocomplete.tsx

More from Iconiq UI

All 119 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Accordionaccordion	Iconiq UI	Components	Free	2 deps
AI Inputai-input	Iconiq UI	Components	Free	3 deps
Alertalert	Iconiq UI	Components	Free	2 deps
Avataravatar	Iconiq UI	Components	Free	3 deps
Accordion (Base UI)b-accordion	Iconiq UI	Components	Free	2 deps
Alert Dialog (Base UI)b-alert-dialog	Iconiq UI	Components	Free	3 deps
Avatar (Base UI)b-avatar	Iconiq UI	Components	Free	2 deps
Button (Base UI)b-button	Iconiq UI	Components	Free	4 deps