Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Map blocks

Pro

Community Events Map Block for React

A neighbourhood noticeboard of eight events beside a drawn village map; a Going toggle takes a spot, the spots free re-derive and each pin's ring fills as its event fills.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let neighbours say they are coming with this community events board for React with Base UI. Hollybush, a neighbourhood noticeboard app, draws eight events on a street map of an invented village and lists the same eight beside it in date order. Each row has a "Going" Toggle that takes one spot: the spots free are the capacity minus the others already going minus you, and the ring on the event's pin fills as it fills. Type is shape, a circle for a market, a square for a class, a diamond for a clean-up and a triangle for a talk, and an event you are going to inverts its pin. A full event you are not going to disables its toggle and says "Full". The foot says "You are going to 2 events" and nothing is sent. Pressing a pin marks its row and scrolls the board inside its own box, never the page. For village halls, residents' associations, libraries and any community calendar.

FAQ

How are the spots free worked out?

freeOf takes the event's capacity, subtracts the people already going (taken, typed in the data) and one more when you are going. The ring on the pin uses the same number as a share, drawn as a circle with pathLength set to 100 so the dash length is the percentage. Nothing is stored twice.

Is anything told by colour alone?

No. The type of event is a shape, the ring is a length, an event you are going to is inverted, and every state is in words in the board: the kind, the date, "6 spots free of 25" or "Full". The pins themselves are decoration, hidden from assistive technology.

Can I use it without a mouse?

Yes. Each row has a name button that marks the event on the map and a labelled Going toggle ("Going: Repair cafe") that takes Space or Enter. A polite status line in the foot gives the count of events you are going to.

How do I use my own events?

Edit EVENTS: a name, a kind, an ISO date and time, a capacity, the spots already taken and a position in the drawing's 480 by 360 units. The dates are written from the ISO strings with Date.UTC arithmetic, so nothing reads the clock.

What stays local in the demo, and how do I wire it up?

All of it. Going is local state that resets on reload, no spot is held anywhere and no one is told. In your app make the toggle call your RSVP endpoint, return the new count from the server, and handle a full event by refreshing the row.

How does it look on a phone?

The map comes first, the noticeboard stacks under it in a scrolling box of fixed height with its own rule, and the status line sits at the foot. Toggles keep a 32 pixel height and the name button is the row's other control.

All 100 map blocks