Marketplace Shell React block for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Marketplace Shell is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import MarketplaceShell from @/components/blocks/marketplace-shell.

// app/(market)/layout.tsx
"use client"

import Link from "next/link"
import { usePathname, useRouter } from "next/navigation"
import type { ReactNode } from "react"
import { MarketplaceShell } from "@/components/blocks/marketplace-shell"

export default function MarketLayout({ children }: { children: ReactNode }) {
  const pathname = usePathname()
  const router = useRouter()
  return (
    <MarketplaceShell currentPath={pathname} linkComponent={Link} onNavigate={router.push}>
      {children}
    </MarketplaceShell>
  )
}

Props

• children
  ReactNode

  The page, rendered once inside main.

• variantdefault "full"
  "full" | "minimal"

  minimal: logo, minimalAction and minimalNote only (checkout, the publishing wizard); no search, categories, footer or tabs.

• layoutdefault "page"
  "page" | "fill"

  page: the window scrolls under a sticky header and the footer follows the content. fill: the shell is exactly the viewport, main is a flex column for inboxes, the footer is hidden and the tab bar sits in the flow.

• currentPathdefault "/"
  string

  The active route (next: usePathname()). Selects the tab and the category chip; nested routes match by prefix.

• categories
  MarketplaceCategory[]

  The category tree (MARKETPLACE_SHELL_SAMPLE.categories: the 12 Northwind Market categories with lucide icons, counts and subtrees for Vehicles, Real estate and Electronics). The strip shows the top level; the search suggests any level. Compatible with category-picker's CategoryNode.

• user
  { name: string; email?: string; avatar?: string; city?: string } | null

  The signed-in buyer (MARKETPLACE_SHELL_SAMPLE.user: Emma Carter, city cluj-napoca). null shows Sign in (loginHref). city is the fallback of Near me.

• userMenuItems
  UserMenuEntry[]

  The account menu entries above sign out. Default: My account, My listings, Favorites, Messages, Settings and a separator.

• onSignOut
  () => (void | Promise<unknown>)

  The sign-out row. Default: a toast "Te-ai deconectat".

• favoritesCountdefault 4
  number

  The favorites badge (99+ above 99). 0 hides the badge, the icon stays.

• messagesCountdefault 2
  number

  Unread messages on the header icon and the Mesaje tab. 0 hides the badges.

• favoritesHrefdefault "/favorites"
  string

  Where the heart points.

• messagesHrefdefault "/messages"
  string

  Where the messages icon and tab point.

• searchPlaceholderdefault "Search 1,284,310 listings"
  string

  The query field's and the phone field's placeholder. Empty uses labels.searchPlaceholder.

• defaultQuerydefault ""
  string

  The query the search starts with.

• defaultLocationdefault ""
  string

  A ro-locations city id the search starts with ("cluj-napoca"); "" is All locations. An unknown id shows as typed.

• defaultCategorydefault ""
  string

  A category id that scopes the search ("phones"); shown as a removable chip in the box.

• onSearch
  (query: { query: string; location: string; category: string }) => void

  Runs on Enter, Search, a suggestion or a recent search. Default: navigates to /cautare?q=…&loc=…&cat=… through the router.

• popularSearches
  string[]

  Suggested while the field is empty (MARKETPLACE_SHELL_SAMPLE.popularSearches: iPhone 14, Bike, 2-bedroom apartment, Sofa, Honda Civic).

• recentSearches
  string[]

  The recent searches the field starts with (city bike, macbook air); each submit adds one, and each can be removed.

• locations
  LocationOption[]

  The location combobox's cities. Default: cityOptions() from ro-locations, largest first; All locations and Near me are always on top.

• searchShortcutdefault "/"
  string

  Focuses the search on desktop and opens the search sheet on phones. "" binds nothing.

• postHrefdefault "/post"
  string

  Where Post a listing and the tab bar's raised action point.

• onPost
  () => void

  Replaces the postHref link with a button (open a dialog, check sign-in first).

• minimalActiondefault "back"
  "back" | "close" | "none"

  The minimal variant's leading button.

• minimalNote
  ReactNode

  The minimal variant's trailing trust note. Default: a lock and Secure payment.

• onBack
  () => void

  The minimal button. Default: history.back() when there is history, else backHref.

• backHrefdefault "/"
  string

  Where the minimal button goes without history.

• showCategoriesdefault true
  boolean

  The category strip under the header (768px and up).

• footerdefault true
  boolean

  The footer with the link columns, the app badges, the cookie settings and the theme (page layout, full variant).

• footerLinks
  { title: string; links: { label: string; href: string }[] }[]

  The footer columns (MARKETPLACE_SHELL_SAMPLE.footerLinks: Northwind Market, Help, Legal, For business).

• footerNote
  ReactNode

  Extra content in the footer's bottom row, next to Cookie settings.

• appBadgesdefault true
  boolean

  App Store and Google Play buttons in the footer (neutral buttons with an icon and text, no brand artwork).

• tabBardefault true
  boolean

  The phone tab bar: Home, Search, the raised Post, Messages and Account.

• hideTabBardefault false
  boolean

  Hides the tab bar for a while (a page with its own sticky bar, thumbnails).

• cookieConsentdefault true
  boolean

  Renders CookieConsent until the visitor decides; it sits above the tab bar.

• consentStorageKeydefault "northwind-market-consent"
  string

  The consent cookie's name (the demo appends -demo so it never touches a real choice).

• consentCategories
  ConsentCategoryConfig[]

  The consent categories. Default: DEFAULT_CONSENT_CATEGORY_CONFIG.

• ctaTonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The fill of Post a listing, Search, the tab bar's raised action and the consent's accept button.

• loginHrefdefault "/login"
  string

  Where Sign in points while signed out.

• accountHrefdefault "/account"
  string

  The Cont tab and the account menu's base path.

• logo
  ReactNode

  Replaces the default mark and Northwind Market wordmark.

• localedefault "en-US"
  string

  Intl locale for the counts.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The active category chip and the active tab.

• linkComponent
  (props: LinkComponentProps) => ReactNode

  The router link every link renders through (next/link). Default: the LinkProvider's, else <a>.

• onNavigate
  (href: string) => void

  The router's push for the default search and the account menu (next: useRouter().push).

• labels
  Partial<MarketplaceShellLabels>

  Every visible string. English by default (DEFAULT_MARKETPLACE_SHELL_LABELS; MARKETPLACE_SHELL_LABELS_EN is the same set under its older name).

• classNames
  Partial<Record<"header" | "search" | "categories" | "main" | "footer" | "tabs", string>>

  Extra classes for the inner parts.

• className
  string

  Extra classes for the root. Other props spread onto it.

Parts

FAQ

More React blocks