Is Filter Menu free to use?

Filter Menu is a Premium AI Canvas component. Premium unlocks the full source code, the full remix prompt, and one-command installs for every Premium component, block, 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. Premium also unlocks the full remix prompt in the Remix panel.

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. Open "Remix with AI" on this page to read the setup and the constants Filter Menu is built from. The engine, the markup and the notes on how it works are part of Premium. For the exact component, install it with the one-command CLI.

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.

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-menu

For dark mode, add the dark class to your <html> element:

Optional

<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.

Get MCP

Props

Every prop this component accepts. Any other prop is forwarded to the underlying element.

FilterOption

Prop	Type	Default	Description
idreq	`string`	-	Unique id used to track selection.
labelreq	`string`	-	Text shown for the filter row.
icon	`React.ComponentType<{ size?: number }>`	-	Optional icon component rendered before the label.

FilterMenu

Prop	Type	Default	Description
filters	`FilterOption[]`	DEFAULT_FILTERS	The filter rows shown inside the open panel.
defaultSelected	`string[]`	[]	Ids selected and applied on mount (uncontrolled).
onApply	`(ids: string[]) => void`	-	Called with the applied filter ids when Apply is pressed.
label	`string`	'Filters'	Text for the closed trigger button.
className	`string`	-	Extra classes merged onto the outermost root element.

Frequently asked questions

Is Filter Menu free to use?: Filter Menu is a Premium AI Canvas component. Premium unlocks the full source code, the full remix prompt, and one-command installs for every Premium component, block, 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. Premium also unlocks the full remix prompt in the Remix panel.
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. Open "Remix with AI" on this page to read the setup and the constants Filter Menu is built from. The engine, the markup and the notes on how it works are part of Premium. For the exact component, install it with the one-command CLI.