Museum

For museums, galleries and exhibition halls. Exhibitions with their run, tickets, timed entry, a floor guide and one work with details to zoom into.

5 variants

Switch category

Exhibitions

Now, soon and the collection on a gliding switch. Each exhibition shows its run as a line that fills, the last days turn amber.

Open in Studio

Installv1.0.0

aiw add @ai-website/museum

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

Usage

<Museum variant="exhibitions" exhibitions={[{ id, title, subtitle, status: "now", start, end, image, place, href }]} />

Source

Tickets

A counter per ticket type, the family ticket counts its people, the audio guide on its own row. The total glides and lists what you picked.

Open in Studio

Installv1.0.0

aiw add @ai-website/museum

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

Usage

<Museum variant="tickets" tickets={[{ id, title, price, note, covers }]} guidePrice={4} onBook={(d) => …} />

Source

Timed entry

Pick a day, then an entry time. Each slot shows how full it is with a bar that fills, sold out slots stay visible.

Open in Studio

Installv1.0.0

aiw add @ai-website/museum

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

Usage

<Museum variant="time-slots" days={[…]} slots={[{ time: "10:00", capacity: 60, taken: 42 }]} onBook={(d) => …} />

Source

Floor guide

Levels stacked like sheets, the chosen one slides to the front with its rooms highlighted. The rooms and services of the level are listed next to it.

Open in Studio

Installv1.0.0

aiw add @ai-website/museum

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

Usage

<Museum variant="floor-guide" levels={[{ id, short: "1", title, rooms: [{ name, note, icon }], areas: [[0, 0, 34, 50]] }]} />

Source

Work in focus

One work with numbered points that pulse. Pick one and the picture zooms to the detail, the text opens next to it, step through or zoom back out.

Open in Studio

Installv1.0.0

aiw add @ai-website/museum

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

Usage

<Museum variant="artwork" artwork={{ image, title, artist, year, medium, room }} details={[{ x, y, title, text }]} />

Source

Details

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

Area: Industries
Variants: 5
Version: 1.0.0 · since 1.1.0
File: components/ui/museum.tsx
Brings along: utilskitbutton iconrevealsectionmotion
npm packages: None
Languages: English and German, 37 texts of its own
Studio: All 5 variants editable
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The MuseumProps interface from components/ui/museum.tsx, with the comments from the code.

variantoptional
MuseumVariant
exhibitionsticketstime-slotsfloor-guideartwork
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
exhibitionsoptional
MuseumExhibition[]
todayoptional
string
exhibitions: the day to count from, YYYY-MM-DD. Defaults to today in the browser.
ticketsoptional
MuseumTicket[]
initialoptional
Record<string, number>
tickets: quantities to start with, by ticket id
guidePriceoptional
number
tickets: price of the audio guide, leave out to hide it
daysoptional
string[]
time-slots
slotsoptional
MuseumSlot[]
levelsoptional
MuseumLevel[]
artworkoptional
{ image?: React.ReactNode; title: string; artist: string; year?: string; medium?: string; room?: string }
artwork: the picture, its facts and the details to zoom into
detailsoptional
MuseumDetail[]
currencyoptional
string
onBookoptional
(data: Record<string, string>) => void

Built-in texts

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

Show all 37 texts

Key	English	German
now	English On now	German Aktuell
soon	English Coming soon	German Demnächst
permanent	English Collection	German Sammlung
show	English Show	German Zeigen
until	English until {date}	German bis {date}
from	English from {date}	German ab {date}
daysLeft	English {n} days left	German Noch {n} Tage
lastDays	English Last {n} days	German Nur noch {n} Tage
opens	English Opens in {n} days	German Eröffnung in {n} Tagen
always	English Always on view	German Dauerhaft zu sehen
more	English More about the exhibition	German Mehr zur Ausstellung
tickets	English Tickets	German Tickets
fewer	English One less {name}	German Ein Ticket {name} weniger
more2	English One more {name}	German Ein Ticket {name} mehr
free	English Free	German Frei
covers	English for up to {n} people	German für bis zu {n} Personen
guide	English Audio guide	German Audioguide
guideNote	English In six languages, on your own phone	German In sechs Sprachen, auf dem eigenen Telefon
total	English Total	German Gesamt
people	English {n} people	German {n} Personen
pay	English Continue to payment	German Weiter zur Zahlung
empty	English Add a ticket to continue.	German Wähle ein Ticket, um fortzufahren.
day	English Day	German Tag
time	English Entry time	German Einlasszeit
pickTime	English Pick an entry time	German Einlasszeit wählen
places	English {n} places left	German Noch {n} Plätze
full	English Fully booked	German Ausgebucht
almost	English Almost full	German Fast voll
chosen	English Your entry	German Dein Einlass
stay	English Stay as long as you like after entry.	German Nach dem Einlass bleibst du, so lange du willst.
reserve	English Reserve {time}	German {time} reservieren
levels	English Levels	German Ebenen
level	English Level {n}	German Ebene {n}
detail	English Detail {n} of {total}	German Detail {n} von {total}
close	English Back to the whole work	German Zurück zum ganzen Werk
prev	English Previous detail	German Vorheriges Detail
next	English Next detail	German Nächstes Detail

Read from the source of the component.

Museum handles the keys Arrow up, Arrow down, Arrow left and Arrow right itself.
Sets aria-checked, aria-controls, aria-disabled, aria-expanded, aria-label, aria-live, aria-orientation, 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.
Adds text for screen readers where icons and graphics stand alone.
Shows a visible focus ring when used with the keyboard.
The server renders the starting state in full, JavaScript only adds the interaction.

Motion

Rises in briefly the first time it comes into view (kit-rise, useInView).
Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 7 places in the code switch motion off then.

Frequent questions

How do I install Museum?

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

Which variants does Museum have?

5 variants, Exhibitions, Tickets, Timed entry, Floor guide and Work in focus. You pick one with the variant prop, for example variant="tickets".

Can I translate the texts of Museum?

Yes. Museum carries 37 texts of its own in English and German, such as “On now”, “Coming soon” and “Collection”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Museum?

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

Can I adjust Museum without code?

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

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Museum on a page.

Museum

Exhibitions

Tickets

Timed entry

Floor guide

Work in focus

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with