Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProUse this when a list is filtered by one category at a time: a free-scroll row of chips with a pressed state, the chosen chip scrolled into view and a polite "12 results" message.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it above a grid or list on mobile and desktop where there are more categories than fit, such as product types, topics or cuisines.
Do not use it for multi-select filters or for filters with their own sub-options. Use a filter panel.
It composes Carousel Free Scroll, which the CLI installs for you.
import { CategoryChipsFilter } from "@/components/category-chips-filter"<CategoryChipsFilter
label="Filter by category"
categories={categories}
onChange={(category) => setFilter(category.id)}
/>| Prop | Type | Default | Description |
|---|---|---|---|
categories | Category[] | - | Each has an id, label and the number of results. |
label | string | - | Accessible name of the chip row. |
defaultId | string | first | The chip that starts pressed. |
onChange | (category: Category) => void | - | Called when another chip is chosen. |
The pattern ships with a Testing Library test (category-chips-filter.test.tsx). Embla needs layout to count snaps, and jsdom has none, so the repo's mockCarouselLayout helper gives the viewport and slides real sizes.