React Shadcn MultiSelect

A customizable multi-select component for React, built with shadcn/ui styling principles.

Features

• 🎨 Multiple style variants
• 🔍 Searchable options
• ✨ Optional animations
• 🖼️ Support for icons
• ✅ Select All functionality
• 🗑️ Clear selection
• 📱 Mobile-friendly design
• 🌗 Light and dark mode compatible

Installation

npm install react-shadcn-multiselect
# or
yarn add react-shadcn-multiselect
# or
pnpm add react-shadcn-multiselect

Peer Dependencies

This component requires React 17 or later.

npm install react react-dom

Usage

Basic Example

import { MultiSelect } from "react-shadcn-multiselect";

const options = [
  { value: "option1", label: "Option 1" },
  { value: "option2", label: "Option 2" },
  { value: "option3", label: "Option 3" },
];

function MyComponent() {
  const [selectedValues, setSelectedValues] = useState<string[]>([]);

  return (
    <MultiSelect
      options={options}
      onValueChange={setSelectedValues}
      placeholder="Select options"
    />
  );
}

With Icons

import { MultiSelect } from "react-shadcn-multiselect";
import { Star, Heart, ThumbsUp } from "lucide-react";

const optionsWithIcons = [
  { value: "star", label: "Star", icon: Star },
  { value: "heart", label: "Heart", icon: Heart },
  { value: "thumbsup", label: "Thumbs Up", icon: ThumbsUp },
];

function IconExample() {
  const [selectedValues, setSelectedValues] = useState<string[]>([]);

  return (
    <MultiSelect
      options={optionsWithIcons}
      onValueChange={setSelectedValues}
      placeholder="Select with icons"
    />
  );
}

With Animation

import { MultiSelect } from "react-shadcn-multiselect";

function AnimatedExample() {
  const [selectedValues, setSelectedValues] = useState<string[]>([]);

  return (
    <MultiSelect
      options={options}
      onValueChange={setSelectedValues}
      animation={2} // Animation duration in seconds
      placeholder="Animated selection"
    />
  );
}

With Different Variants

import { MultiSelect } from "react-shadcn-multiselect";

function VariantsExample() {
  return (
    <div className="space-y-4">
      <MultiSelect
        options={options}
        onValueChange={(values) => console.log(values)}
        variant="default"
        placeholder="Default variant"
      />

      <MultiSelect
        options={options}
        onValueChange={(values) => console.log(values)}
        variant="secondary"
        placeholder="Secondary variant"
      />

      <MultiSelect
        options={options}
        onValueChange={(values) => console.log(values)}
        variant="destructive"
        placeholder="Destructive variant"
      />
    </div>
  );
}

Props

Name	Type	Default	Description
options	{ label: string; value: string; icon?: ComponentType<{ className?: string }> }[]	Required	Array of options to display in the multi-select.
onValueChange	(value: string[]) => void	Required	Callback function called when selection changes.
defaultValue	string[]	[]	Default selected values.
placeholder	string	"Select options"	Placeholder text when no options are selected.
animation	number	0	Animation duration in seconds (0 for no animation).
maxCount	number	3	Maximum number of selected items to display before showing a count.
modalPopover	boolean	false	Whether the popover should be modal.
asChild	boolean	false	Whether to render as a child component.
variant	"default" | "secondary" | "destructive" | "inverted"	"default"	Visual style variant.
className	string	undefined	Additional CSS classes.

Styling

This component uses Tailwind CSS for styling. To customize the appearance, you can:

1. Use the variant prop to choose from predefined styles
2. Pass additional classes via the className prop
3. Use CSS variables in your Tailwind config to change the default colors

License

MIT

react-shadcn-multiselect