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