Tailwind CSS React Switch

Use our Tailwind CSS React Switch component to let users adjust settings on/off. The option that the Switch controls, as well as the state it's in, should be made clear from the corresponding inline label.

See below our example that will help you create simple and easy-to-use Switch component for your Tailwind CSS and React project.

Switch Colors

The Switch component comes with 19 different colors that you can change it using the color prop.

import { Switch } from "components/Switch";
 
export default function Colors() {
  return (
      <Switch id="switch-component" defaultChecked />
      <Switch id="blue" color="blue" defaultChecked />
      <Switch id="red" color="red" defaultChecked />
      <Switch id="green" color="green" defaultChecked />
      <Switch id="amber" color="amber" defaultChecked />
      <Switch id="teal" color="teal" defaultChecked />
      <Switch id="indigo" color="indigo" defaultChecked />
      <Switch id="purple" color="purple" defaultChecked />
      <Switch id="pink" color="pink" defaultChecked />
  );
}

Tailwind CSS React Switch - Horizon UI

Switch Colors