Switch Color Options

A group of labeled toggle switches, each tinted a semantic color (success, info, warning, danger) to signal its meaning in a settings or preferences form.

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

import SwitchColorOptions from "@/components/ui/switch-color-options";

export default function SwitchColorOptionsDemo() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <SwitchColorOptions />
    </div>
  );
}