Selector Chips

Forms 108

About

Selector Chips are used to display a list of items that can be selected.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Selector Chips to your project and fits it to your theme.

Code

How Selector Chips is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { 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}