Tailwind Switch

Forms

About

An accessible toggle switch built on React Aria Components and styled with Tailwind CSS, for on/off settings like enabling Wi-Fi or notifications.

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

Code

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

Usage.tsx

"use client";
import Switch from "@/components/ui/tailwind-switch";

export default function SwitchDemo() {
  return (
    <div className="flex items-center justify-center w-full h-full p-10">
      <Switch defaultSelected>
        <span className="text-neutral-800 dark:text-neutral-200 text-sm">
          Wi-Fi
        </span>
      </Switch>
    </div>
  );
}