Components
Loading preview...
Selector Chips are used to display a list of items that can be selected.
npx shadcn@latest add https://21st.dev/r/preetsuthar17/selector-chipsimport { SelectorChips } from "@/components/ui/selector-chips"
import { useState } from "react";
const Demo = () => {
const [selectedItems, setSelectedItems] = useState<string[]>([]);
const handleSubmit = () => {
alert(`Selected: ${selectedItems.join(", ")}`);
};
return (
<div className="min-h-screen flex flex-col items-center justify-center p-4">
<h1 className="text-2xl font-bold mb-4">Select Your Interests</h1>
<SelectorChips
options={[
"React",
"Vue",
"Angular",
"Svelte",
"Next.js",
"Remix",
"Astro",
"Nuxt.js",
]}
onChange={(selected) => setSelectedItems(selected)}
/>
<button
onClick={handleSubmit}
className="cursor-pointer font-medium px-4 py-[0.4rem] bg-gradient-to-b from-blue-500 via-blue-600 to-blue-800 overflow-hidden relative rounded-full before:absolute before:w-[0.4rem] before:h-[20rem] before:top-0 before:translate-x-[-8rem] hover:before:translate-x-[7rem] before:duration-[0.8s] before:-skew-x-[10deg] before:transition-all before:bg-white before:blur-[8px] hover:brightness-100 flex items-center justify-center gap-2 transition-all brightness-90 group text-white text-sm mt-10"
>
Submit
</button>
</div>
);
};
export {Demo}