Taga ToggleA playful pill toggle with an expressive face on the thumb — dead (×× eyes, flat mouth) when off, happy (arc eyes, big smile) when on.
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/taga-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 Taga Toggle
Taga Toggle is a personality switch built into a pill toggle: the thumb wears a small face that goes from dead-eyed and flat-mouthed (off) to wide-eyed and grinning (on) while the track warms from grey to yellow. The face transitions are Motion-driven so the morph reads as one continuous gesture rather than a swap. It is the right pick when a feature toggle is part of the brand voice rather than a quiet utility: onboarding flows, product tours, marketing demos, and empty-state CTAs.
Built with
Frequently asked questions
- Is Taga Toggle free to use?
- Yes. Taga 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 Taga Toggle?
- One command: npx shadcn@latest add https://aicanvas.me/r/taga-toggle.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Taga 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 Taga Toggle built with?
- Taga Toggle is built with React and TypeScript, using Motion and Tailwind CSS. It ships with both light and dark styling.
- Where would I use Taga Toggle?
- Common uses include Onboarding, Empty state, and Product tour. Like every AI Canvas component, it is self-contained and drops into any React project.
- Can I remix Taga Toggle with AI?
- Yes. Taga 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