Skip to content

shadcn.io is an independent project built on shadcn/ui

Pro

Event Sessions Product Card Block for Radix UI

Three open-air film nights as radio cells with seats-left meters, a sold-out night that cannot be chosen, a ticket stepper capped by the seats left, and a total with a $2 service fee a ticket.

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let people choose a night and a number of tickets before anything is charged with this event card for React with Radix UI. A hairline frame holds a drawn screen on a lawn and three screening nights as native radio cells. Each cell shows the date, the film, a seats-left meter and the count in words ("38 of 120 seats open"). Sunday is sold out and cannot be picked. A stepper built from two outline Buttons takes 1 to 6 tickets, capped by the seats left on the chosen night, and a description list adds the subtotal, a $2 service fee a ticket and the total from integer cents. One Shine Button holds the tickets, turns into "Held" and offers an Undo. For cinemas, festivals, talks and any event sold by the night.

FAQ

How do I change the nights and the seats?

Edit the NIGHTS array at the top of the file: each entry has a day label, an ISO date, the film, the capacity and the seats still open. A night with open: 0 is drawn as sold out and its radio is disabled. The price and the fee are PRICE_CENTS and FEE_CENTS, in integer cents.

What happens when I switch to a night with fewer seats?

The ticket count is clamped to the new cap at once, and the status line says how many seats are open. The plus button stays in the page with aria-disabled at the cap, so it is still reachable by keyboard and explains itself in the status line instead of vanishing.

What stays local, and how do I wire it for real?

Everything. The seats are typed, the hold is page state and nothing is stored, charged or sent. Replace the NIGHTS array with your availability endpoint and the body of hold with a call that reserves the seats and returns a hold you can show a countdown for.

Why native radios and not a radio group component?

Native radios give one Tab stop, arrow-key movement between the nights, and a free skip over the disabled one, with no extra code and the same markup on every target. The cell around each is styled with has-checked.

How does it look on a phone?

The figure comes first, the three nights stack as full-width cells, and the order cell sits below with its own top rule. Nothing is hidden and the status line keeps its height.

Is it accessible?

Each night is a labelled radio whose text includes the date, the film and the seats open, the meter is decoration, the drawing has one name, the totals are a description list, and the polite status line announces each change.

All 100 product cards blocks