Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CRUD blocks

Pro

Event Manager CRUD Block for Radix UI

A meetup organiser's desk: three events beside the chosen event's guest list, a quick line that adds a guest, an RSVP select per guest, a waitlist that promotes the first person in line when a seat opens, and one Undo for both changes.

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

Run a small event with seats and a waiting list, with this event manager for React with Radix UI. A hairline frame with a plus mark on each corner puts three events at the start, each with its date and "8 of 8 going", and the chosen event at the end. The event's title edits where it sits with an Editable, and its date takes a day after the fourteenth of October. A quick line, an Input with the one Shine Button, adds a guest on Enter, and every guest has an RSVP in a Native Select: Going, Maybe or No. Seats are counted from the list: once the capacity is reached the next guest to say Going reads "Waitlist 1", and when someone with a seat says No or is removed, the first in line moves up and the foot says so by name. One Undo puts both changes back. The guest list is a frame of fixed height with an Empty state, and the bands are ruled by Guides. For meetups, classes, workshops and any list with a limit.

FAQ

How do I fill it with my events and guests?

Edit EVENTS (an id, a title, an ISO date and a capacity) and START_LINES (event, name and RSVP, in the order people joined). The seats and the waitlist are never typed: a guest holds a seat if they said Going and are among the first capacity who did, in joined order.

How does the waitlist move up?

Because seats come from the order, removing a Going guest or changing them to No or Maybe simply lets the next Going guest in line count among the first few. The block compares who held a seat before and after, and the foot names the people who moved ("Zainab Mortlock moved off the waitlist"). Changing a Maybe to Going when the event is full adds them to the end of the waitlist.

How do I rename an event or change its date?

Press the title or Edit, type, and press Enter to save or Escape to go back; an empty title is refused and the old one stays. The date uses the browser's date field, and a day on or before the fourteenth is refused with the reason under it.

What does Undo reverse?

Adding a guest, a change of RSVP and a removal, each as one step, together with any promotion that came with it. Renaming and re-dating are not part of Undo; edit them again to change them back.

What stays local, and how do I wire a real save?

Everything lives in state in this tab and a reload restores the first list; nobody is emailed. In your app call your API from add, rsvp and remove, and let the server decide the seats with the same rule so two people can't both take the last one.

How does it look on a phone?

The events stack above the chosen event, three short rows. Each guest's RSVP and remove button sit under their name, and the guest list scrolls inside its frame so the quick line stays on screen.

All 100 crud blocks