shadcn.io is not affiliated with official shadcn/ui
DJ Gig Schedule Profile Block for React
A DJ profile as upcoming gigs under month rules: venue, city, doors time in the city's own hours and genres on each row, a city menu and genre chips that narrow the list, sold-out nights with no ticket button, and an Add to calendar button that saves a real .ics file.
Installation
Overview
List a DJ's next nights and let a promoter save each one, with this DJ gig schedule profile for React with Base UI. A compact header holds the title, one sentence and a city menu, and the hairline frame under it opens on the DJ: initials, name, role and place, and a badge that says how many days away the next gig is from a fixed date. A row of genre chips narrows the list, a quiet "Clear filters" is always there, and the gigs sit under month rules (October 2026, November 2026 and so on): each row has a date tile, the venue and city, the doors time in that city's own hours with its offset from UTC, the genres, and two actions. A gig that is sold out says so in words and has no ticket button; the others have a "Tickets" button that says nothing is sold in this demo. "Add to calendar" is real: it saves an .ics file built from the gig's typed UTC time, so the hour is correct in any calendar. An unseen copy of the whole list holds the panel's height while a filter narrows it, and a filter with no gigs shows the empty state at that same height. It's built from Native Select, Download Trigger, Empty, Badge, Avatar and Guides. The DJ, the venues and the dates are invented (the cities are real places). For a DJ booking site, a touring artist's page or any profile with dated events.
FAQ
How do I fill it with my own gigs?
Edit GIGS in the Ark file: each gig has a venue, a city id, the doors time in UTC ("2026-10-24T19:00"), how many hours the night runs, its genres and whether it is sold out. CITIES gives each city its name and its offset from UTC in minutes, and the month groups, the local times, the filters and the badge are worked out from them. The cities here keep no daylight saving; if yours do, put their offset on the gig instead.
What is in the calendar file?
A plain-text iCalendar file with one event: a unique id, the start (the doors time in UTC, so every calendar converts it to the viewer's own zone), the end, a summary ("Lourdes Ekstrand at Cobalt Works"), the location and a description that gives the local doors time. The lines end in CRLF as the format asks, commas and semicolons are escaped, and the file is built in the browser and saved with a download link. Nothing is uploaded.
How do the filters work, and does the panel move?
The city menu and the genre chips combine: a gig shows if it is in the chosen city and has at least one of the chosen genres. Each change is spoken in the status line ("Showing 2 of 8 gigs in Lagos, Disco."), and "Clear filters" puts everything back; it is always on the page and says "No filters to clear." when there is nothing to clear. An unseen full copy of the list sits in the same grid cell, so the panel keeps its height, and a filter that matches nothing shows the empty state in that room.
What do Tickets and Sold out do?
A sold-out gig has the words "Sold out" where the button would be, and no link at all. The other gigs have a "Tickets" button that only says, in the status line, that no tickets are sold in this demo. In your app make it a link to your ticket seller, and mark a gig sold out in the data to remove it.
How does it look on a phone?
The date tile, the venue and the when line stay together at the top of each row and the two buttons drop under them, side by side. The genre chips wrap, the city menu sits under the sentence, and "Clear filters" stays at the end of the chip row. Everything is the same list at every width.
What stays local, and what is real?
The filters, the "Tickets" answer and the status line are local. The calendar file is the one real thing: pressing "Add to calendar" saves it to your device through the browser's own download. Nothing is sent, no tickets are sold, and the gigs are invented sample data. The genre chips are native checkboxes and the city menu is a native select, so they behave the same on every target.
Related
- Pro
A radio presenter profile as the station's weekly programme: Monday to Sunday by hour as a table of shows that span their hours, a line at the fixed now, the show on air named, a card for each picked show, and day tabs on a small screen.
- Pro
A music listener profile with top artists by range: a start cell with the listener and facts from the history, and a segmented control that re-ranks ten artists in place with plays, a share bar and the move against the period before as a sign and an arrow.
- Pro
A podcast host profile as a season grid: three seasons by up to ten episodes shaded in four weights by downloads or length, a triangle on each season's best, and a band with the picked episode's guest, date, length, downloads and its season's average.
- Pro
Animator Frame Scrubber Profile
Visual portfoliosAn animator profile as a frame scrubber: a drawn stage worked out from the frame number, a slider through 96 frames at 24 a second with the timecode and shot name, shots as buttons that jump to their first frame, and the credits.
- Pro
Architect Performance Targets Profile
Credentials and proofAn architect profile as performance targets: tabs for three projects, each with energy, carbon and daylight targets drawn as bars with a tick, the figure reached, and Meets or Misses in words with a glyph, beside a rating worked out from the targets met.
- Pro
Author Look Inside Profile
Writing and wordsAn author profile as a look inside: four books with drawn typographic covers, a read-only rating and an award badge, and a reading pane with a drop cap, a text size group and Next and Previous between two pages, beside a Follow toggle.