Fully customisable component built with React, Tailwind CSS, and Motion.
This component allows users to select multiple options from a searchable dropdown list, making it perfect for tasks like filtering or tagging. For example, it can be used on an e-commerce website to let users search for and select categories like "Shoes," "Accessories," and "Clothing" to narrow down their search results.
The component is React-based and designed with shadcn/ui. It is powered by the headless command menu package ‘cmdk’ by Paco Coursey, which uses Radix UI components under the hood. This ensures out-of-the-box accessibility, including aria and role attributes, focus management, and keyboard navigation. It is fully customizable with Tailwind CSS, making it easy to adapt the styling to fit different project requirements.
-
Multiselect Support Enables users to choose multiple options from the dropdown, making it ideal for tagging, filtering, and categorising items.
-
Debounced Search Improves performance by adding a brief delay between keystrokes, reducing unnecessary re-renders and API calls during typing.
-
Keyboard Navigation Navigate through options using arrow keys and delete selected items with the Backspace key.
-
Customisable Styling Customise the design to match your project's aesthetic using Tailwind CSS.
-
Smooth Animations Uses subtle animations powered by Motion (formerly Framer Motion) to enhance the user experience. The component respects accessibility preferences by disabling animations when users have enabled the "prefers-reduced-motion" setting.
Your contributions to improving this component would be greatly appreciated. Feel free to open an issue or submit a PR