shadcn.io is not affiliated with official shadcn/ui
Buy Rent Switch Real Estate Navbar Block for Radix UI
A navbar for a home-search portal in cells on shared hairlines: a Buy / Rent switch that rewrites the search placeholder and the price options, a live count of matching homes, and a heart with saved homes.
Installation
Overview
A navbar for a property portal in React with Radix UI. The wordmark of Lintelmoor, a home-search portal, leads, and the bar's controls sit in cells on shared hairlines whose dividers meet the top rule with + marks. The first cell is a Buy / Rent switch: choosing Rent changes the location field's placeholder to "Where do you want to rent?" and swaps the price select from totals (up to $400,000) to monthly figures (up to $1,500 a month), starting it over at "Any rent". Beside the select a count says how many of the portal's homes match the mode, the place you typed and the price, and a polite status says it once typing settles. A heart shows how many homes are saved and opens a popover with them, each with a remove button; Agents and Mortgage, and a List a property Shine Button, close the row. Below lg a search button opens a sheet from the top with the same switch, field, select and count, and a menu button opens another with the links and the action. It's built from Toggle Group, Input Group, Select, Popover, Badge, Navigation Menu, Sheet, Shine Button and Guides. The homes and figures are example data. For property search sites with one search and two ways to use it.
FAQ
How do I use my own listings?
Edit HOMES at the top of the file (a street, an area, a price to buy and a rent a month), BUY_PRICES and RENT_PRICES for the select's options, and MODES for the labels and placeholders. The count reads HOMES; replace countOf with your own search call and keep the rest. The homes, prices and areas here are invented example data, not real listings.
Why does the price start over when I switch to Rent?
A cap of $600,000 means nothing as a monthly rent, so choosing the other mode resets the select to its "any" option. The options come from pricesOf(mode), and the select keeps one width so nothing in the bar moves when the labels change. Every figure is written for a left-to-right reading order, so a currency sign never jumps in right-to-left layouts.
How is the count announced?
It is visible next to the select and is not itself a live region. A hidden polite status says "4 homes to buy." about 600 milliseconds after you stop changing anything, and never when the page loads, so typing a place doesn't read out every letter.
How do the saved homes work?
The heart is one button, named "Saved homes, 2", that opens a popover with the homes and a remove button on each. Removing one lowers the count in the bar and moves focus to the remove button that took its place, or to the empty message after the last. Nothing is stored: the list resets when the page reloads. The popover isn't modal: Escape or a click outside closes it and puts focus back on the heart.
How does it work on a phone?
Below lg the cells fold away: the bar shows the wordmark, the heart, a search button and a menu button. The search button opens a sheet from the top with the switch, the field, the select and the count, closing with "See the homes"; Escape or the close button puts focus back on the search button. The links and List a property wait in the menu sheet. The sheets fit at 320 pixels.