# Motion Filter Grid

Template or theme gallery filtered by category and sorted by popularity.

- id: `motion-filter-grid`
- Page: https://agentic-ui-kit.com/components/motion-filter-grid
- Live preview: https://agentic-ui-kit.com/live/component/motion-filter-grid

## Install

```bash
agentic-ui add motion-filter-grid
npx shadcn@4.17.0 add @agentic-ui/motion-filter-grid
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** filter-reflow, sort-reflow, enter-exit-presence, masonry-layout, responsive-columns, results-announcement, focus-preservation, personality-timing, reduced-motion-fallback, informative-state-preservation
- **Intents:** manage-collection, navigate
- **Suits domains:** saas, ecommerce, media, file-storage, ai-workspace, knowledge
- **Interaction:** click, keyboard-navigation, search
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Template or theme gallery filtered by category and sorted by popularity, Product catalog grid reacting to facet chips and a sort menu, Media or file library switching between a uniform grid and masonry
- **Avoid when:** Collections of hundreds of cards rendered at once (virtualize and skip the reflow), Hand-ordering items by drag (use motion-flip-reorder), Inserting or deleting single entries in a feed or list (use motion-item-add-remove)
- **Preserve when adapting:** last-painted-box-snapshot, inert-hidden-leaving-copies, results-count-live-region, focus-fallback-to-list, instant-fallback-without-animations
- **Replace when adapting:** card-content, domain-copy, filter-and-sort-controls
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 8.5/10, responsive 9/10, accessibility 8.5/10, code 8.5/10
- **Uses primitives:** card, button, badge
- **npm dependencies:** @agentic-ui/motion, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion