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

Inbox Page

BlocksInbox Page
Error PagesInvoice Page
Live props
State
defaultConversationId
defaultFolder
loading
Layout
height
listWidth360px
Behavior
offers
autoReply
sendOnEnter
searchShortcut
conversationShortcuts
animateIn
Content
locale
currency
Appearance
tone
Code
import { InboxPage } from "@/components/blocks/inbox-page"

<InboxPage />
Pro

v1.0.0·Added in 1.0.0

Northwind Market messages: conversations about your listings and the ones you asked about, with the listing pinned on top, offers, photos, voice notes.

The list shows every conversation, newest first: tap or click a row to open it (All, Buying, Selling and Unread filter it; the search finds names, listing titles and message text, accents optional). A long press on a row (or the ... button that appears on hover and focus) opens its menu: mark as read or unread, archive, mute, delete (asks first). The list menu opens the archive and the notification settings. On phones the conversation slides over the list; swipe from the left edge, tap the back arrow or press Escape to go back, and the list keeps its scroll. The header shows the person with their verified badge and when they were last active, or that they are typing; its menu opens the profile, blocks (the composer says You blocked this person, with Unblock), reports, archives or deletes. Under it the listing stays pinned with its photo, price and status: View ad, and on your own listings Reserve / Cancel reservation and Mark as sold (asks first; a sold listing greys out). Messages are grouped by day (Today, Yesterday, then the date) with read receipts; photos open a full screen viewer, voice notes play in place, offers you received have Accept and Decline. Scroll up for older messages (the position holds); when a message arrives while you read back, a New message pill takes you down. The composer: quick replies on short threads fill the field, the photo button attaches an image (a preview chip you can remove), Offer opens a dialog with the amount (buying side), Enter sends on desktop and Shift+Enter adds a line (touch keyboards add lines, the button sends; see sendOnEnter). A failed message shows Retry. With autoReply the other side types for a moment and answers; offers are accepted near the price or countered once. Alt+Arrow up / down move between conversations while focus is in the page. Incoming messages are announced to screen readers.

Add to a project

npx wingo-ui@latest add inbox-page

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

Dependencies

motionlucide-reactalert-dialogaudio-playeravatarbadgebuttoncurrency-inputdialogdropdown-menuempty-stateimage-lightboxpresencepricesearch-inputsplit-viewtabstagtextareatoastuse-controllable-stateuse-keyboard-insetuse-long-pressuse-media-queryuse-shortcutuse-stick-to-bottomcommercedate-utilsform-validationmotionnavigationrelative-timetonesui-config

Files

  • components/blocks/inbox-page.tsx
  • components/blocks/inbox-page-data.ts

See also

Split ViewPresenceAudio PlayerChat ThreadMarketplace ShellListing Detail PageMarketplace Search Page
PreviousError PagesNext Invoice Page