Menu Toggle

a sleek animated toggle button (like a hamburger menu) built with SVG. It smoothly transitions between open and closed states with a fun rotation and line morph effect—perfect for modern navbars!

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Menu Toggle to your project and fits it to your theme.

import React from 'react';
import { MenuToggle } from '@/components/ui/menu-toggle';

export default function DemoOne() {
	const [open, setOpen] = React.useState(false);

	return (
		<div className="flex min-h-screen w-full items-center justify-center">
			<MenuToggle strokeWidth={3} open={open} onOpenChange={setOpen} className="size-16" />
		</div>
	);
}