# Material Design 3 Switch

> The definitive Google Material Design 3 (M3) Switch component for React & Tailwind CSS. This implementation captures the exact tactile feel of Android toggles using Spring Physics (overshoot animation) and Morphing Handle logic. It goes beyond visual replication by including a built-in Synthetic Audio Engine (Web Audio API) for real-time haptic feedback (mechanical thud or plastic click). Key Features: True M3 Physics: Custom cubic-bezier spring curves for the signature "overshoot" effect. Haptic Audio: Zero-dependency sound generation (no mp3 assets required). Smart Morphing: Handle changes size and shape based on state (Unchecked, Checked, Pressed). Advanced Customization: Support for Custom Icons (React Nodes), Destructive variants, and Compact sizes. Accessibility: Enforced 48px touch targets meeting WCAG AAA standards. A "Holy Grail" component for developers who want the premium feel of native mobile toggles without installing heavy UI libraries.

- Author: [Hossain Jahed](https://21st.dev/@easemize)
- License: unknown
- npm dependencies: lucide-react, class-variance-authority
- Live preview: https://21st.dev/@easemize/components/material-design-3-switch

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/easemize/material-design-3-switch?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt