About
IOS/MacOS toggle style (no liquid glass, if anyone could get that working that'd be great, ur free to do it)
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Apple 26 Toggle to your project and fits it to your theme.
Code
How Apple 26 Toggle is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client"
import { useState } from "react"
import { Toggle, Filter } from "@/components/ui/toggle"
export default function ToggleDemo() {
const [notifications, setNotifications] = useState(true)
const [darkMode, setDarkMode] = useState(false)
const [sound, setSound] = useState(true)
return (
<div className="mx-auto flex min-h-screen max-w-md flex-col items-center justify-center gap-8 p-8">
<Filter />
<div className="space-y-2 text-center">
<h1 className="text-2xl font-bold">IOS style Toggle Switch</h1>
</div>
<div className="w-full space-y-6 rounded-xl border p-6">
<div className="flex items-center gap-4">
<div className="flex flex-1 flex-col gap-1">
<p className="font-medium">Notifications</p>
<p className="text-sm text-muted-foreground">
Receive push notifications
</p>
</div>
<Toggle
checked={notifications}
onCheckedChange={setNotifications}
/>
</div>
<div className="flex items-center gap-4">
<div className="flex flex-1 flex-col gap-1">
<p className="font-medium">Dark Mode</p>
<p className="text-sm text-muted-foreground">
Use dark theme
</p>
</div>
<Toggle
checked={darkMode}
onCheckedChange={setDarkMode}
/>
</div>
<div className="flex items-center gap-4">
<div className="flex flex-1 flex-col gap-1">
<p className="font-medium">Sound</p>
<p className="text-sm text-muted-foreground">
Play sounds for alerts
</p>
</div>
<Toggle
checked={sound}
onCheckedChange={setSound}
/>
</div>
<div className="flex items-center gap-4 opacity-60">
<div className="flex flex-1 flex-col gap-1">
<p className="font-medium">Sync</p>
<p className="text-sm text-muted-foreground">
Disabled toggle
</p>
</div>
<Toggle checked={false} disabled />
</div>
</div>
</div>
)
}