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

Post Listing Wizard

BlocksPost Listing Wizard
Onboarding FlowPricing Page
Live props
State
defaultStep
loading
Behavior
persistKey
maxPhotos8
requirePhoto
animateIn
Appearance
ctaTone
tone
radius
Content
locale
currency
Code
import { PostListingWizard } from "@/components/blocks/post-listing-wizard"

<PostListingWizard />
Pro

v1.0.0·Added in 1.0.0

Posting an ad on a marketplace in seven steps: category, details, photos, price, place, contact and a preview, with an autosaved draft.

Pick the category from icon tiles (drill down, Back, or type to search and press Enter for the first match); a fresh pick shows the path as a chip with Change and moves on by itself, and a title typed before offers Looks like it belongs in Bicycles. Continue (or Enter in a field, Cmd/Ctrl+Enter in the description) checks the step: errors appear under the fields, the stepper marks the step with !, the button shakes and focus goes to the first problem. Details has the title with a 70 character counter, the condition as radio cards, the category's own fields (selects open as bottom sheets on phones) and the description. Photos takes up to 8 photos by drop, picker, camera or paste, each uploads with progress (a failed one offers Retry), drag or Space and the arrow keys reorder them and the first is badged Cover. Price switches between fixed, negotiable, free and swap, shows similar ads' range and the delivery switch. Location is the Romanian address form with Show the exact location. Contact prefills the account. Preview shows the ad as a grid and a list card and a summary whose Edit links go back to a step; Publish ad spins, then the success view with a bouncing check, View ad, Post another ad and the promotion packages. A failed publish shows an alert and keeps the draft. Completed steps in the stepper are clickable; Back never validates. Every change is saved to local storage after a moment (Draft saved 3 s ago); a reload restores it with an alert and Start over, and photos that only lived in the page are dropped with a note. Discard asks before deleting a draft. On phones the wizard fills the screen under the shell's header, with the compact progress on top and Back / Continue pinned above the safe area. Under reduced motion steps crossfade and the check just appears.

Add to a project

npx wingo-ui@latest add post-listing-wizard

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

Dependencies

react-hook-formzodmotionlucide-reactaddress-inputalertalert-dialogbadgebuttoncategory-pickercurrency-inputfile-uploadform-wizardinputlisting-cardnumber-inputphone-inputradio-groupselectswitchtextareatoastuse-persisted-statecommercedate-utilsform-validationmotionnavigationrelative-timero-locationstonesui-config

Files

  • components/blocks/post-listing-wizard.tsx
  • components/blocks/post-listing-wizard-data.ts

See also

Marketplace ShellForm WizardCategory pickerFile UploadListing cardAddress InputListing Detail Page
PreviousOnboarding FlowNext Pricing Page