Blind Pull ToggleA dark/light mode toggle styled as a window-blind pull cord — click to yank the cord and watch the icon swap through a venetian-blind slat animation.
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/blind-pull-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 Blind Pull Toggle
Blind Pull Toggle reframes the dark mode switch as a window-blind cord: click to yank it and watch the icon swap through a horizontal slat animation that mimics venetian blinds opening and closing. The pull-and-spring is Motion-driven so the cord weight feels physical, and the slats reveal the destination icon by the time the animation settles. It is a small but memorable replacement for the standard sun/moon button in site headers, footers, and settings drawers.
Built with
Frequently asked questions
- Is Blind Pull Toggle free to use?
- Yes. Blind Pull 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 Blind Pull Toggle?
- One command: npx shadcn@latest add https://aicanvas.me/r/blind-pull-toggle.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Blind Pull 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 Blind Pull Toggle built with?
- Blind Pull Toggle is built with React and TypeScript, using Motion and Tailwind CSS. It ships with both light and dark styling.
- Where would I use Blind Pull Toggle?
- Common uses include Settings, Theme switcher, and Footer. Like every AI Canvas component, it is self-contained and drops into any React project.
- Can I remix Blind Pull Toggle with AI?
- Yes. Blind Pull 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