shadcn.io is not affiliated with official shadcn/ui
Tour Dates Music Block for Ark UI
A tour page table of fourteen autumn dates grouped by month, with a region group, a Hide sold out switch, a price slider, a Remind me toggle on every row and a status in a glyph and a word.
Installation
Overview
Let fans see where a band plays next, with this tour dates table for React with Ark UI. It holds fourteen Dovecote Static dates in a hairline frame with a plus mark on each corner, under a toolbar of a Toggle Group for the region (All, Europe, Americas, Asia), a Switch that hides sold out dates and a Slider for the highest lowest ticket price. Each row, grouped under October, November and December, has the date, the city and venue, a status in a glyph and a word (On sale, Few remaining, Sold out or Announced) with the price range, a Toggle named for the show that sets a reminder, and a Tickets Button that says no tickets are sold in this demo. The heading counts the reminders and the foot works out "14 dates, 12 cities, 3 sold out" from the rows that show. The table sits in a fixed scroll region, so filtering never changes the panel's height, and a filter that leaves nothing shows an Empty state. On a phone each date folds the status under the city. For artist pages, label sites and venue listings.
FAQ
How do I load my own tour?
Edit SHOWS: each date has an id, an ISO iso date, city, venue, a region (europe, americas or asia), a status and the lowest and highest ticket price in dollars (0 for both until the date is announced). The weekday, the month bands, the counts in the foot and the filter results are all worked out from that list, so nothing is typed twice. Dates are never read from the clock, so the page looks the same on every day.
How is a status shown without colour?
Every status is a glyph and a word: a ticket for On sale, a clock for Few remaining, a ban mark for Sold out and a calendar for Announced. No status takes a colour: the glyph and the words carry the meaning, so the table reads the same in greyscale. The price line under it says Price to come until a date is announced.
How do the filters work?
The region group, the switch and the slider combine: a date shows when it is in the region, is not sold out while Hide sold out is on, and its lowest ticket is at or under the slider. Announced dates have no price yet and always pass the price filter. Month bands with no rows disappear, the foot is worked out again, and the status line says how many dates show once you let go of the slider.
Do reminders and tickets do anything?
Reminders are local: the Remind toggle keeps a list in the page, the heading counts it and the status line says so, but nothing is stored or sent. Tickets says that no tickets are sold in this demo. To make them real, send the reminder to your own list service in remind and point Tickets at your ticket seller's page for that date.
How do I use it from the keyboard?
Tab through the region group, the switch and the slider (arrow keys move the slider), then into the table region, where each row has its Remind toggle and its Tickets button in order. The region group is one tab stop with arrow keys between its items. Each Remind toggle is named for its show, such as "Remind me: Leeds, Thu 22 Oct", and the table has a caption and column names for a screen reader.
How does it look on a phone?
The date, city and venue stay on the first line, the status and price drop under the city, and the Remind toggle shrinks to its bell above the Tickets button. The region group becomes a row of four equal buttons and the slider takes the full width. The scroll region keeps its height, so the page doesn't move when a filter changes.