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 Motion and Tailwind CSS. It ships with both light and dark styling.

Where would I use Filter Menu?

Common uses include Search results, Product catalog, and Job listings. Like every AI Canvas component, it is self-contained and drops into any React project.

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.

PremiumInputs & ControlsSearch resultsProduct catalogJob listings

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/••••••••••••

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.

About Filter Menu

Filter Menu is a skeuomorphic pill that expands into a rounded multi-select panel: six labelled rows, each with an icon and a circular checkmark that fills when selected, above an Apply button carrying a live count. Pressing Apply collapses everything back into the pill and slides a badge out from behind it showing how many filters are live, with a small clear button attached. Motion drives the layout morph, the row springs, and the staggered reveal, while a click anywhere outside quietly dismisses the panel. Rows, defaults, and the apply callback are all props, and the control ships with listbox roles, visible focus rings, and a matching dark theme. It suits catalogue pages, search result headers, and job listings that need more than a plain dropdown.

Built with

MotionTailwind CSS

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 Motion and Tailwind CSS. It ships with both light and dark styling.
Where would I use Filter Menu?: Common uses include Search results, Product catalog, and Job listings. Like every AI Canvas component, it is self-contained and drops into any React project.
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.