Travel Experiences Catalog
Experience catalog by category.
Choose the primitives library your project already uses. Both look the same: your theme, not the variant, controls colors, shape, type and motion.
About this feature
What it's for
- Experience catalog by category.
- Catalog of courses or workshops.
- Events grid with host.
Includes
- Category toggle group
- Host chip cards
- Detail linking
Works with
- Radix UI and Base UI primitives (pick the one your project uses)
- React 19, Next.js App Router and Tailwind CSS 4, installed with the shadcn CLI
- Your theme tokens, in light and dark mode
- 1 template or blueprint on this site use it (below)
Install
Included with Agentic UI Kit (one-time license). Install needs your license key: see pricing · connect your project.
Agentic UI CLI
agentic-ui add travel-experiences-catalogInstalls through shadcn and adapts the component to your design tokens.
shadcn CLI
npx shadcn@4.17.0 add @agentic-ui/travel-experiences-catalogUsed in
- Type
- Feature
- Variants
- Radix UI and Base UI
- Themes
- Light and dark
- Widths
- Preview it at desktop, tablet and mobile widths above.
- Sample data
- Ships with sample data in
wayfarely.ts; replace it with your own.
- npm packages
date-fns-tzlucide-reactnuqszustand- Registry dependencies
lib-travel-marketplace-utilsui-avatarui-toggle-group- Files
4 files
- components/templates/travel-marketplace/components/wayfarely/experiences-view.tsx
- components/templates/travel-marketplace/store/wayfarely-store.ts
- components/templates/travel-marketplace/mock-data/wayfarely.ts
- components/templates/travel-marketplace/hooks/use-filter-params.ts
Related components
Travel Booking Card
Stay booking with a price breakdown.
Details and live previewTravel Experience Detail
Tour detail with itinerary and slots.
Details and live previewTravel Explore Split View
Accommodation explorer with a map.
Details and live previewTravel Filters Dialog
Stay filters with price range and amenities.
Details and live preview