127 Components
Category Filter Scroller
NavigationAirbnb-style horizontal scrolling category filter bar with edge gradient fade masks, spring active underline indicator, and tactile left/right chevron navigation.
Airbnb Category Filter Scroller13 Categories
Edge fade masks, spring active underline, and tactile scroll navigation
Showing Trending
Most booked destinations worldwide
Positano, Italy
4.97
Glass Pavilion Over Sea
May 12–17
$520/ night
Bergen, Norway
4.99
Nordic Minimalist Fjord
Jun 1–6
$340/ night
Sedona, AZ
4.95
High-Desert Mirrored Cube
Apr 20–25
$410/ night
Jump directly to:
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/category-filter-scroller.json"
Props
TypeScript props supported by <CategoryFilterScroller />.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultCategory | string | "trending" | ID of the category selected on mount. |
| onSelectCategory | (category: CategoryItem) => void | — | Callback triggered when a user selects a new category. |
| className | string | — | Optional custom CSS class names for the container wrapper. |
Key Features
- Horizontally scrolling row of curated category icons with smooth momentum and boundary detection.
- Dynamic left and right gradient edge masks that appear only when additional scrollable content exists.
- Spring-animated active underline pill that glides across categories using layoutId.
- Left and right chevron navigation buttons with spring hover physics.
- Responsive card showcase demonstrating reactive content switching on category change.
Keyboard & Accessibility
- Buttons have distinct accessible labels for Left and Right scroll actions.
- Selected category communicates active status visually and semantically.
- Smooth scroll and spring transitions honor reduced motion preferences.