A floating View order bar that slides up once the cart has items, bumps the count when it changes and shows progress toward a free delivery threshold.
npx shadcn@latest add https://hyperblur.dev/r/order-cart-bar.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/order-cart-bar.tsx.
import { OrderCartBar } from "@/components/hyperblur/order-cart-bar"
<OrderCartBar count={3} total={54} freeDeliveryThreshold={60} onOpen={() => console.log("open cart")} />| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | 3 | Number of items in the cart. The badge bumps whenever it changes. |
| total | number | 54 | Cart total as a number. |
| currency | string | "USD" | ISO currency code used with Intl.NumberFormat for every amount. |
| locale | string | "en-US" | Locale used to format amounts. |
| freeDeliveryThreshold | number | 60 | Amount that unlocks free delivery. 0 hides the progress line. |
| position | "fixed" | "sticky" | "static" | "fixed" | Fixed to the viewport bottom, sticky inside its scroll container, or static in the flow for previews. |
| offset | number | 16 | Distance from the bottom edge in pixels for fixed and sticky positions. |
| hideWhenEmpty | boolean | true | Slide the bar out of view while the count is 0. |
| theme | "dark" | "light" | "dark" | Color scheme of the bar. |
| accent | string | "#2f7bff" | Color of the total button, badge and progress. |
| labels | Partial<{ view; itemsOne; itemsMany; freeDeliveryLeft; freeDeliveryUnlocked }> | { view: "View order", itemsMany: "{count} items", freeDeliveryLeft: "Add {amount} for free delivery", ... } | Every visible string. {count} and {amount} are replaced with the item count and the formatted amount left. |
| onOpen | () => void | Called when the bar is pressed, usually to open the cart drawer. | |
| className | string | Extra classes on the root element. | |
| style | React.CSSProperties | Inline styles on the root element. |