diff --git a/packages/cli/src/commands/search.tsx b/packages/cli/src/commands/search.tsx
index b26e786..a120d26 100644
--- a/packages/cli/src/commands/search.tsx
+++ b/packages/cli/src/commands/search.tsx
@@ -1,17 +1,21 @@
-import {Command} from '@oclif/core'
+import {Command, Args} from '@oclif/core'
 import {render} from 'ink'
 import {SearchBox} from '../components/SearchBox.js'
 import {getAvailableComponentNames, getRegistry} from '../helpers/registry.js'
 import React from 'react'
 
 export default class Search extends Command {
+  static override args = {
+    query: Args.string({description: 'search query'}),
+  }
+
   static override description = 'Search components.'
 
   static override examples = ['<%= config.bin %> <%= command.id %>']
 
-  static override flags = {}
-
   public async run(): Promise<void> {
+    const {args} = await this.parse(Search)
+
     const registryResult = await getRegistry()
     if (!registryResult.ok) {
       this.error(registryResult.message)
@@ -19,6 +23,13 @@ export default class Search extends Command {
     const registry = registryResult.registry
     const componentNames = await getAvailableComponentNames(registry)
 
-    render(<SearchBox components={componentNames} helper={'Press Ctrl+C to quit'} />)
+    await render(
+      <SearchBox
+        components={componentNames}
+        initialQuery={args.query}
+        helper={'Press ESC to quit'}
+        onKeyDown={(_, k, app) => k.escape && app.exit()}
+      />,
+    ).waitUntilExit()
   }
 }
diff --git a/packages/cli/src/components/SearchBox.tsx b/packages/cli/src/components/SearchBox.tsx
index e40ee21..4d1e9ff 100644
--- a/packages/cli/src/components/SearchBox.tsx
+++ b/packages/cli/src/components/SearchBox.tsx
@@ -3,20 +3,23 @@ import {getSuggestion} from '../helpers/search.js'
 import Input from 'ink-text-input'
 import {Divider} from './Divider.js'
 import Spinner from 'ink-spinner'
-import {Box, Text} from 'ink'
+import {Box, Text, useInput, useApp, type Key} from 'ink'
 
 export function SearchBox({
   components,
   helper,
   initialQuery,
+  onKeyDown,
 }: {
   components: string[]
   helper: string
   initialQuery?: string
+  onKeyDown?: (i: string, k: Key, app: ReturnType<typeof useApp>) => void
 }) {
   const [query, setQuery] = useState<string>(initialQuery ?? '')
   const [isLoading, setLoading] = useState<boolean>(false)
   const [suggestions, setSuggestions] = useState<string[]>([])
+  const [selected, setSelected] = useState<number>(0)
 
   useEffect(() => {
     setLoading(true)
@@ -26,6 +29,18 @@ export function SearchBox({
     })
   }, [query])
 
+  const app = useApp()
+
+  useInput((i, k) => {
+    if (k.downArrow) {
+      setSelected((p) => (p >= suggestions.length - 1 ? 0 : p + 1))
+    }
+    if (k.upArrow) {
+      setSelected((p) => (p <= 0 ? suggestions.length - 1 : p - 1))
+    }
+    onKeyDown?.(i, k, app)
+  })
+
   return (
     <Box width={50} display={'flex'} flexDirection={'column'} columnGap={4}>
       <Text color={'gray'}>{helper}</Text>
@@ -40,10 +55,10 @@ export function SearchBox({
         <Spinner />
       ) : (
         <Box display={'flex'} flexDirection={'column'} columnGap={1}>
-          {suggestions.map((name) => {
+          {suggestions.map((name, index) => {
             return (
               <Box borderStyle={'round'} key={name}>
-                <Text>{name}</Text>
+                <Text backgroundColor={selected === index ? 'white' : undefined}>{name}</Text>
               </Box>
             )
           })}