ReUIReUI
2.7kX

Shadcn Autocomplete

Custom Shadcn Autocomplete for React and Tailwind CSS. An input that suggests options as you type.

Radix UIBase UI
Radix UI
API Reference 
import {
  Autocomplete,
  AutocompleteContent,

Installation

pnpm dlx shadcn@latest add @reui/autocomplete

Usage

import {
  Autocomplete,
  AutocompleteContent,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteItem,
  AutocompleteList,
} from "@/components/reui/autocomplete"
const items = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "orange", label: "Orange" },
  { value: "grape", label: "Grape" },
]
 
<Autocomplete items={items}>
  <AutocompleteInput placeholder="Search..." />
  <AutocompleteContent>
    <AutocompleteEmpty>No results found.</AutocompleteEmpty>
    <AutocompleteList>
      {(item) => <AutocompleteItem key={item.value} value={item}>{item.label}</AutocompleteItem>}
    </AutocompleteList>
  </AutocompleteContent>
</Autocomplete>

Examples

Disabled

import {
  Autocomplete,
  AutocompleteContent,

Auto Highlight

import {
  Autocomplete,
  AutocompleteContent,

With Label

import {
  Autocomplete,
  AutocompleteContent,

With Clear Button

"use client"

import { useState } from "react"

With Trigger Button

"use client"

import { useState } from "react"

With Trigger and Clear Buttons

"use client"

import { useState } from "react"

With Groups

"use client"

import { useMemo, useState } from "react"

Async Search

"use client"

import { ReactNode, useEffect, useState } from "react"

Size

import {
  Autocomplete,
  AutocompleteContent,

Form

import {
  Autocomplete,
  AutocompleteContent,

More Shadcn Autocomplete components

Browse 12 production-ready Shadcn Autocomplete components for dashboards, forms, and product UI. These examples follow the Radix UI implementation with accessible primitives from the Radix stack and stay fully compatible with Shadcn Create so radius, color, and typography match your configured theme.

Browse all 12 Shadcn Autocomplete components for copy-ready layouts, dashboards, and forms built with Tailwind CSS in the ReUI library.