ReUIReUI
2.7kX

Shadcn Autocomplete

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

Radix UIBase 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 use Base UI primitives from @base-ui/react 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.