Zum Inhalt springen
UI Kit
Accent

Festival

Für Festivals und Open Airs. Das Line-up als Plakat, der Timetable nach Bühne, Tickets mit Preisphasen, der Geländeplan und die Anreise.

5 Variants
Kategorie wechseln

Festival

Line-up

Der Tag als Plakat, Headliner riesig, die Hauptacts in einer Reihe, alle anderen in Zeilen darunter. Tagesreiter mit gleitender Linie, Namen steigen auf, Antippen merkt einen Act mit Herz.

Im Studio öffnen

Zeitplan

Bühnen als Spalten über den Stunden vom Nachmittag bis in die Nacht, jeder Auftritt so lang wie er spielt, Headliner getönt. Auftritte in den eigenen Plan tippen. Auf Telefon und Tablet eine Liste je Bühne.

Im Studio öffnen

Tickets

Tickets als Abriss mit Perforation. Preisphasen füllen sich nacheinander, die aktuelle Phase zeigt, was noch da ist, und den nächsten Preis neben dem aktuellen.

Im Studio öffnen

Geländeplan

Das Gelände gezeichnet mit See, Wegen und Camping. Pins springen nacheinander herein, nach Bühnen, Essen, Camping oder Service filtern, der gewählte Pin pulst und seine Details wechseln.

Im Studio öffnen

Anreise

Bahn, Shuttle, Auto oder Rad als Kacheln. Der gewählte Weg erscheint als nummerierte Schritte auf einer Linie, die sich füllt, mit Preis und Hinweis.

Im Studio öffnen

Details

Was Festival mitbringt, aus Registry und Quellcode gelesen.

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

Props

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

  • variantoptional
    FestivalVariant

    lineuptimetableticketssite-maptravel

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • actsoptional
    FestivalAct[]

    lineup, timetable

  • daysoptional
    { id: string; label: string }[]
  • stagesoptional
    string[]

    timetable: stages in order and the first and last hour

  • fromHouroptional
    number
  • toHouroptional
    number
  • ticketsoptional
    FestivalTicket[]

    tickets

  • placesoptional
    FestivalPlace[]

    site-map

  • routesoptional
    FestivalRoute[]

    travel

  • addressoptional
    string

    travel: address line and days until the festival

  • currencyoptional
    string

Eingebaute Texte

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

Alle 22 Texte anzeigen
dayEnglisch DayDeutsch Tag
saveEnglisch Save {name}Deutsch {name} merken
myPlanEnglisch In your plan {names}Deutsch In deinem Plan {names}
planNEnglisch {n} sets in your planDeutsch {n} Auftritte in deinem Plan
planOneEnglisch One set in your planDeutsch Ein Auftritt in deinem Plan
planEmptyEnglisch Tap a set to add it to your planDeutsch Tippe auf einen Auftritt, um ihn zu merken
onSaleEnglisch On saleDeutsch Im Verkauf
soldOutEnglisch Sold outDeutsch Ausverkauft
nextEnglisch Next {price}Deutsch Danach {price}
leftEnglisch {n}% leftDeutsch noch {n} %
buyEnglisch Buy this ticketDeutsch {name} kaufen
phaseEnglisch PhaseDeutsch Phase
includeEnglisch IncludedDeutsch Enthalten
showEnglisch ShowDeutsch Zeigen
allEnglisch AllDeutsch Alle
stagesEnglisch StagesDeutsch Bühnen
foodEnglisch FoodDeutsch Essen
campingEnglisch CampingDeutsch Camping
serviceEnglisch ServiceDeutsch Service
howToEnglisch How do you get there?Deutsch Wie kommst du hin?
planEnglisch Plan your tripDeutsch Anreise planen
toEnglisch toDeutsch bis

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Festival reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links und Pfeil rechts.
  • Setzt aria-checked, aria-label, aria-live, aria-pressed und aria-selected, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen radio, radiogroup, tab und tablist.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • 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 Festival?

Mit aiw add @ai-website/festival. Der Befehl legt die Datei components/ui/festival.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 Festival?

5 Varianten, Line-up, Zeitplan, Tickets, Geländeplan und Anreise. Du wählst sie mit der Prop variant, zum Beispiel variant="timetable".

Kann ich die Texte von Festival übersetzen?

Ja. Festival bringt 22 eigene Texte auf Deutsch und Englisch mit, etwa „Tag“, „Ein Auftritt in deinem Plan“ und „Tippe auf einen Auftritt, um ihn zu merken“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Festival einbauen?

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

Kann ich Festival ohne Code anpassen?

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

Ähnliche Components

Mehr aus Industries, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Festival stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert