Seller card React component 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

Seller card 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 SellerCard from @/components/ui/seller-card.

import { SellerCard, type SellerData } from "@/components/ui/seller-card"

const mihai: SellerData = {
  id: "s-mihai",
  name: "Michael Reed",
  avatar: "/demo/mihai-ionescu.jpg",
  href: "/sellers/mihai-ionescu",
  type: "private",
  verified: { phone: true, identity: true },
  rating: 4.8,
  reviewCount: 126,
  memberSince: "2019-03-12",
  responseRate: 0.98,
  responseTime: 40,
  location: "Brooklyn",
  listingCount: 14,
  phone: "07700 900 •••",
}

export function ListingSidebar({ openChat }: { openChat: () => void }) {
  return (
    <SellerCard
      seller={mihai}
      callingCode="44"
      onRevealPhone={async () => {
        const response = await fetch("/api/listings/l01/phone", { method: "POST" })
        return (await response.json()).phone as string
      }}
      onMessage={openChat}
      listingsHref="/sellers/mihai-ionescu"
      labels={{ showNumber: "Reveal number", message: "Chat" }}
    />
  )
}

Props

• seller*
  SellerData

  The seller: { id, name, avatar?, href?, type?: "private" | "business", companyName?, cui?, agent?, verified?: boolean | { phone?, identity?, company? }, rating? (0 to 5), reviewCount?, memberSince?, responseRate? (0 to 1), responseTime? (minutes), lastSeen?: time | "online", location?, listingCount?, phone? }.

• variantdefault "card"
  "card" | "compact" | "inline"

  card: the side column of a detail page with stats, contact and listings. compact: avatar, name, rating, one stat and a chevron as one tappable row (the phone detail page). inline: a small avatar, the name, the verified mark and a star on one line, no surface.

• sizedefault "md"
  "sm" | "md" | "lg"

  Avatar 40 / 48 / 64px in the card, the type scale, paddings and the contact buttons (md in sm, 48px lg otherwise).

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

  The surface corner: 12 / 16 / 24px. The buttons and listing tiles inside follow it.

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

  The call button (solid) and the message button (soft of the same tone).

• colordefault ""
  string

  Any CSS color for the contact buttons; replaces the tone.

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

  The stars' fill. warning gives the classic amber stars.

• showStatsdefault true
  boolean

  The card's facts: private or business (with the tax id), what was verified, member since, reply time, response rate, place, last activity, listing count.

• showRatingdefault true
  boolean

  Stars, the value and the review count; a seller without reviews gets a "New seller" badge instead.

• showContactdefault true
  boolean

  The call and message buttons (SellerContactActions) in the card.

• showFollowdefault false
  boolean

  A Follow toggle in the card's header: icon only in a narrow card, with its label from 400px.

• defaultFollowingdefault false
  boolean

  Starts followed (uncontrolled). Use following + onFollowingChange to control it.

• following
  boolean

  The controlled follow state.

• onFollowingChange
  (following: boolean) => (void | Promise<unknown>)

  Called on every toggle. Return a promise: a rejection rolls the toggle back and announces labels.followError.

• onRevealPhone
  () => (string | Promise<string>)

  Show number fetches the full number (marketplaces log reveals). A spinner shows while it runs; a rejection returns the button to masked and says labels.revealError. Without it seller.phone is revealed on tap. The revealed number is kept per seller.id for the page's life, so a sticky contact bar shows it too.

• onCall
  (phone: string) => void

  Replaces the tel: link of the revealed number (open a call sheet, log the call).

• onMessage
  () => void

  The Message button. Without it and without messageHref there is no Message button.

• messageHrefdefault ""
  string

  Makes Message a link to the conversation.

• callingCodedefault ""
  string

  The country calling code for the tel: link: "44" turns 07700 900 123 into tel:+447700900123. Empty keeps the number as written.

• contactLayoutdefault "auto"
  "row" | "stack" | "auto"

  Call and Message side by side, stacked, or auto: stacked while the card is under 400px wide (a sidebar, a phone), side by side above.

• listings
  ListingData[]

  The seller's other listings (ListingData from listing-card), shown under the contact buttons.

• showListingsdefault true
  boolean

  The listings section, when there are listings.

• listingsHrefdefault ""
  string

  The "See all (14)" link beside the heading; the count is seller.listingCount.

• listingLayoutdefault "compact"
  "compact" | "grid"

  Compact listing rows, or a swipeable rail of small grid cards with one photo each (no carousel inside a carousel).

• maxListingsdefault 3
  number

  How many listings to show.

• listingsLoadingdefault false
  boolean

  Skeleton rows in place of the listings while they load.

• compactStatdefault "auto"
  "auto" | "lastSeen" | "memberSince" | "responseTime" | "location" | "listings"

  The one fact beside the rating in the compact row. auto: the last activity, else the reply time, the place, then member since.

• onSelect
  (seller: SellerData) => void

  Without seller.href, the compact row and the name become buttons that call it.

• now
  number | null

  The page's clock in ms for "Active 5 minutes ago". Defaults to a shared minute timer (useNow); null prints dates. A timestamp, so it stays out of the playground.

• linkComponent
  (props: LinkComponentProps) => ReactNode

  The router link for the name, the compact row, Message, See all and the listings. Defaults to the LinkProvider's, then <a>.

• localedefault ""
  string

  Numbers, dates and relative times. Empty uses the UIProvider locale, then the browser's.

• labels
  Partial<SellerCardLabels>

  Every string, English by default (DEFAULT_SELLER_CARD_LABELS): verified, verifiedIdentity, verifiedPhone, verifiedCompany, business, private, newSeller, memberSince(date), responseRate(percent), responseTime(text), withinHour, withinDay, online, lastSeen(text), listings(n, formatted), reviews(n, formatted), rating(value), agent(name), cui, call, callSeller(name), showNumber, revealNumber(name), message, messageSeller(name), copyNumber, copiedNumber, revealed(phone), revealError, follow, following, followError, otherListings, seeAll(n, formatted), loadingListings, the hidden stat names (statType, statVerification, statMemberSince, statResponseTime, statResponseRate, statLocation, statActivity, statListings, statAgent) and listing (forwarded ListingCardLabels).

• classNames
  Partial<Record<"header" | "avatar" | "name" | "verified" | "type" | "rating" | "stats" | "stat" | "contact" | "call" | "message" | "follow" | "listings", string>>

  Extra classes for the inner parts.

• className
  string

  Extra classes for the root, merged last.

Parts

FAQ

Used in

More React commerce components