shadcn.io is not affiliated with official shadcn/ui
Festival Lineup Music Block for React Aria
A three-day festival timetable with four stages, sets placed by time, a My schedule you build by pressing sets, and a clash line that names the two sets that overlap and the half hour they share.
Installation
Overview
Let festival goers plan a weekend, with this lineup timetable for React with React Aria. Tabs choose Friday, Saturday or Sunday, and the day is a grid in a hairline frame with a plus mark on each corner: four stages as rows (Main stage, Barn, Greenhouse, Late tent), time as columns from 14:00 to 01:00 in half hours with an hour line, and every set a button placed with literal column classes. The headliner is semibold with an outline and a wide set shows its genre. Pressing a set adds it to My schedule and pressing it again takes it off. When two saved sets overlap on a day, both are marked Clash in a glyph and a word, and the band under the grid reads, for example, "3 sets, 1 clash: Tallow Saints and Mothlight Choir overlap 21:00 to 21:30". A held-height list shows the saved sets and an Empty state when there are none. Clear leaves an Undo. On a phone the grid gives way to a list per stage with the same toggles. For festival sites, event planners and line-up pages.
FAQ
How do I load my own lineup?
Edit LINES: each line is day|stage|artist|genre|start|length|headliner, where start and length count half hours from 14:00. They are parsed once at module scope into typed sets, and the column classes come from the literal lists COL_START and COL_SPAN, so the style sheet knows every column a set can take. Add a stage by adding it to STAGES and the lines that use it.
How is a clash worked out?
Two saved sets clash when they are on the same day and one starts before the other ends. The first clash is named in the line under the grid with the half hours they share, and a further one adds "and 1 more". The clash mark is a warning glyph and the word Clash, shown only on sets that are saved, so it never rides on colour. Taking one set off clears the mark on the other.
How do I use it from the keyboard?
The day tabs are one tab stop with arrow keys between them. Every set is a native button with a pressed state, so Tab, Enter and Space work in the grid and the phone list, and a set's name includes its stage and time, for example "Tallow Saints, Main stage, 20:00 to 21:30". The grid scrolls sideways in its own region when the panel is narrower than the timetable.
What stays local, and how would I save a schedule?
The schedule lives in the page and resets on a reload; nothing is sent. To keep it, store the list of set ids in toggle and clear in your own account or in local storage, and start saved from it. Undo only goes back one Clear, which is the one change that is hard to redo by hand.
How does it look on a phone?
Below the medium width the timetable is replaced by a list for each stage, each row showing the start time, the act with its genre and end time, and an Add or Added word. The same state drives both, so a set added on a wide screen is Added on a phone. The My schedule band keeps its height and its saved sets scroll inside it.