Mark ToggleAn iOS-style pill toggle in warm earth and sand tones — the thumb carries a small icon that morphs from X to checkmark as it slides across.
Add to your project
One command adds this component to your project.
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/mark-toggleFor dark mode, add the dark class to your <html> element:
<html class="dark">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 Mark Toggle
Mark Toggle is a warm-toned variation on the iOS pill switch with one extra detail: the thumb carries a tiny mark that morphs from an X into a checkmark as it slides across. The track lives in earthy sand colors, the icon swap is animated with Motion, and the spring settles cleanly without bounce artifacts. Because the moving glyph confirms the new state, it is a more reassuring choice for settings rows, onboarding choices, and consent-style forms where users want to be certain a switch flipped.
Built with
Frequently asked questions
- Is Mark Toggle free to use?
- Yes. Mark 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 Mark Toggle?
- One command: npx shadcn@latest add https://aicanvas.me/r/mark-toggle.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Mark 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 Mark Toggle built with?
- Mark Toggle is built with React and TypeScript, using Motion and Tailwind CSS. It ships with both light and dark styling.
- Where would I use Mark Toggle?
- Common uses include Settings, Forms, and Onboarding. Like every AI Canvas component, it is self-contained and drops into any React project.
- Can I remix Mark Toggle with AI?
- Yes. Mark Toggle ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.
AI Canvas