Skip to main content
ninna-ui
Use Case

Build a Search Interface with React and Tailwind CSS v4

Build an accessible search interface with search bar, results list, and keyboard navigation — using Ninna UI components and Tailwind v4.

Search interface patterns

A search interface typically needs: a search input with an icon, a results dropdown that filters as you type, keyboard navigation through results, and accessible ARIA (role='listbox', aria-expanded, aria-selected).

1. Search input with icon

Use Input from @ninna-ui/forms with the startIcon prop:

import { Input } from "@ninna-ui/forms";
import { Search } from "lucide-react";

<Input
  placeholder="Search components..."
  startIcon={<Search className="size-4" />}
  value={query}
  onChange={(e) => setQuery(e.target.value)}
/>

2. Results with Combobox

For a full combobox experience with keyboard navigation, use the Combobox from @ninna-ui/forms. It handles arrow-key navigation, typeahead, and ARIA automatically:

import { Combobox } from "@ninna-ui/forms";

<Combobox>
  <Combobox.Trigger>
    <Input placeholder="Search..." startIcon={<Search className="size-4" />} />
  </Combobox.Trigger>
  <Combobox.Content>
    {results.map((item) => (
      <Combobox.Item key={item.id} value={item.id}>
        {item.label}
      </Combobox.Item>
    ))}
  </Combobox.Content>
</Combobox>

3. Command palette pattern

For a command palette (Cmd+K), use a Modal with a search input and keyboard-navigable list. The Modal handles focus trapping, and you handle the keyboard navigation with arrow keys and Enter.

Component Docs

InputComboboxModal

FAQ