Product Categories 4 - Scroll-snap category carouselPro
Horizontally scrolling carousel of tall category cards with overlaid names and item counts, previous and next arrow buttons that track scroll position, and native swipe on touch. Use it when you have more categories than fit on one row and want a compact, browsable strip.
About Product Categories 4
Horizontally scrolling carousel of tall category cards with overlaid names and item counts, previous and next arrow buttons that track scroll position, and native swipe on touch. Use it when you have more categories than fit on one row and want a compact, browsable strip.
Product Categories 4 is a pro product categories block for React, built on shadcn/ui and Tailwind CSS. It ships as 85 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- categories
- carousel
- slider
- scroll-snap
- ecommerce
- cards
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/product-categories-04Dependencies installed automatically: lucide-react.
Uses: button, reveal, use-reduced-motion, utils.
Usage
import ProductCategories04 from "@/components/blocks/product-categories-04"
export default function Page() {
return <ProductCategories04 />
}