Blocks
v1.0.0Added in 1.0.0
The Northwind Market site layout: a header with one search for what and where, a category strip, the footer, phone tabs and cookie consent.
On desktop the header holds the logo, one joined search box and the actions. Type in the query field (press / to focus it): while it is empty it lists your recent searches (remove one with its x or Delete, or clear them) and the popular ones; while typing it suggests categories (Mobile phones, in Electronics › Phones) and matching listings; arrows and Enter pick one. The location field filters the Romanian cities without diacritics and offers All locations and Near me (your position when the browser allows it, else your own city). Enter or Search submits the query, the place and the category; a category chip in the box scopes the search and its x removes it. Favorites and messages carry counts, the avatar opens the account menu (my account, listings, favorites, messages, settings, the theme and sign out), and Post a listing starts a new listing. The category strip below scrolls sideways with edge fades and marks the active category. Once the page scrolls the header gains a hairline and a soft shadow. Below 768px the header is a compact row: the logo mark, a search field that opens a full height sheet (autofocused input, the location as a row that opens its own sheet, recent searches with remove buttons, popular searches and category tiles; Escape, the handle or Cancel closes it) and the avatar. A bottom tab bar holds Home, Search (opens the sheet), the raised Post action, Messages with its count and Account. The minimal variant keeps only the logo, a back or close button and a trust note. The cookie banner shows until the visitor decides and sits above the tab bar; Cookie settings in the footer reopens its settings. The skip link (Skip to content) is the first stop for keyboard users.
npx wingo-ui@latest add marketplace-shellPro item: the CLI needs a Pro account. See plans