pnpm add @wandercom/design-system-web

The SearchBarFallback renders a static placeholder that visually matches the SearchBar's empty state. Wrap the real SearchBar in a Suspense boundary with the fallback to avoid layout shift during loading. By default the composed fallback establishes a 65rem (1040px) query container and switches layout from its own available width. Pass inheritContainer when its matching SearchBar follows an ancestor container.

import { SearchBarFallback } from '@wandercom/design-system-web/ui/search-bar-fallback';
import { SearchBar } from '@wandercom/design-system-web/ui/search-bar';
import { Suspense } from 'react';

export function Example() {
  return (
    <Suspense fallback={<SearchBarFallback />}>
      <SearchBar />
    </Suspense>
  );
}

The example renders the live SearchBar empty state and the fallback at the same available width so desktop and mobile alignment can be compared directly.

Accepts all standard div element props.

SearchBarFallbackDesktop and SearchBarFallbackMobile are lower-level exports. When rendered independently, place them beneath an @container ancestor if their responsive visibility should adapt to a parent width.

Accepts all standard div element props.

Accepts all standard div element props.

All visible text can be customized via props to support localization:

<SearchBarFallback
  locationPlaceholder="Où ?"
  datesPlaceholder="Quand ?"
  guestsPlaceholder="Combien ?"
  searchLabel="Rechercher"
  mobilePlaceholder="Commencer la recherche"
/>

This component renders static HTML with no client-side JavaScript, hooks, or state. It works as a React Server Component. At container widths of 65rem (1040px) and wider, it shows a pill-shaped bar with location, dates, and guests placeholders plus a search button. Below that width, it shows a centered pill with a search icon and placeholder text. All copy is customizable via props with sensible English defaults.