shadcn.io is not affiliated with official shadcn/ui
Location Sharing Chat Block for Radix UI
A thread where a place button opens three typed places, choosing one posts a location card with a drawn map tile and pin, and a Show route toggle draws the path and the walk time on the tile.
Installation
Overview
Send a place instead of describing it, with this location sharing chat for React with Radix UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Hereabout, a meetup chat: the top bar names Kai Tanimura, and the log holds a location card from Kai with its route already drawn. The map button beside the field opens a tray of three places with their distances; choosing one posts a card in your bubble with a drawn greyscale map tile (streets, a park block, a pin at the place and a dot for you), the name and address, and a Show route Toggle that draws a dashed path on the tile and says how long the walk is. "Open in maps" is off and says so. The composer's Shine Button, the only colored control, sends text, and a Typing Indicator Text shows before the typed reply. The frame is ruled by Guides. It's the starting point for a meetup, delivery or ride chat.
FAQ
What stays in the page, and how do I make it real?
Everything, and your location is never read. The three places, their distances, walking times and routes are typed in the file; the map is a drawing. To wire it for real, send the chosen place (or the device's position, with the visitor's permission) with the message, draw the tile from your map provider's static image or a map component, and fill the route from a routing service.
How does the route toggle work?
Each card keeps its own toggle, so two cards can show or hide their routes independently. Pressing it draws or removes the dashed path on that card's tile and shows the walk time under the toggle; the line is always reserved, so the card never changes height. The change is announced in the status line.
How is the map drawn?
As one SVG in a fixed-height box: a muted ground, a canal, a park block and two weights of street, with the pin and your dot placed by percentages from the place's typed coordinates. It stays in the same left-to-right orientation in any language, and it is named for a screen reader with the place and the distance, not described line by line.
How does the composer work?
Enter sends and Shift and Enter add a line, which the field's description tells a screen reader; Enter during text composition (an IME) is left alone. The field grows with its content up to a limit, Send stays quiet while there is nothing to send and says so if pressed, and focus returns to the field after sending.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, so new messages are read out once, and every message starts with a hidden sender and time. The map tile is an image with the place and distance as its name, the tray is a named group of buttons, and the route toggle states whether it is on.