shadcn.io is not affiliated with official shadcn/ui
Real Estate Sidebar Block for React
A lettings portal in a fixed-height window whose muted sidebar lists five saved searches, each with a bell toggle for alerts and a new-match count that shows only while alerts are on.
Installation
Overview
Watch saved searches without leaving the list with this real estate sidebar for React with Base UI. A window framed by a hairline with a plus mark on each corner holds a muted Sidebar for Lettinghall, an agency's lettings portal, with five saved searches. Each is a link that opens its matches and a bell Toggle that switches its alerts; a count of new matches appears beside the bell only while alerts are on, and a line under the list says how many searches have alerts on. The page lists the chosen search's matches as rows, each with a small greyscale house drawn from lines, the address, beds and rent, and the word New on fresh listings. Built from Sidebar, Toggle, Badge and Guides, with a CSS entrance only. For property portals, saved filters and any list where a row can be watched.
FAQ
How do the alerts work?
Each bell is a pressed Toggle named Alerts for and the search. Turning it on shows the number of new matches in a small count beside it and adds alerts on to the row's accessible name; turning it off removes both. The line under the list counts the searches with alerts on, and the status line says which one changed.
Where does the new-match count come from?
From the listings. Each match carries a fresh flag, and a search's count is the number of fresh matches, so adding or removing a fresh listing changes the count, the rows and the sentence above them together. The count is hidden whenever alerts are off, even though the page still marks the listing as New.
How are the houses drawn?
As SVG lines from a few typed paths for four styles: flat, terrace, detached and cottage. They are greyscale, hidden from assistive technology, and sit beside the address, so nothing depends on the picture.
What happens when the sidebar folds to icons?
Folded, the rail is five search icons with tooltips such as Orchard Row cottages (alerts on, 2 new). The bells and the counts are hidden while it is folded. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.
What stays in the page, and how do I connect it?
Everything. The searches and listings are typed at the top of the file and no alert is ever sent. Save the bell state to your account in the flip handler and let your matching service set the fresh flags. The rail links are SidebarMenuButtons with render set to an a element.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. The bells are inside it; choosing a search closes the sheet, pressing a bell leaves it open. The status line under the page says what happened, and the sheet carries its own copy of it while it is open.