Now I'll create a search input component with Ctrl+K functionality and click-outside behavior using the shadcn input-group component. I'll create both the component and a demo page.
Perfect! I've created a search input component with all the functionality you requested:
Key Features:
Ctrl+K (or Cmd+K on Mac) to focus the search input from anywhereThe component uses the shadcn Input component wrapped in a custom input-group-like container with icons. The demo page shows how to use it with helpful instructions and feature highlights!
Great! I can see you have the input-group.tsx component available. Let me read it and your current search input to understand the structure:
Now I'll update the search-input component to use the shadcn InputGroup component instead of the custom div-based implementation:
Done! I've refactored the search input to use the shadcn InputGroup component with all its sub-components. The functionality remains the same: Ctrl+K focuses the input, clicking outside blurs it, and the clear button works as before. The component now properly leverages the InputGroup structure with InputGroupAddon for icons, InputGroupInput for the input field, and InputGroupButton for the clear button.