Club and bar website sections

For clubs, bars and live venues. Upcoming nights with drawn posters, the line up per floor on a timeline, tickets in release phases and a guest list with an entry code.

4 variants

Switch category

The night before it starts

People open a club website to see who plays, when and whether they still get in. These sections answer on the first screen, with drawn posters, a timeline past midnight and tickets that show what is left in each phase. Each one has its own phone layout, because that is where the night gets planned.

Upcoming nights lists events with a genre filter, pointing at a night brings its drawn poster to the side, and on phones every row carries a small poster. Line up places every set per floor on one timeline, on phones the floors become a switch. Tickets shows release phases from sold out to next, the live phase pulses and its bar shows what remains. Guest list takes the night, a name and the number of friends and returns an entry code with the time the list closes.

Keep the next three nights on the home page and the full program one click away. Publish set times as early as you can, that is the question asked most at the door. A guest list with a clear closing time keeps the queue short.

Upcoming nightsNew in 1.2

Nights as a calm list with a genre filter, rows rise in one after another. Point at a night and its drawn poster takes the side, light beams sweep across it. On the phone each row carries a small poster.

Installv1.0.0

aiw add @ai-website/nightlife

Brings along utils, kit, button, icon, section, motion

Usage

<Nightlife variant="events" events={[{ id, weekday, day, month, title, genres, doors: "23:00", price, hot, poster: 0, href }]} />

Source

Line upNew in 1.2

The night per floor on one timeline with hours past midnight. The sets grow in floor by floor while scrolling. On the phone the floors turn into a switch and the sets into a list.

Installv1.0.0

aiw add @ai-website/nightlife

Brings along utils, kit, button, icon, section, motion

Usage

<Nightlife variant="lineup" night="Saturday 21 November" floors={["Main", "Garden"]} sets={[{ id, floor: "Main", artist, from: "23:00", to: "25:00", genre }]} />

Source

TicketsNew in 1.2

Release phases from sold out to next, the live phase pulses and its bar shows what is left. A drawn ticket with a torn edge sits next to the quantity, the total glides along.

Installv1.0.0

aiw add @ai-website/nightlife

Brings along utils, kit, button, icon, section, motion

Usage

<Nightlife variant="tickets" event={{ title, date, venue, doors: "23:00", poster: 0 }} phases={[{ id, name, price, status: "on-sale", left: 0.2 }]} />

Source

Guest listNew in 1.2

Pick the night, add your name and how many friends come along. Missing fields say what they need, then an entry code for the door pops in with the time the list closes.

Installv1.0.0

aiw add @ai-website/nightlife

Brings along utils, kit, button, icon, section, motion

Usage

<Nightlife variant="guest-list" events={[…]} rules={["18 and over"]} listCloses="23:30" maxPlus={3} />

Source

Details

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

Area: Industries
Variants: 4
Version: 1.0.0 · since 1.2.0
File: components/ui/nightlife.tsx
Brings along: utilskitbutton iconsectionmotion
npm packages: None
Languages: English and German, 36 texts of its own
Studio: Adjust in code
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The NightlifeProps interface from components/ui/nightlife.tsx, with the comments from the code.

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

Built-in texts

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

Show all 36 texts

Key	English	German
genre	English Genre	German Genre
all	English All nights	German Alle Nächte
doors	English Doors {time}	German Einlass {time}
from	English from {price}	German ab {price}
free	English Free entry	German Eintritt frei
hot	English Few left	German Fast weg
tickets	English Tickets	German Tickets
floors	English Floor	German Floor
timeline	English Running order	German Ablauf
phases	English Release phases	German Preisphasen
soldOut	English Sold out	German Ausverkauft
onSale	English On sale	German Im Verkauf
upcoming	English Next	German Danach
leftShare	English {n} left	German noch {n}
quantity	English Tickets	German Tickets
less	English One ticket less	German Ein Ticket weniger
more	English One ticket more	German Ein Ticket mehr
total	English Total	German Gesamt
fee	English Including booking fee	German Inklusive Vorverkaufsgebühr
buy	English Buy {n} tickets	German {n} Tickets kaufen
buyOne	English Buy 1 ticket	German 1 Ticket kaufen
bought	English Your tickets are in your inbox.	German Deine Tickets sind in deinem Postfach.
boxOffice	English Box office on the night, while tickets last.	German Abendkasse am Abend, solange der Vorrat reicht.
night	English Which night?	German Welche Nacht?
name	English Name on the list	German Name auf der Liste
email	English Email	German E-Mail
plus	English Friends with you	German Freunde dabei
lessPlus	English One friend less	German Eine Person weniger
morePlus	English One friend more	German Eine Person mehr
rules	English Good to know	German Gut zu wissen
join	English Put me on the list	German Auf die Liste setzen
required	English Please fill in this field	German Bitte fülle dieses Feld aus
emailInvalid	English Please enter a valid email address	German Bitte gib eine gültige E-Mail-Adresse ein
onList	English You are on the list	German Du stehst auf der Liste
onListText	English Show this code at the door before {time}. Bring an ID for everyone.	German Zeig diesen Code vor {time} an der Tür. Bring für alle einen Ausweis mit.
code	English Entry code	German Einlasscode

Read from the source of the component.

Nightlife handles the keys Arrow up, Arrow down, Arrow left, Arrow right and Space itself.
Sets aria-checked, aria-describedby, aria-invalid, aria-label and aria-live, so screen readers announce purpose and state.
Uses the roles radio, radiogroup and status.
Announces changes through a live region without moving focus.
Every field has a label, visible or for screen readers.
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 Nightlife?

With aiw add @ai-website/nightlife. The command puts components/ui/nightlife.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 Nightlife have?

4 variants, Upcoming nights, Line up, Tickets and Guest list. You pick one with the variant prop, for example variant="lineup".

Can I translate the texts of Nightlife?

Yes. Nightlife carries 36 texts of its own in English and German, such as “Genre”, “All nights” and “Free entry”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Nightlife?

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

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Club and bar on a page.

The night before it starts

Nightlife

Upcoming nightsNew in 1.2

Line upNew in 1.2

TicketsNew in 1.2

Guest listNew in 1.2

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with