shadcn.io is not affiliated with official shadcn/ui
Open Mic Music Block for Ark UI
A board of fifteen ten-minute open-mic slots you pick from a keyboard grid, a form that books a name, act and length, a waiting list when the board is full, and an applause toggle for the act on stage.
Installation
Overview
Let performers sign up for a night, with this open-mic slot board for React with Ark UI. It holds Stoolside's Thursday in a hairline frame with a plus mark on each corner, and a side cell at the end. Fifteen ten-minute slots from 19:30 sit in a grid of five columns; each is a button that is Open, taken (initials and act), On stage or Done, and the whole grid is one tab stop you move through with the arrow keys, Home and End. Pressing an open slot picks it, and the form under the board takes a name, an act from a Native Select and a length of 5, 8 or 10 minutes. Take this slot is the one primary Shine Button. When the last open slot goes, the form becomes Join the waiting list and works out your position. The side cell shows who is performing and who is up next, and an Applause Toggle adds one clap once and takes it back. Undo gives a booking back. On a phone the board keeps five columns and the side cell stacks beneath it. For venues, societies and school events.
FAQ
How do I load my own evening?
Edit EVENING: each slot has an id, a time, and, when taken, a name, an act and a length of at most ten minutes. NOW is the index of the slot that is on stage, which sets what is Done, Now and Open, so the page looks the same at any hour. The counts, the initials, the side cell and the waiting list are worked out from that list.
What happens when the board is full?
Taking the last open slot turns the form into Join the waiting list: the button says so, and the line under the form says how many people are ahead of you. Joining adds you after the two typed entries and says you are third; the form locks, and Undo takes you off the list. The grid stays the same height whatever the state, so nothing jumps.
How do I use the grid from the keyboard?
Tab reaches the grid once, on the current cell. Arrow keys move one cell or one row, Home and End jump to the ends of a row, and Enter or Space picks the cell. A taken, current or done cell does not pick; the status line says who has it instead. Each cell is named with its time and state, such as "20:30, open", and the cell you pick is marked pressed. If you press the booking button with no slot picked, focus goes to the first open cell.
How does Applause work?
It is a toggle for the performer on stage. Pressing it adds one clap to the typed count and says so in the status line; pressing it again takes your clap back, so the count can never go up more than once per visitor.
What stays local, and how would I wire it?
Everything: bookings, the waiting list and applause live in the page, reset on a reload and are never sent. To make it real, send the booking from submit to your organiser's API, return the slot list on success, and keep Undo as a cancellation request.
How does it look on a phone?
The five columns stay at about fifty-seven pixels each with the time over the initials; names and acts show from the small breakpoint up. The form fields stack, the primary sits under the status line, and the Now performing, Up next and Waiting list cells follow the form.