Zum Inhalt springen
UI Kit
Accent

Kino

Für Kinos, Open-Air-Leinwände und Filmclubs. Spielplan nach Tagen, Sitzplatzwahl im Saal, Filmseite, Vorschau mit Erinnerung und Preise.

5 Variants
Kategorie wechseln

Kino

Spielplan

Sieben Tage als Reiter, jeder Film mit Plakat, Altersfreigabe und Zeiten. Eine feine Linie unter jeder Zeit zeigt, wie voll die Vorstellung ist, ausverkaufte bleiben sichtbar.

Im Studio öffnen

Sitzplatzwahl

Der Saal unter einer leuchtenden Leinwand, die Reihen steigen nacheinander auf. Plätze per Tipp oder Pfeiltasten wählen, Premiumreihen getönt, die Summe gleitet, Plätze erscheinen als Chips.

Im Studio öffnen

Filmseite

Ein dunkles Band mit dem Standbild dahinter, das Plakat skaliert herein, Titel, Inhalt, Regie und Besetzung, Trailer und die nächsten Vorstellungen.

Im Studio öffnen

Demnächst

Plakate nach Starttermin mit Datum und verbleibenden Tagen. Eine Erinnerung pro Film, die Glocke springt zum Haken.

Im Studio öffnen

Preise

Preise nach Tag und Platz in einer Tabelle, der Kinotag im Akzent. Auf dem Telefon werden die Tage zu Reitern, die Zeilen steigen beim Scrollen auf.

Im Studio öffnen

Details

Was Kino mitbringt, aus Registry und Quellcode gelesen.

Bereich
Industries
Variants
5
Version
1.0.0 · seit 1.1.0
Datei
components/ui/cinema.tsx
Bringt mit
utilskitbuttoniconrevealsectionmotion
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 32 eigene Texte
Studio
Alle 5 Variants bearbeitbar
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle CinemaProps aus components/ui/cinema.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • 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

Eingebaute Texte

Diese Texte schreibt Kino selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 32 Texte anzeigen
dayEnglisch DayDeutsch Tag
todayEnglisch TodayDeutsch Heute
minEnglisch {n} minDeutsch {n} Min.
ageEnglisch Age {n}Deutsch FSK {n}
soldEnglisch Sold outDeutsch Ausverkauft
fewEnglisch Few seatsDeutsch Wenige Plätze
hallEnglisch Hall {n}Deutsch Saal {n}
screenEnglisch ScreenDeutsch Leinwand
seatsEnglisch SeatsDeutsch Plätze
takenEnglisch TakenDeutsch Belegt
chosenEnglisch Your seatsDeutsch Deine Plätze
wheelEnglisch Wheelchair spaceDeutsch Rollstuhlplatz
rowEnglisch Row {r}Deutsch Reihe {r}
seatEnglisch Row {r}, seat {n}Deutsch Reihe {r}, Platz {n}
pickNEnglisch Pick up to {n} seatsDeutsch Wähle bis zu {n} Plätze
noneEnglisch No seats picked yetDeutsch Noch keine Plätze gewählt
totalEnglisch TotalDeutsch Gesamt
buyEnglisch Buy {n} ticketsDeutsch {n} Tickets kaufen
buyOneEnglisch Buy 1 ticketDeutsch 1 Ticket kaufen
clearEnglisch ClearDeutsch Zurücksetzen
trailerEnglisch Play trailerDeutsch Trailer abspielen
directorEnglisch DirectorDeutsch Regie
castEnglisch CastDeutsch Mit
nextEnglisch Next showsDeutsch Nächste Vorstellungen
notifyEnglisch Remind meDeutsch Erinnern
notifiedEnglisch Reminder setDeutsch Erinnerung gesetzt
releaseEnglisch In cinemas {date}Deutsch Im Kino ab {date}
inDaysEnglisch in {n} daysDeutsch in {n} Tagen
weekdayEnglisch Monday to ThursdayDeutsch Montag bis Donnerstag
cardEnglisch With the bonus cardDeutsch Mit Bonuskarte
extrasEnglisch SupplementsDeutsch Zuschläge
freeEnglisch FreeDeutsch Kostenlos

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Kino reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts und Leertaste.
  • Setzt aria-disabled, aria-label, aria-live, aria-pressed und aria-selected, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen grid, gridcell, row, rowheader, tab und tablist.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • Bewegt sich mit dem Scrollen, der Fortschritt folgt der Position auf der Seite.
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 5 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Kino?

Mit aiw add @ai-website/cinema. Der Befehl legt die Datei components/ui/cinema.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, reveal, section und motion. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Kino?

5 Varianten, Spielplan, Sitzplatzwahl, Filmseite, Demnächst und Preise. Du wählst sie mit der Prop variant, zum Beispiel variant="seat-picker".

Kann ich die Texte von Kino übersetzen?

Ja. Kino bringt 32 eigene Texte auf Deutsch und Englisch mit, etwa „Tag“, „Heute“ und „Ausverkauft“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Kino einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Kino mit aiw_components und installieren sie mit aiw_add @ai-website/cinema. Nenn im Prompt die Variante, etwa variant="showtimes", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich Kino ohne Code anpassen?

Ja, im Studio. Alle 5 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden Cinema-Code zum Kopieren.

Ähnliche Components

Mehr aus Industries, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Kino stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert