shadcn.io is not affiliated with official shadcn/ui
Rental Management Chat Block for React
A landlord's inbox with a list of six open items across two units, a status word on each, a derived count, and a thread per item where a status menu posts a system line and recounts the list.
Installation
Overview
Show a landlord handling tenants in one place, with this rental management chat for React with Base UI. A hairline frame with a plus mark on each corner holds a wide window of fixed height for Leaseleaf, a landlords' app. The pane at the start is "Open items": six items across two units (a dripping tap, heating, a late rent, a lease renewal and two finished repairs), each with a status word in a Badge, the unit and the tenant, a Toggle Group that shows all of them or only those still going, and a derived line, "3 open, 1 scheduled". Opening an item shows your thread with that tenant as Message and Bubble rows. A Native Select in the thread's top bar sets the item to Open, Scheduled or Done, posts a system line such as "Marked Scheduled, Wed 14 Oct" and recounts the list. The composer's Shine Button, the only colored control, sends, and the frame is ruled by Guides. For a property manager, a repairs desk or any inbox of small jobs.
FAQ
What stays in the page, and how do I make it real?
Everything. The six items and their threads are typed in the file; a status change updates the list and adds a system line to the thread, and the tenants answer from a short script keyed on words such as "Wednesday", "rent" and "lease". Nothing is sent and no model runs. To make it real, save the status where changeStatus runs and append the tenant's messages to the same list as they arrive.
What does changing the status do?
It sets the item's status word, adds the system line to that thread only, recounts the sentence at the top of the list ("3 open, 1 scheduled") and the numbers on the Show toggle, and updates the status line under the composer. The line for Scheduled carries a fixed sample date.
What does the Open filter hide?
Items marked Done. The filter never changes the thread you have open, even when that item is Done, so a status change doesn't pull the page out from under you.
Why can't I send while a reply is typing?
Each item gets one reply per message of yours. While a tenant's typing line shows, Send answers "Wait for the reply first." so a reply is never lost, and switching to another item doesn't move it: the reply lands in the thread it belongs to.
Is it usable with a keyboard and a screen reader?
Each item is a native button, the open one is marked as current, and the status menu is a labelled native select. The log announces new lines once, and every message starts with a hidden "Dellan Pryce, 09:20" or "You, 09:05". Status is a word in every place, never a color.