Navbar 16 - Storefront header with cart countPro
A shop header with category links, an inline product search field, wishlist and account icons and a shopping bag whose item badge pops when the count changes. Use it for e-commerce storefronts, merch shops and product catalogues.
About Navbar 16
A shop header with category links, an inline product search field, wishlist and account icons and a shopping bag whose item badge pops when the count changes. Use it for e-commerce storefronts, merch shops and product catalogues.
Navbar 16 is a pro navbar block for React, built on shadcn/ui and Tailwind CSS with motion animations that respect reduced-motion settings. It ships as 127 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.
- ecommerce
- cart
- badge
- search
- store
- shop
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/navbar-16Dependencies installed automatically: lucide-react, motion.
Uses: button, sheet, use-reduced-motion, utils.
Usage
import Navbar16 from "@/components/blocks/navbar-16"
export default function Page() {
return <Navbar16 />
}