Search Bar React component
An accessible animated search field with a live suggestions menu, keyboard navigation, a clear button, a loading spinner and a Cmd/Ctrl+K shortcut.
About the Search Bar component
Search Bar is an accessible animated search field with a live suggestions menu, a clear button, a loading spinner and a Cmd/Ctrl+K shortcut that focuses it from anywhere on the page. Arrow keys move through the suggestions, Enter searches and Escape closes the menu.
It follows the ARIA combobox pattern, shows up to maxSuggestions matches from the list you pass, and comes in dark and light themes with width, radius, size and accent color as props.
When to use it
Use Search Bar at the top of docs, dashboards, stores and blogs where people search for known items. For a searchable menu of commands and pages, use Command Palette.
Installation
Add the Search Bar component to your project with the shadcn CLI. It lands in components/search-bar.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/search-barOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<SearchBar /> accepts 17 props, all optional.
| Prop | Type | Default |
|---|---|---|
| value | string | — |
| defaultValue | string | "" |
| onValueChange | (value: string) => void | — |
| onSearch | (value: string) => void | — |
| placeholder | string | "Search components..." |
| suggestions | string[] | [] |
| maxSuggestions | number | 6 |
| shortcut | string | "⌘K" |
| enableShortcut | boolean | true |
| loading | boolean | false |
| disabled | boolean | false |
| theme | "dark" | "light" | "dark" |
- valuestring
- defaultValuestringDefault: ""
- onValueChange(value: string) => void
- onSearch(value: string) => void
- placeholderstringDefault: "Search components..."
- suggestionsstring[]Default: []
- maxSuggestionsnumberDefault: 6
- shortcutstringDefault: "⌘K"
- enableShortcutbooleanDefault: true
- loadingbooleanDefault: false
- disabledbooleanDefault: false
- theme"dark" | "light"Default: "dark"
Show all 17 propsShow fewer
| size | number | 15 |
| radius | number | 14 |
| width | number | 360 |
| accentColor | string | "#F2A841" |
| className | string | — |
- sizenumberDefault: 15
- radiusnumberDefault: 14
- widthnumberDefault: 360
- accentColorstringDefault: "#F2A841"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Search Bar FAQ
- How do I connect it to my search?
- Handle onSearch, which fires with the query when someone presses Enter or picks a suggestion; use onValueChange to update suggestions as they type.
- Can I turn off the Cmd+K shortcut?
- Yes, set enableShortcut={false}. The shortcut label shown in the field is set with shortcut.
- How do I show a spinner while results load?
- Set loading while your request runs.
- Where do the suggestions come from?
- From the suggestions array you pass; the bar shows the ones matching what was typed, up to maxSuggestions (6 by default).
