Skip to content
UI Kit
Accent color

Festival

For festivals and open air events. The line up as a poster, the timetable by stage, tickets with release phases, the site map and how to get there.

5 variants
Switch category

Festival

Line up

The day as a poster, headliners huge, the main acts in a row, everyone else in lines below. Day tabs with a sliding line, names rise in, tap a name to save it with a heart.

Open in Studio

Timetable

Stages as columns over the hours from afternoon to night, every set as long as it plays, headliners tinted. Tap sets into your plan. On phones and tablets one list per stage.

Open in Studio

Tickets

Tickets as stubs with a perforation. Release phases fill one after another, the current phase shows what is left and the next price beside the current one.

Open in Studio

Site map

The grounds drawn with the lake, paths and camping. Pins pop in one after another, filter by stages, food, camping or service, the chosen pin pulses and its details swap in.

Open in Studio

Getting there

Train, shuttle, car or bike as tiles. The chosen way swaps in as numbered steps on a line that fills, with price and a note.

Open in Studio

Details

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

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

Props

The FestivalProps interface from components/ui/festival.tsx, with the comments from the code.

  • 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

Built-in texts

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

Show all 22 texts
dayEnglish DayGerman Tag
saveEnglish Save {name}German {name} merken
myPlanEnglish In your plan {names}German In deinem Plan {names}
planNEnglish {n} sets in your planGerman {n} Auftritte in deinem Plan
planOneEnglish One set in your planGerman Ein Auftritt in deinem Plan
planEmptyEnglish Tap a set to add it to your planGerman Tippe auf einen Auftritt, um ihn zu merken
onSaleEnglish On saleGerman Im Verkauf
soldOutEnglish Sold outGerman Ausverkauft
nextEnglish Next {price}German Danach {price}
leftEnglish {n}% leftGerman noch {n} %
buyEnglish Buy this ticketGerman {name} kaufen
phaseEnglish PhaseGerman Phase
includeEnglish IncludedGerman Enthalten
showEnglish ShowGerman Zeigen
allEnglish AllGerman Alle
stagesEnglish StagesGerman Bühnen
foodEnglish FoodGerman Essen
campingEnglish CampingGerman Camping
serviceEnglish ServiceGerman Service
howToEnglish How do you get there?German Wie kommst du hin?
planEnglish Plan your tripGerman Anreise planen
toEnglish toGerman bis

Accessibility

Read from the source of the component.

  • Festival handles the keys Arrow up, Arrow down, Arrow left and Arrow right itself.
  • Sets aria-checked, aria-label, aria-live, aria-pressed and aria-selected, so screen readers announce purpose and state.
  • Uses the roles radio, radiogroup, tab and tablist.
  • Announces changes through a live region without moving focus.
  • Shows a visible focus ring when used with the keyboard.
  • The server renders the starting state in full, JavaScript only adds the interaction.

Motion

  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 4 places in the code switch motion off then.

Frequent questions

How do I install Festival?

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

Which variants does Festival have?

5 variants, Line up, Timetable, Tickets, Site map and Getting there. You pick one with the variant prop, for example variant="timetable".

Can I translate the texts of Festival?

Yes. Festival carries 22 texts of its own in English and German, such as “Day”, “One set in your plan” and “Tap a set to add it to your plan”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Festival?

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

Can I adjust Festival without code?

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

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Festival on a page.

Often searched

Jump to

Copied to the clipboard