Skip to content
UI Kit
Accent color

Cinema

For cinemas, open air screens and film clubs. Showtimes by day, a seat picker for the hall, a film page, coming soon with reminders and prices.

5 variants
Switch category

Cinema

Showtimes

Seven days as tabs, each film with poster, rating and its times. A thin line under every time shows how full the show is, sold out ones stay visible.

Open in Studio

Seat picker

The hall under a glowing screen, rows rise in one by one. Pick seats by tap or arrow keys, premium rows tinted, the total glides and seats show as chips.

Open in Studio

Film page

A dark band with the still behind, the poster scales in, title, synopsis, director and cast, a trailer button and the next shows.

Open in Studio

Coming soon

Posters in release order with the date on top and the days left. A reminder per film, the bell pops to a check.

Open in Studio

Prices

Prices by day and seat in one table, the cinema day in the accent. On phones the days become tabs, rows rise in when scrolled to.

Open in Studio

Details

What Cinema brings along, read from the registry and the source.

Area
Industries
Variants
5
Version
1.0.0 · since 1.1.0
File
components/ui/cinema.tsx
Brings along
utilskitbuttoniconrevealsectionmotion
npm packages
None
Languages
English and German, 32 texts of its own
Studio
All 5 variants editable
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The CinemaProps interface from components/ui/cinema.tsx, with the comments from the code.

  • variantoptional
    CinemaVariant

    showtimesseat-pickerfilm-detailcoming-soonprices

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • filmsoptional
    CinemaFilm[]
  • daysoptional
    string[]

    showtimes: the days to show, YYYY-MM-DD, the first one is today

  • planoptional
    string[]

    seat-picker: rows as strings, one character per seat: s seat, x taken, w wheelchair, space aisle, the first rows nearest the screen

  • rowCategoryoptional
    string[]

    seat-picker: category per row index, from the categories list

  • categoriesoptional
    CinemaSeatCategory[]
  • maxSeatsoptional
    number
  • initialSeatsoptional
    string[]

    seat-picker: seats picked at the start, as "row-seat" with zero based row and one based seat, e.g. "5-6"

  • showoptional
    { film: string; when: string; hall: string }

    seat-picker: the show, e.g. film and time

  • filmoptional
    CinemaFilm

    film-detail: the film in focus

  • backdropoptional
    React.ReactNode

    film-detail: a wide still behind the facts

  • priceRowsoptional
    { label: string; prices: number[]; note?: string }[]

    prices

  • priceColumnsoptional
    string[]
  • surchargesoptional
    { label: string; price: number; icon?: IconName }[]
  • todayoptional
    string

    coming-soon: the day to count from. Defaults to the browser date.

  • currencyoptional
    string
  • onBuyoptional
    (data: Record<string, string>) => void

Built-in texts

Cinema writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 32 texts
dayEnglish DayGerman Tag
todayEnglish TodayGerman Heute
minEnglish {n} minGerman {n} Min.
ageEnglish Age {n}German FSK {n}
soldEnglish Sold outGerman Ausverkauft
fewEnglish Few seatsGerman Wenige Plätze
hallEnglish Hall {n}German Saal {n}
screenEnglish ScreenGerman Leinwand
seatsEnglish SeatsGerman Plätze
takenEnglish TakenGerman Belegt
chosenEnglish Your seatsGerman Deine Plätze
wheelEnglish Wheelchair spaceGerman Rollstuhlplatz
rowEnglish Row {r}German Reihe {r}
seatEnglish Row {r}, seat {n}German Reihe {r}, Platz {n}
pickNEnglish Pick up to {n} seatsGerman Wähle bis zu {n} Plätze
noneEnglish No seats picked yetGerman Noch keine Plätze gewählt
totalEnglish TotalGerman Gesamt
buyEnglish Buy {n} ticketsGerman {n} Tickets kaufen
buyOneEnglish Buy 1 ticketGerman 1 Ticket kaufen
clearEnglish ClearGerman Zurücksetzen
trailerEnglish Play trailerGerman Trailer abspielen
directorEnglish DirectorGerman Regie
castEnglish CastGerman Mit
nextEnglish Next showsGerman Nächste Vorstellungen
notifyEnglish Remind meGerman Erinnern
notifiedEnglish Reminder setGerman Erinnerung gesetzt
releaseEnglish In cinemas {date}German Im Kino ab {date}
inDaysEnglish in {n} daysGerman in {n} Tagen
weekdayEnglish Monday to ThursdayGerman Montag bis Donnerstag
cardEnglish With the bonus cardGerman Mit Bonuskarte
extrasEnglish SupplementsGerman Zuschläge
freeEnglish FreeGerman Kostenlos

Accessibility

Read from the source of the component.

  • Cinema handles the keys Arrow up, Arrow down, Arrow left, Arrow right and Space itself.
  • Sets aria-disabled, aria-label, aria-live, aria-pressed and aria-selected, so screen readers announce purpose and state.
  • Uses the roles grid, gridcell, row, rowheader, tab and tablist.
  • Announces changes through a live region without moving focus.
  • Adds text for screen readers where icons and graphics stand alone.
  • Shows a visible focus ring when used with the keyboard.
  • The server renders the starting state in full, JavaScript only adds the interaction.

Motion

  • Rises in briefly the first time it comes into view (kit-rise, useInView).
  • Moves with the scroll, its progress follows the position on the page.
  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 5 places in the code switch motion off then.

Frequent questions

How do I install Cinema?

With aiw add @ai-website/cinema. The command puts components/ui/cinema.tsx into your project, the code is yours from then on. It brings along button, icon, reveal, section and motion. It needs no further npm packages.

Which variants does Cinema have?

5 variants, Showtimes, Seat picker, Film page, Coming soon and Prices. You pick one with the variant prop, for example variant="seat-picker".

Can I translate the texts of Cinema?

Yes. Cinema carries 32 texts of its own in English and German, such as “Day”, “Today” and “Sold out”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Cinema?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Cinema with aiw_components and install it with aiw_add @ai-website/cinema. Name the variant in your prompt, for example variant="showtimes", and the assistant writes your content straight into the props.

Can I adjust Cinema without code?

Yes, in the Studio. All 5 variants are editable there, texts, lists and switches. The Studio writes the matching Cinema code to copy.

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Cinema on a page.

Often searched

Jump to

Copied to the clipboard