A now-showing section with a poster, film facts and a paper ticket where the visitor picks a date, a showtime and the number of seats. Booking tears the stub off and prints the row, seats and a barcode.
Now showing
A radio engineer on a storm-cut island hears her own voice on a frequency that went dark in 1986.
Directed by Mira Okafor · Rialto Hall · Screen 4
Date
Showtime
npx shadcn@latest add https://hyperblur.dev/r/cinema-now-showing.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cinema-now-showing.tsx.
import { CinemaNowShowing } from "@/components/hyperblur/cinema-now-showing"
<CinemaNowShowing price={12} currency="EUR" locale="pt-PT" onBook={(b) => checkout(b)} />| Prop | Type | Default | Description |
|---|---|---|---|
| film | { title: string; rating: string; runtime: string; genres: string; director: string; synopsis: string } | Salt & Static | Film shown beside the ticket. |
| venue | string | "Rialto Hall · Screen 4" | Venue line shown with the director and on the booked ticket. |
| dates | string[] | ["Fri 14", "Sat 15", "Sun 16", "Mon 17"] | Date options. |
| showtimes | { time: string; format: string; seatsLeft: number }[] | four showtimes | Showtime options. A showtime with 0 seats left is shown as sold out. |
| price | number | 14.5 | Price of one ticket. |
| currency | string | "USD" | ISO currency code used to format prices. |
| locale | string | "en-US" | Locale used to format prices. |
| maxTickets | number | 8 | Most tickets per order, also limited by seats left. |
| accent | string | "#ff5a36" | Color of the live label, the poster sun and the book button. |
| onBook | (booking: { date: string; time: string; format: string; quantity: number; total: number }) => void | undefined | Called when Get tickets is pressed. |
| headingAs | "h1" | "h2" | "h2" | Heading level of the film title. |