Filter MenuA skeuomorphic pill that expands into a multi-select filter checklist with Apply.
Premium componentInputs & Controls
Add to your projectPremium component
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/filter-menu2
For 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 “a navigation component from AI Canvas” inside Claude Code, Codex, or Cursor and it can suggest you a few options, then install the one you like. Less typing, lower token cost, modern way to build.
Get MCPAdd your token to your MCP server config so installs authenticate as your account:
AICANVAS_TOKEN=aic_••••••••Frequently asked questions
- Is Filter Menu free to use?
- Filter Menu is a Premium AI Canvas component. Premium unlocks the full source code and one-command installs for every Premium component and template.
- How do I install Filter Menu?
- Premium unlocks one-command installs: run the shadcn CLI with your AI Canvas token, or connect the AI Canvas MCP server and ask your AI editor to install it for you. You can also recreate your own take on it with the included AI prompts.
- What is Filter Menu built with?
- Filter Menu is built with React and TypeScript, using Interactive and Motion. It ships with both light and dark styling.
- Can I remix Filter Menu with AI?
- Yes. Filter Menu 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