shadcn.io is not affiliated with official shadcn/ui
Events With Ticket Tiers Organiser Profile Block for React Aria
An event organiser profile with upcoming and past events, three ticket tiers on every event as bars of sold against cap, a speaker line-up that opens in place, and a switch that adds the past events without moving the page.
Installation
Overview
Show what an organiser has on sale, tier by tier, with this event-organiser profile for React with React Aria. A compact header holds the title, one sentence and a Switch that adds the past events, and the hairline frame under it opens on the organiser: initials, name, role, place and a badge with the tickets sold and the share of capacity across the events shown. Each event is a row with its day, name and place and three tier bars (Early, General and Late) drawn with Progress: sold against cap in figures, or the words Sold out. A Collapsible opens the speaker line-up as initials and names. The list is laid over an unseen copy of the full list, so flipping the switch never changes the height of the panel. The tickets sold, the capacity share and the polite status line are worked out from the tiers of the events shown. Nothing is sold. The organiser, the events, the speakers and every figure are invented samples. For an events platform, a conference page or any profile that shows what is selling.
FAQ
How do I fill it with my own events?
Edit EVENTS: each has a day, a name, a place, three tiers with their cap and what was sold, and a line-up of speakers. An event is past when its day is before AS_OF, a fixed day; set it from the server's date when you wire it up. The tickets sold, the capacity share and the Sold out words are worked out from the tiers.
How is the capacity share worked out?
It is the tickets sold across the events shown divided by their total capacity, rounded to a whole percent, and it moves when you add the past events. Each tier bar is that tier's sold against its own cap, and a tier at its cap reads Sold out in words as well as in the bar.
Why does the page not move when I show the past events?
The visible list sits over an unseen copy of the full list in one grid cell, so the cell is always as tall as the longest list. Rows you open still grow the panel, as a disclosure should, but flipping the switch does not.
What stays local in the demo?
All of it: the events, the tiers and the sales are typed examples and nothing is sold or sent. In your own app read the tiers from your ticketing system and refresh them on an interval, and keep the sold-out rule on the server.
Is it accessible, and how does it look on a phone?
The switch has a visible label, each event heading is a button that opens its line-up, the tier bars are decoration with their figures as text, and the status line is a polite live region present from the start. On a phone the badge hides, the tier rows keep their labels and figures, and the rows stack. Counts and names keep their reading order in a right-to-left page.