Styled Toggle Switches

Component 14

About

A set of decorative animated toggle switches (iOS pill, square, sun/moon icon, glow, and labeled ON/OFF) for settings and preference screens, built with framer-motion and reduced-motion support.

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

Code

How Styled Toggle Switches is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  IOSToggle,
  SquareToggle,
  IconToggle,
  GlowToggle,
  LabeledToggle,
} from "@/components/ui/toggles-styled";

export default function ToggleStyledDemo() {
  return (
    <div className="flex flex-wrap items-center gap-8 p-10">
      <IOSToggle defaultChecked />
      <SquareToggle defaultChecked />
      <IconToggle defaultChecked />
      <GlowToggle defaultChecked />
      <LabeledToggle defaultChecked />
    </div>
  );
}