A three-tier store header: a rotating message strip, a row with search, account and a cart that opens a mini cart with quantity steppers and a free shipping meter, and a category row with mega panels. Phones get a stacked layout, scrolling chips and an accordion drawer.
npx shadcn@latest add https://hyperblur.dev/r/navbar-commerce-rows.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/navbar-commerce-rows.tsx.
import { NavbarCommerceRows } from "@/components/hyperblur/navbar-commerce-rows"
<NavbarCommerceRows categories={categories} onCheckout={goToCheckout} showBackdrop={false} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Fieldhouse" | Store name, followed by an accent dot. |
| messages | string[] | Three shipping and membership messages | Lines that rotate in the top strip every 4.5 seconds. |
| categories | NavbarCommerceRowsCategory[] | New in, Women, Men, Camp & hike, Climb, Journal, Sale | Category row. A category with groups opens a mega panel and can add a promo card; sale renders it in red. |
| cartItems | { id: string; name: string; variant: string; price: number; qty: number; swatch?: string }[] | Two sample products | Initial cart contents. The component keeps quantities in local state. |
| currency | string | "USD" | ISO currency code for prices. |
| locale | string | "en-US" | Locale used to format prices. |
| freeShippingAt | number | 400 | Subtotal that unlocks free shipping. Drives the meter in the mini cart. |
| defaultCategory | string | null | null | Label of the mega panel that starts open. |
| defaultCartOpen | boolean | false | Start with the mini cart open. |
| onCartOpenChange | (open: boolean) => void | Called when the mini cart opens or closes. | |
| onCartChange | (items: NavbarCommerceRowsCartItem[]) => void | Called when a quantity changes. Items with zero quantity are removed. | |
| onCheckout | (items: NavbarCommerceRowsCartItem[]) => void | Called by the Checkout button. | |
| onSearch | (query: string) => void | Called when the search form is submitted. | |
| accent | string | "#e8ff5a" | Brand dot, cart badge, shipping meter, checkout button and focus rings. |
| showBackdrop | boolean | true | Render sample page content behind the navbar for previews. Turn it off in a real layout. |