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

Listing Detail Page

BlocksListing Detail Page
KPI DashboardLogin Page
Live props
State
defaultFavorite
status
defaultMessageOpen
loading
Layout
galleryThumbnails
showMap
showSafety
stickyBar
Content
locale
currency
Appearance
tone
radius
Behavior
animateIn
Code
import { ListingDetailPage } from "@/components/blocks/listing-detail-page"

<ListingDetailPage />
Pro

v1.0.0·Added in 1.0.0

A listing on Northwind Market: photos, price, details, description, an approximate map, the seller, safety tips, contact actions and similar listings.

Swipe or arrow through the photos (thumbnails under the stage or beside it, a counter on phones); hover zooms with a mouse, a click, tap or Enter opens the full screen viewer and Escape closes it. The heart on the photo and Save in the price card save the listing together, at once; a rejected onFavoriteChange rolls both back with a toast. The share button uses the system share sheet where there is one, otherwise it copies the link (Link copied). Send message opens a dialog (a bottom sheet on phones) with the listing, quick replies as tags that fill the text, and the message field: Send or Cmd/Ctrl+Enter sends, an empty message shows its error, a failed send shows an alert and keeps the text; success turns the dialog into Message sent with Go to the conversation. Show phone shows the masked number, fetches the full one through onRevealPhone and fades it in as a tel: link (announced); the sticky bar's Call reveals and dials in one tap. Read more expands the description (clamped at 8 lines); URLs in it stay plain text. The map is read only with the approximate area; on touch a tap opens it full height. Report this listing opens a dialog with the reasons as radio cards and optional details. Similar listings are a swipeable rail with arrows in its header. Below 1024px the title, price and contact buttons sit under the photos, the seller card follows the description, and once those buttons scroll away a bar with the price, Call and Message stays at the bottom. Reserved shows a warning banner; sold shows a neutral banner, disables the contact buttons and puts the similar listings first. Sections rise in once on mount; reduced motion skips it.

Add to a project

npx wingo-ui@latest add listing-detail-page

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

Dependencies

motionlucide-reactalertbadgebreadcrumbbuttoncarouselcollapsibledescription-listdialogfavorite-buttonimage-lightboxlisting-cardlocation-mappriceproduct-galleryradio-groupseller-cardskeletonsticky-cta-bartagtextareatoastcommercemotionnavigationnumber-formatrelative-timero-locationstonesui-config

Files

  • components/blocks/listing-detail-page.tsx
  • components/blocks/listing-detail-page-data.ts

See also

Marketplace ShellProduct gallerySeller cardListing cardSticky CTA BarLocation MapMarketplace Home PageMarketplace Search PageInbox PagePost Listing Wizard
PreviousKPI DashboardNext Login Page