Zum Inhalt springen
UI Kit
Accent

Club und Bar Website Sections

Für Clubs, Bars und Live-Locations. Kommende Nächte mit gezeichneten Plakaten, das Line-up je Floor auf einem Zeitstrahl, Tickets in Preisphasen und eine Gästeliste mit Einlasscode.

4 Variants
Kategorie wechseln

Die Nacht, bevor sie beginnt

Eine Club-Website öffnet man, um zu sehen, wer spielt, wann und ob man noch reinkommt. Diese Sections antworten schon auf dem ersten Bildschirm, mit gezeichneten Plakaten, einem Zeitstrahl über Mitternacht hinaus und Tickets, die den Rest je Phase zeigen. Jede hat ein eigenes Handy-Layout, denn dort wird die Nacht geplant.

„Kommende Nächte“ listet Events mit Genre-Filter, zeigt man auf eine Nacht, rückt ihr gezeichnetes Plakat zur Seite, am Handy trägt jede Zeile ein kleines Plakat. Das „Line-up“ legt jedes Set je Floor auf einen Zeitstrahl, am Handy werden die Floors zum Umschalter. „Tickets“ zeigt Preisphasen von ausverkauft bis demnächst, die laufende Phase pulsiert und ihr Balken zeigt den Rest. Die „Gästeliste“ nimmt Nacht, Namen und Anzahl der Freunde auf und gibt einen Einlasscode samt Schlusszeit der Liste zurück.

Zeig die nächsten drei Nächte auf der Startseite und das ganze Programm einen Klick weiter. Veröffentliche Set-Zeiten so früh wie möglich, das ist die häufigste Frage an der Tür. Eine Gästeliste mit klarer Schlusszeit hält die Schlange kurz.

Club und Bar

Kommende NächteNeu in 1.2

Nächte als ruhige Liste mit Genre-Filter, die Zeilen steigen nacheinander auf. Auf eine Nacht zeigen, ihr gezeichnetes Plakat übernimmt die Seite, Lichtkegel schwenken darüber. Am Telefon trägt jede Zeile ein kleines Plakat.

Line-upNeu in 1.2

Die Nacht je Floor auf einem Zeitstrahl mit Stunden nach Mitternacht. Die Sets wachsen beim Scrollen Floor für Floor herein. Am Telefon werden die Floors zum Umschalter und die Sets zur Liste.

TicketsNeu in 1.2

Preisphasen von ausverkauft bis demnächst, die laufende pulsiert, ihr Balken zeigt, was übrig ist. Daneben ein gezeichnetes Ticket mit Abrisskante, die Menge und die Summe, die mitgleitet.

GästelisteNeu in 1.2

Die Nacht wählen, Namen eintragen und wie viele Freunde mitkommen. Fehlende Felder sagen, was sie brauchen, dann springt ein Einlasscode für die Tür herein, mit der Uhrzeit, bis zu der die Liste gilt.

Details

Was Club und Bar mitbringt, aus Registry und Quellcode gelesen.

Bereich
Industries
Variants
4
Version
1.0.0 · seit 1.2.0
Datei
components/ui/nightlife.tsx
Bringt mit
utilskitbuttoniconsectionmotion
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 36 eigene Texte
Studio
Im Code anpassen
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

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

  • variantoptional
    NightlifeVariant

    eventslineupticketsguest-list

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • eventsoptional
    NightEvent[]

    events, guest-list (the nights to choose)

  • floorsoptional
    string[]

    lineup

  • setsoptional
    NightSet[]
  • nightoptional
    string

    lineup: the night shown, e.g. "Saturday 21 November"

  • eventoptional
    { title: string; date: string; venue: string; doors: string; poster?: number }

    tickets

  • phasesoptional
    NightTicketPhase[]
  • maxTicketsoptional
    number
  • rulesoptional
    string[]

    guest-list: rules at the door, list closes at

  • listClosesoptional
    string
  • maxPlusoptional
    number
  • currencyoptional
    string

Eingebaute Texte

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

Alle 36 Texte anzeigen
genreEnglisch GenreDeutsch Genre
allEnglisch All nightsDeutsch Alle Nächte
doorsEnglisch Doors {time}Deutsch Einlass {time}
fromEnglisch from {price}Deutsch ab {price}
freeEnglisch Free entryDeutsch Eintritt frei
hotEnglisch Few leftDeutsch Fast weg
ticketsEnglisch TicketsDeutsch Tickets
floorsEnglisch FloorDeutsch Floor
timelineEnglisch Running orderDeutsch Ablauf
phasesEnglisch Release phasesDeutsch Preisphasen
soldOutEnglisch Sold outDeutsch Ausverkauft
onSaleEnglisch On saleDeutsch Im Verkauf
upcomingEnglisch NextDeutsch Danach
leftShareEnglisch {n} leftDeutsch noch {n}
quantityEnglisch TicketsDeutsch Tickets
lessEnglisch One ticket lessDeutsch Ein Ticket weniger
moreEnglisch One ticket moreDeutsch Ein Ticket mehr
totalEnglisch TotalDeutsch Gesamt
feeEnglisch Including booking feeDeutsch Inklusive Vorverkaufsgebühr
buyEnglisch Buy {n} ticketsDeutsch {n} Tickets kaufen
buyOneEnglisch Buy 1 ticketDeutsch 1 Ticket kaufen
boughtEnglisch Your tickets are in your inbox.Deutsch Deine Tickets sind in deinem Postfach.
boxOfficeEnglisch Box office on the night, while tickets last.Deutsch Abendkasse am Abend, solange der Vorrat reicht.
nightEnglisch Which night?Deutsch Welche Nacht?
nameEnglisch Name on the listDeutsch Name auf der Liste
emailEnglisch EmailDeutsch E-Mail
plusEnglisch Friends with youDeutsch Freunde dabei
lessPlusEnglisch One friend lessDeutsch Eine Person weniger
morePlusEnglisch One friend moreDeutsch Eine Person mehr
rulesEnglisch Good to knowDeutsch Gut zu wissen
joinEnglisch Put me on the listDeutsch Auf die Liste setzen
requiredEnglisch Please fill in this fieldDeutsch Bitte fülle dieses Feld aus
emailInvalidEnglisch Please enter a valid email addressDeutsch Bitte gib eine gültige E-Mail-Adresse ein
onListEnglisch You are on the listDeutsch Du stehst auf der Liste
onListTextEnglisch Show this code at the door before {time}. Bring an ID for everyone.Deutsch Zeig diesen Code vor {time} an der Tür. Bring für alle einen Ausweis mit.
codeEnglisch Entry codeDeutsch Einlasscode

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Club und Bar reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts und Leertaste.
  • Setzt aria-checked, aria-describedby, aria-invalid, aria-label und aria-live, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen radio, radiogroup und status.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Jedes Feld hat ein Label, sichtbar oder für Screenreader.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 4 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Club und Bar?

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

Welche Varianten hat Club und Bar?

4 Varianten, Kommende Nächte, Line-up, Tickets und Gästeliste. Du wählst sie mit der Prop variant, zum Beispiel variant="lineup".

Kann ich die Texte von Club und Bar übersetzen?

Ja. Club und Bar bringt 36 eigene Texte auf Deutsch und Englisch mit, etwa „Genre“, „Alle Nächte“ und „Eintritt frei“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Club und Bar einbauen?

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

Ähnliche Components

Mehr aus Industries, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Club und Bar stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert