184 Components
AI Command Bar
NavigationSlash-command aware AI input bar inspired by Linear and Raycast. Type / to reveal a spring-animated suggestions panel with keyboard navigation, staggered item entrance, and a shimmer idle border.
Type / to trigger command dropdown, or type any prompt and press Enter
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/ai-command-bar.json"
Props
TypeScript props supported by <AICommandBar />.
| Prop | Type | Default | Description |
|---|---|---|---|
| commands | AICommand[] | — | Array of slash commands with trigger, label, description. |
| onSelect | (command: AICommand) => void | — | Called when a command is selected. |
| placeholder | string | "Type / for AI commands…" | Input placeholder text. |
Key Features
- Type / to trigger animated suggestions panel with spring AnimatePresence.
- Staggered item entrance animation per suggestion row.
- Full keyboard navigation: Arrow keys to move, Enter to select, Escape to dismiss.
- layoutId spring highlight slides smoothly between hovered items.
- Rotating conic-gradient shimmer on border in idle state.
- Fully configurable commands array.
Keyboard & Accessibility
- role='combobox' on input with aria-expanded and aria-autocomplete.
- role='listbox' + role='option' on suggestions panel.
- Keyboard-only navigation support.