Recipe

Dark Mode Toggle

A clean animated toggle that respects system preference and persists choice.

States

Light

Dark

Disabled

Usage

<div className="relative h-6 w-12 rounded-full
  bg-[#8B5CF6] p-0.5 cursor-pointer">
  <div className="absolute right-0.5 top-0.5
    h-5 w-5 rounded-full bg-white
    shadow-lg shadow-[#8B5CF6]/30
    transition-all duration-200" />
</div>