Components
Loading preview...
Here is advanced multi selector component
@ui-layouts
npx shadcn@latest add https://21st.dev/r/uilayout.contact/multi-selector'use client';
import React, { useState } from 'react';
import MultiSelect from '@/components/ui/multi-selector';
import {
Turtle,
Cat,
Dog,
Rabbit,
Fish,
} from 'lucide-react';
const frameworksList = [
{ value: 'react', label: 'React', icon: Turtle, disable: true },
{ value: 'nextjs', label: 'Nextjs', icon: Cat },
{ value: 'vue', label: 'Vue', icon: Dog },
{ value: 'svelte', label: 'Svelte', icon: Rabbit },
{ value: 'ember', label: 'Ember', icon: Fish },
];
const MultiSelectDemo = () => {
const [selectedFrameworks, setSelectedFrameworks] = useState<string[]>(['nextjs']);
return (
<div className='flex flex-col items-center justify-center p-8 min-h-screen bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-gray-50'>
<div className='w-full max-w-md bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl space-y-4'>
<h2 className='text-2xl font-semibold text-center mb-4'>Select Your Favorite Frameworks</h2>
<MultiSelect
options={frameworksList}
onValueChange={setSelectedFrameworks}
defaultValue={['nextjs']}
placeholder='Select Frameworks'
className="h-auto min-h-12 border-blue-500 focus-within:ring-2 focus-within:ring-blue-200"
/>
<p className='text-sm text-gray-700 dark:text-gray-300 text-center'>
Note: "React" is disabled and cannot be selected.
</p>
</div>
</div>
);
};
export { MultiSelectDemo as DemoOne };