MINICART COMPONENT

Compact cart display with dropdown or sidebar variants, perfect for headers and navigation.

PROPS

PropTypeDefaultDescription
cartCart-Shopping cart data
variant'dropdown' | 'sidebar''dropdown'Display style
showBadgebooleantrueShow item count badge
onRemoveItem(itemId) => void-Remove item callback

Variants

Dropdown Mini Cart

1<MiniCart variant="dropdown" cart={cart} />

Sidebar Mini Cart

Cart (3)

Classic Band Tee

Classic Band Tee

M / Black

Qty: 2

€ 59,98

Embroidered Dad Hat

Embroidered Dad Hat

One Size / Black

Qty: 1

€ 24,99

Total€ 84,97
1<MiniCart variant="sidebar" cart={cart} />

Empty Cart

Badge Variants

USAGE EXAMPLES

IN HEADER NAVIGATION

Add mini cart to your site header

1import { MiniCart } from '@/components/fanbace/mini-cart';
2import { useCart } from '@/lib/sdk';
3 
4export default function Header() {
5  const { cart } = useCart();
6 
7  return (
8    <header className="border-b">
9      <div className="container mx-auto px-4 py-4 flex justify-between items-center">
10        <Logo />
11        <nav>{/* Navigation items */}</nav>
12        <MiniCart cart={cart} variant="dropdown" />
13      </div>
14    </header>
15  );
16}

WITH MOBILE SIDEBAR

Use sidebar variant for mobile-friendly cart

1import { MiniCart } from '@/components/fanbace/mini-cart';
2import { useCart } from '@/lib/sdk';
3import { useMediaQuery } from '@/hooks/use-media-query';
4 
5export default function ResponsiveCart() {
6  const { cart } = useCart();
7  const isMobile = useMediaQuery('(max-width: 768px)');
8 
9  return (
10    <MiniCart
11      cart={cart}
12      variant={isMobile ? 'sidebar' : 'dropdown'}
13    />
14  );
15}