WingoUI
Buttons & Actions
ButtonButton GroupCopy ButtonDelete ButtonTheme ToggleToggleToggle Group
Inputs
Avatar UploadCalendarCheckboxColor PickerComboboxCron PickerCurrency InputDate PickerDate Range PickerDate Time PickerDuration PickerFile UploadFilter BuilderInputInput GroupListboxMasked InputMention InputMonth PickerMulti SelectNumber InputOTP InputPassword InputPhone InputRadio GroupRatingSearch InputSegmented ControlSelectSignature PadSliderSwitchTag InputTextareaTime Picker
Forms
Address InputCSV ImportFieldForm WizardInline EditInvoice line itemsRich Text Editor
Navigation
Back To TopBounce SidebarBreadcrumbCommand MenuGlobal SearchGooey NavHook SidebarNav MenuNav TabsPaginationProximity SidebarScroll ProgressSidebarStepsTable Of ContentsTabsTopbarUser MenuWorkspace Switcher
Overlays
Alert DialogContext MenuDialogDrawerDropdown MenuFamily DrawerHover CardPopoverSheetShortcuts DialogTooltipTour
Feedback
AlertBannerCookie ConsentEmoji ReactionEmpty StateNotification BellNotification CenterProgressRoute ProgressSkeletonSpinnerToast
Data Display
Approval FlowAvatarBadgeCalendar ViewCode BlockComment ThreadContact cardCountdownDescription ListDiff ViewerFile ListFile managerFolderGanttJSON ViewerKbdLog ViewerMarkdownPresenceSchedulerTagTimelineTree View
Tables & Lists
Audit LogData TableDeal PipelineEditable GridKanbanListMembers tablePermissions MatrixTableTask ListVirtual List
Charts & Stats
Animated CounterArea chartBar chartDonut chartFunnel chartGaugeGitHub ActivityHeatmap calendarLeaderboardLine chartRadial barSparklineStat CardTrackerTrend badge
Layout
AccordionApp ShellCardCollapsibleDetail LayoutEntity HeaderPage HeaderScroll AreaSeparatorSettings LayoutSplit ViewToolbar
Media
Audio PlayerCarouselImage CropperImage LightboxLocation MapQR CodeStep PlayerVideo Player
AI Kit
Agent Status CardChat MessageChat ThreadConversation ListFluid OrbGrid RevealMatrix OrbModel PickerPrompt InputReasoning IndicatorRule BuilderSuggestion ChipsTool Call TimelineUsage MeterVoice InputWorkflow Canvas
Text & Effects
Gravity Letters
Mobile
Action SheetBottom Tab BarFABHaptic ButtonHero HeaderInstall PromptLarge Title HeaderNotification BannerOnboarding CarouselPicker WheelPull To RefreshSlide To ConfirmSticky CTA BarSwipe DeckSwipeable Tabs
Commerce
Cart drawerCategory pickerCheckout stepsCoupon inputFavorite buttonFilter panelListing cardListing gridOrder trackerPricePrice rangePricing tableProduct galleryQuantity stepperReviewsSeller card
Blocks
Admin Dashboard PageAdmin ShellAI Chat PageAutomation Builder PageCheckout PageCRM Contact PageCRM Pipeline PageError PagesInbox PageInvoice PageKPI DashboardListing Detail PageLogin PageMarketplace Home PageMarketplace Search PageMarketplace ShellMobile App HomeOnboarding FlowPost Listing WizardPricing PageRegister PageSettings PageUsers Admin Page
Hooks & Utilities
AI ChatChart kitCommerceDate utilsFile exportFile typesFiltersForm validationHapticsInvoicingMotion presetsNavigationNumber formatRelative timeRomanian locationsSpreadsheetText matchTonesUIProvideruseClipboarduseConsentuseControllableStateuseCooldownuseDebounceuseKeyboardInsetuseLocaleuseLongPressuseMediaControlsuseMediaQueryuseOverflowItemsusePersistedStateuseScrollEdgesuseScrollStateuseSelectionuseShortcutuseStickToBottom
GalleryThemeCredits

Blocks

Marketplace Search Page

BlocksMarketplace Search Page
Marketplace Home PageMarketplace Shell
Live props
Content
pageSize24
locale
currency
State
defaultView
defaultFiltersOpen
defaultSavedSearch
loading
Behavior
viewPersistKey
loadMode
animateIn
Layout
showPromoted
showRelated
filterMode
Appearance
tone
radius
Code
import { MarketplaceSearchPage } from "@/components/blocks/marketplace-search-page"

<MarketplaceSearchPage />
Pro

v1.0.0·Added in 1.0.0

The Northwind Market results page: title and count, facets in a sidebar or phone sheet, filter chips, sort, grid or list and endless results.

The breadcrumb leads back to Home and the parent category; the title names the category and the place (Bikes in Cluj-Napoca) and the count under it is announced after every change. From 1024px the filters sit in a sticky sidebar and apply at once: drag the price thumbs over the histogram or pick a preset, tick Condition or Seller (each option shows how many listings it would give), choose the place with a radius (Only here to +100 km, off for All locations), switch Delivery available, choose Posted and the wheel sizes. Below 1024px the Filters button (with the active count) opens a full height sheet whose button counts the draft (See 312 listings) and applies it; Reset clears the draft, Escape or a swipe down closes it. Active filters and the query show as chips under the header (sideways scroll on phones); × removes one, Clear all removes all. Sort opens a menu (a sheet on phones), the grid or list switch cross-fades the results, the bell saves the search with a toast and pressing it again stops following it. Up to three promoted listings lead the results (a swipeable rail on phones). The next 24 listings load as you near the end (or with Show 24 more in button mode); a failed page shows Try again. Filters that match nothing show an empty state with Clear filters. Hearts save a listing at once. Related searches links close the page on laptops. Sections rise in once on mount; reduced motion skips it.

Add to a project

npx wingo-ui@latest add marketplace-search-page

Pro item: the CLI needs a Pro account. See plans

Dependencies

motionlucide-reactbreadcrumbbuttonempty-statefilter-panellisting-cardlisting-gridprice-rangetagtoastuse-controllable-statemotionnavigationnumber-formatrelative-timero-locationstext-matchtonesui-config

Files

  • components/blocks/marketplace-search-page.tsx
  • components/blocks/marketplace-search-page-data.ts

See also

Marketplace ShellMarketplace Home PageListing Detail PageFilter panelListing gridPrice rangeListing card
PreviousMarketplace Home PageNext Marketplace Shell