Category Filters

Filter pills used on list pages. Desktop wraps onto multiple lines; mobile uses a horizontal scroll with a right-side gradient fade. Click writes to the `?category=` URL param with scroll preservation.

Blog filters

Active category

Case study filters

Props

Prop	Type	Default	Description
`categories`*	`string[]`	-	The filter options. The component prepends the "All" pill automatically.
`basePath`*	`string`	-	Destination route for the router push (e.g. "/blog", "/work"). Query string is appended.
`activeCategory`*	`string \| null`	-	Currently-selected category (null = "All").
`resultCount`*	`number`	-	Number of items currently shown — rendered below the filter row.
`allLabel`	`string`	`"All"`	Label used for the reset pill.

Import

tsx

import { CategoryFilters } from '@/components/ui/CategoryFilters'

Usage

tsx

<CategoryFilters
  categories={['Web App', 'Website', 'Mobile App']}
  basePath="/work"
  activeCategory={selectedCategory}
  resultCount={filteredCaseStudies.length}
/>