Post Listing Wizard 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

Post Listing Wizard 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 PostListingWizard from @/components/blocks/post-listing-wizard.

// app/(market)/post-ad/page.tsx (the shell lives in the layout with variant="minimal"; mount <Toaster /> once there)
"use client"

import { useRouter } from "next/navigation"
import { PostListingWizard } from "@/components/blocks/post-listing-wizard"

export default function PostAdPage() {
  const router = useRouter()
  return (
    <PostListingWizard
      user={{ name: "Emma Carter", phone: "+40745123456", email: "emma.carter@acme.com", locality: "Cluj-Napoca" }}
      onUpload={async (file, { signal }) => {
        const body = new FormData()
        body.append("photo", file)
        const response = await fetch("/api/photos", { method: "POST", body, signal })
        return response.json() // { url }
      }}
      onPublish={async (draft) => {
        const response = await fetch("/api/listings", { method: "POST", body: JSON.stringify(draft) })
        if (!response.ok) throw new Error("We could not publish your ad. Please try again.")
        return response.json() // { id, url }
      }}
      onCancel={() => router.push("/")}
    />
  )
}

Props

• categories
  CategoryNode[]

  The category tree (POST_LISTING_SAMPLE.categories: the 12 marketplace categories with their subcategories and counts). Only leaves can be picked.

• attributes
  Record<string, CategoryAttributeDef[]>

  The Details fields per leaf category id (POST_LISTING_SAMPLE.attributes: Bicycles, Mobile phones, Apartments). CategoryAttributeDef = { id, label, type: "select" | "text" | "number", options?, required?, unit? }.

• priceHints
  Record<string, { min: number; max: number }>

  Similar ads' price range in RON per category id, shown under the price (POST_LISTING_SAMPLE.priceHints: Bicycles 900 to 1,500 RON).

• draft
  ListingDraft

  The ad being written, controlled; pair it with onDraftChange. ListingDraft = { category, categoryPath, title, condition, attributes, description, photos: UploadFile[], priceType, price, currency, location: { county, locality, address?, showExact }, contact: { name, phone, hidePhone, chatOnly }, delivery }.

• defaultDraft
  ListingDraft

  The starting draft, uncontrolled. Default: an empty ad with the contact and the place taken from user (createEmptyListingDraft). POST_LISTING_SAMPLE.draft is the filled l01 bike.

• onDraftChange
  (draft: ListingDraft) => void

  Every change to the draft.

• step
  PostListingStep

  The current step, controlled; pair it with onStepChange.

• defaultStepdefault "category"
  "category" | "details" | "photos" | "price" | "location" | "contact" | "preview"

  The starting step; the steps before it count as done. The playground fills the l01 bike for every step past the first.

• onStepChange
  (step: PostListingStep) => void

  Called with the new step on every change.

• user
  { name: string; phone: string; email: string; locality: string }

  The signed-in seller: prefills Contact and the place, shows the email read only (POST_LISTING_SAMPLE.user: Emma Carter, +40745123456, emma.carter@acme.com, Cluj-Napoca).

• persistKeydefault "post-listing-draft"
  string

  Local storage key of the autosaved draft and step; "" keeps it in memory. The demo uses demo:post-listing and a Delete draft button in the header.

• maxPhotosdefault 8
  number

  The most photos an ad takes; more are rejected with the upload's message.

• requirePhotodefault true
  boolean

  Fotografii needs at least one photo to continue.

• promotions
  { id: string; label: string; price: number; description?: string; featured?: boolean }[]

  The promotion offer after publishing (POST_LISTING_SAMPLE.promotions: No promotion, 7 days 29 RON, 30 days 79 RON Most popular, Auto refresh 15 RON). [] hides it.

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

  Publish ad, View ad and Promote (brand in the examples).

• onUpload
  (file: File, context: { signal; onProgress }) => Promise<unknown>

  Uploads one photo; resolve with { url } so the photo shows after its step and survives a reload. Default: a pretend 1,2 s upload with progress that resolves with an object url.

• onPublish
  (draft: ListingDraft) => Promise<{ id: string; url: string }>

  Publishes the ad. The button spins while it runs; a rejection shows its message in an alert and keeps the draft. Default: a pretend 1,2 s request.

• onPromote
  (promotion: PostListingPromotion, listing: { id; url }) => (void | Promise<unknown>)

  Buys the chosen package. A rejection shows its message. Default: a pretend request, then a toast.

• onCancel
  () => void

  After Discard deleted the draft (leave the page here). Default: a toast.

• defaultPublished
  { id: string; url: string } | null

  Opens on the success view for defaultDraft, as if it had just been published (the promotion example).

• labels
  Partial<PostListingWizardLabels>

  Every visible string (DEFAULT_POST_LISTING_WIZARD_LABELS, Romanian), counted ones as functions; nested validation, categoryPicker, fileUpload, addressInput, phoneInput, currencyInput and listingCard for the composed items. POST_LISTING_WIZARD_LABELS_EN is the English set.

• localedefault "en-US"
  string

  Intl locale for prices, counts, sizes and dates.

• currencydefault "RON"
  string

  The empty draft's currency; the price field switches between RON and EUR.

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

  The stepper, Continue, the selected category, radio cards, switches and upload progress.

• radiusdefault "md"
  "sm" | "md" | "lg"

  The form panel 12 / 16 / 24px, its tiles, the radio cards, the photo tiles and the listing cards.

• loadingdefault false
  boolean

  The stepper and the category tiles as skeletons.

• animateIndefault true
  boolean

  The header and the form rise in once when the page mounts on the client (never over server HTML, never with reduced motion).

• linkComponent
  (props: LinkComponentProps) => ReactNode

  The router link for View ad and the terms. Default: the provider's (the shell's), then <a>.

• className
  string

  Classes for the root.

• classNames
  Partial<Record<"header" | "panel" | "wizard" | "success" | "promote", string>>

  Classes for the parts.

Parts

FAQ

More React blocks