fetaUI
GitHub

Search

A search field and a command palette for finding anything and running commands.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/search
Playground
Recent
Open settingsPreferences and billing⌘ ,
People
Actions
New file⌘ N
Invite people
Export workspace
↑↓ Move↵ Runesc Clear
5 results
Field
⌘ K
⌘ K
Empty
No results. Try another word.
↑↓ Move↵ Runesc Clear
0 results
Nested
Actions
Move to…
Change theme
↑↓ Move↵ Runesc Clear
2 results
Motion
⌘ K
Results
3 results in 0.72 s
  • Customer onboarding playbookDoc in Customer success / Playbooks

    Every new enterprise account gets a named lead for the first 30 days. The onboarding call covers SSO and the first import.

    Hannah Walsh
  • Onboarding flow v3.figDesign file, 18.2 MB, Design

    Frames: Welcome, Invite your team, Connect chat. The onboarding checklist moves into the sidebar.

    Emma Collins
  • Q3 onboarding metrics.xlsxSpreadsheet, 452 KB, Growth

    Activation by cohort, time to first project and onboarding drop off by step.

    Chien Nguyen
Icons animation
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/search

Accessibility

  • The palette input is a combobox controlling a listbox.
  • The number of results is announced.

Motion

  • The active row glides between items.
  • A running row spins in its tile, then turns success.
  • Nested pages slide in from 12 px, and Backspace reverses them.
  • Motion Search widens from 320 to 448 on a spring, and its card drops from y -4 and scale .98.
  • With reduced motion, the row jumps and results swap.

Responsive behavior

  • Shortcuts and key hints hide on Mobile.
  • The results page has a 196 px filter column on Web, and chips above the list on Mobile.

Performance

  • Filtering and sorting are memoized.
  • Run and hold timers are cleared on unmount, and a running item cannot start twice.
  • No virtualization: results render in full, so page them on the server.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import SearchField, CommandPalette, MotionSearch and SearchResults from @/components/fetaui/search.
  • In CommandPalette, give each item a run. Without it the demo timer runs, spinner included. An item with page opens a nested list.
  • ⌘ K focuses the newest visible SearchField or MotionSearch that has shortcut on, so several on a page do not fight. Pass shortcut={false} to opt one out.
  • SearchResults filters only the results you pass. Give each result an href, or pass onOpen, or its title stays a placeholder link.
/docs/components/search/markdown
PreviousDetent Dial
NextSignature Pad

Related

InputComponentThe single line text control: a pill on the tray fill that lifts onto the surface when focused.ComboboxComponentAn input that filters a list as you type, for one value or many.CommandComponentA keyboard first menu for every action in the product, with fuzzy search, submenus and inline confirmation.Input SearchProComponentA composer that says which tool will answer, and shows the sources it read, live and afterwards.