A fully customisable multiselect component with debounced search

It's built with React, Tailwind, and Motion. It's 100% open-source; I have linked the repo below.

Interactive demo

Check out the live demo here.

Why I built it

While working on an app, I realized I needed a multi-select search component. Popular UI libraries like Radix UI, Chakra UI, and Daisy UI did not offer a ready-made solution. shadcn/ui had a Command component that came with a built-in input field and selectable list options. This made it an ideal starting point for customization.

Building this component was also a great opportunity to improve my React skills and explore creating UI components with Tailwind CSS and Motion (formerly Framer Motion). I decided to open-source this component so others could improve it further, while also using it in their own projects.

Core functionality

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.

Component details

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.

Key features

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.

Open Source

I would love your help on improving this component. Feel free to open an issue or submit a PR on Github. Source code available here.