How do I build an accessible search bar in React?

Use a label or aria-label on the input (if the search icon is the only visible label). Use Combobox from @ninna-ui/forms for keyboard-navigable results — it handles arrow keys, typeahead, and ARIA (role='listbox', aria-expanded) automatically.

How do I build a command palette in React?

Use a Modal from @ninna-ui/overlays with a search Input and a keyboard-navigable list. The Modal handles focus trapping. Listen for Cmd+K to open the modal. Render filtered results as the user types.

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

Input Combobox Modal