Glass ToggleOn/off toggles with glass housing and liquid-feel spring animation.

Add to your project

One command adds this component to your project.

Install with AI Canvas MCP

With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.

About Glass Toggle

Glass Toggle is an on/off switch housed in a frosted glass track, with a thumb that glides on a soft Motion spring while the track color transitions smoothly between states. The glass surface picks up the page behind it through backdrop-filter, so it always feels consistent with whatever you put under it. Drop it into glassmorphism dashboards, settings panels, theme switchers, or any UI that already leans on the same visual language for cards and modals.

Built with

Frequently asked questions

Is Glass Toggle free to use?

Yes. Glass Toggle is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.

How do I install Glass Toggle?

One command: npx shadcn@latest add https://aicanvas.me/r/glass-toggle.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Glass Toggle for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.

What is Glass Toggle built with?

Glass Toggle is built with React and TypeScript, using Motion and Tailwind CSS.

Where would I use Glass Toggle?

Common uses include Settings, Dashboard, and Theme switcher. Like every AI Canvas component, it is self-contained and drops into any React project.

Can I remix Glass Toggle with AI?

Yes. Glass Toggle ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.

Featured in collections