Search Bar

Search bar component with keyboard shortcuts (Ctrl+K) and modal support

$ npx @hritik-sharmaa/repeat-ui add commons-search-bar

Live preview

Customize

Placeholder

Modal

Hotkey

Width300px

Radius12px

Accent

import CommonsSearchBar from "@/components/repeat-ui/commons-search-bar/preview";

<CommonsSearchBar placeholder="Search..." hotkey="k" />

Installation

Run the command
Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.
$ npx @hritik-sharmaa/repeat-ui add commons-search-bar --variant ts-tailwind

The files are in components/repeat-ui/commons-search-bar/.

import CommonsSearchBar from "@/components/repeat-ui/commons-search-bar/preview";

export default function Page() {
  return <CommonsSearchBar />;
}

Prop	Type	Default	Description
`placeholder`	`string`	"Search..."	Placeholder text.
`enableModal`	`boolean`	true	Open a search dialog instead of searching inline.
`enableHotkey`	`boolean`	true	Toggle the dialog with Ctrl/⌘ + hotkey, and show the shortcut.
`hotkey`	`string`	"k"	The letter used with Ctrl/⌘.
`width`	`number`	300	Width of the field in pixels.
`radius`	`number`	12	Corner radius in pixels.
`accentColor`	`string`	"#f97316"	Focus outline colour.
`onSearch`	`(query: string) => void`	-	Called on Enter in the dialog, or on every keystroke inline.
`className`	`string`	""	Extra classes for the root element.