diff --git a/packages/cli/src/components/SearchBox.tsx b/packages/cli/src/components/SearchBox.tsx
index 4d1e9ff..6913bfb 100644
--- a/packages/cli/src/components/SearchBox.tsx
+++ b/packages/cli/src/components/SearchBox.tsx
@@ -10,11 +10,13 @@ export function SearchBox({
   helper,
   initialQuery,
   onKeyDown,
+  onChange,
 }: {
-  components: string[]
+  components: {key: string; displayName: string}[]
   helper: string
   initialQuery?: string
   onKeyDown?: (i: string, k: Key, app: ReturnType<typeof useApp>) => void
+  onChange?: (key: string) => void
 }) {
   const [query, setQuery] = useState<string>(initialQuery ?? '')
   const [isLoading, setLoading] = useState<boolean>(false)
@@ -23,12 +25,22 @@ export function SearchBox({
 
   useEffect(() => {
     setLoading(true)
-    getSuggestion(components, query).then((result) => {
+    getSuggestion(
+      components.map(({key}) => key),
+      query,
+    ).then((result) => {
       setSuggestions(result)
       setLoading(false)
+      if (result.length >= selected) {
+        setSelected(result.length - 1)
+      }
     })
   }, [query])
 
+  useEffect(() => {
+    onChange?.(suggestions[selected])
+  }, [selected, onChange])
+
   const app = useApp()
 
   useInput((i, k) => {
@@ -58,7 +70,9 @@ export function SearchBox({
           {suggestions.map((name, index) => {
             return (
               <Box borderStyle={'round'} key={name}>
-                <Text backgroundColor={selected === index ? 'white' : undefined}>{name}</Text>
+                <Text backgroundColor={selected === index ? 'white' : undefined}>
+                  {components[components.findIndex(({key}) => key === name)].displayName}
+                </Text>
               </Box>
             )
           })}