←
Tactile Neumorphic Pill Toggle

Tactile Neumorphic Pill Toggle

Debossed Neumorphic

Ultra-tactile debossed neumorphic pill switch with a 5-layer inset shadow groove, brushed metallic sliding thumb with specular bevels, and etched status glyphs.

Interactive Playground & Studio

Live Controls
tactile-neumorphic-toggle.tsx
Tactile Toggle
Hover or click to interact
Customizer
PRESETS & VARIATIONS

All Variants & Themes

Click to test interactive spring physics on every theme

Brushed Silvertheme="brushed-silver"

Photorealistic debossed silver track with a brushed metallic slider knob.

Dark Obsidiantheme="dark-obsidian"

Midnight dark clay chassis with deep carved shadow trench and illuminated LED.

Cyber Cyantheme="cyber-cyan"

High-voltage laser cyan glowing groove with specular bevel highlights.

Emerald Matrixtheme="emerald-glow"

Vibrant emerald photon illumination channel with smooth spring sliding.

Magma Orangetheme="magma-orange"

Signature molten orange glow track with etched 0 / I state indicators.

Hyper Violettheme="hyper-violet"

Deep ultraviolet neon glow channel with multi-tier optical drop shadow.

Features & Physics

✓Pixel-accurate debossed neumorphic pill geometry
✓5-layer optical inset shadow track geometry
✓Brushed metallic gradient knob with bevel highlight
✓Smooth physics-based spring slide animation

Code & Integration

Customized live with your active playground prop settings:

import { TactileNeumorphicToggle } from "@/components/TactileNeumorphicToggle";

export default function Example() {
  return (
    <TactileNeumorphicToggle
      theme=""
      size="md"
      label=""
      defaultChecked={true}
      onChange={(checked) => console.log("Toggle state:", checked)}
    />
  );
}

Peer Dependencies

Requires Framer Motion and Tailwind CSS for spring physics and layout tokens:

npm install framer-motion clsx lucide-react tailwind-merge

API & Props Reference

PropTypeDefaultDescription
checkedbooleanfalseControlled boolean checked state.
theme"brushed-silver" | "dark-obsidian" | "cyber-cyan" | "emerald-glow" | "magma-orange" | "hyper-violet""brushed-silver"Color theme palette.
size"sm" | "md" | "lg" | "xl""md"Button dimensions scale.
showIconsbooleantrueWhether to show etched 0 / I glyphs.