shadcn.io is not affiliated with official shadcn/ui
Venue Finder Music Block for React
A drawn map of ten live venues with real-button pins, a two-thumb capacity slider, genre and sort controls, and a list that stays in step with the pins, with a line that counts the venues in range.
Installation
Overview
Let artists and promoters shortlist rooms, with this venue finder for React with Base UI. A toolbar band holds a two-thumb Slider over twelve capacity steps from 100 to 20,000, a Toggle Group of genres and a Native Select to sort. Below it a drawn map of the city of Kellmouth (shapes, never a real map) carries a pin for every venue in range, each a real button sized by the room, and the list beside it holds the same venues with name, quarter, capacity, upcoming shows, rating and genres. Pressing a pin picks its row and scrolls the list to it; pressing a row picks its pin. A line works out "6 venues between 300 and 1,500", and a range with nothing in it shows an Empty state while the map and the list keep their height. On a phone the map sits above the list. For booking agents, tour planners and city guides.
FAQ
How do I load my own venues?
Edit VENUES: each has an id, two-letter mark, name, quarter, capacity, genres, shows, a rating in tenths and the pin's x and y in percent. The capacity steps are the CAPS list. The count, the order, the pins and the rows are all worked out from the same filtered list. To use a real map, replace CityMap with your map component and keep the pins and the list, which carry the same facts.
How do the pins and the list stay in step?
Both read one picked venue. A pin press stores the venue and a turn counter, and an effect scrolls the list region to that row without moving the page; a row press stores the venue and the pin takes the filled look. When a filter hides the picked venue, nothing is picked, so no hidden row or pin keeps the highlight.
How do the capacity and genre filters combine?
A venue shows when its capacity is between the two thumbs and, if any genre is on, it plays at least one of them. No genre picked means all genres. Pins that fall out of range stay in place but are hidden and cannot be focused, so nothing on the map jumps, and the status line speaks the new count once you let go of the slider.
How do I use it from the keyboard?
Each thumb of the slider takes the arrow keys, Home and End, and says its size, such as "Largest room, 1,500 people". The genre group is one tab stop with arrow keys; the sort is a native select. Every pin is a button named with the venue and its capacity, and every row is a button, so the map is never the only route. The list is a scroll region the keyboard can reach even when it is empty.