Zum Inhalt springen
UI Kit
Accent

Museum

Für Museen, Galerien und Ausstellungshäuser. Ausstellungen mit Laufzeit, Tickets, Zeitfenster, ein Etagenplan und ein Werk mit Details zum Hineinzoomen.

5 Variants
Kategorie wechseln

Museum

Ausstellungen

Aktuell, demnächst und Sammlung auf einem gleitenden Schalter. Jede Ausstellung zeigt ihre Laufzeit als Linie, die sich füllt, die letzten Tage werden bernsteinfarben.

Im Studio öffnen

Tickets

Ein Zähler pro Ticketart, das Familienticket zählt seine Personen, der Audioguide in eigener Zeile. Die Summe gleitet und listet die Auswahl.

Im Studio öffnen

Zeitfenster

Erst den Tag, dann die Einlasszeit wählen. Jedes Zeitfenster zeigt mit einem Balken, wie voll es ist, ausgebuchte bleiben sichtbar.

Im Studio öffnen

Etagenplan

Die Ebenen liegen wie Blätter übereinander, die gewählte gleitet nach vorn und zeigt ihre Räume. Daneben die Räume und Angebote der Ebene.

Im Studio öffnen

Werk im Fokus

Ein Werk mit nummerierten, pulsierenden Punkten. Einen wählen, das Bild zoomt auf das Detail, der Text öffnet sich daneben, weiterblättern oder zurückzoomen.

Im Studio öffnen

Details

Was Museum mitbringt, aus Registry und Quellcode gelesen.

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

Props

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

  • 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

Eingebaute Texte

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

Alle 37 Texte anzeigen
nowEnglisch On nowDeutsch Aktuell
soonEnglisch Coming soonDeutsch Demnächst
permanentEnglisch CollectionDeutsch Sammlung
showEnglisch ShowDeutsch Zeigen
untilEnglisch until {date}Deutsch bis {date}
fromEnglisch from {date}Deutsch ab {date}
daysLeftEnglisch {n} days leftDeutsch Noch {n} Tage
lastDaysEnglisch Last {n} daysDeutsch Nur noch {n} Tage
opensEnglisch Opens in {n} daysDeutsch Eröffnung in {n} Tagen
alwaysEnglisch Always on viewDeutsch Dauerhaft zu sehen
moreEnglisch More about the exhibitionDeutsch Mehr zur Ausstellung
ticketsEnglisch TicketsDeutsch Tickets
fewerEnglisch One less {name}Deutsch Ein Ticket {name} weniger
more2Englisch One more {name}Deutsch Ein Ticket {name} mehr
freeEnglisch FreeDeutsch Frei
coversEnglisch for up to {n} peopleDeutsch für bis zu {n} Personen
guideEnglisch Audio guideDeutsch Audioguide
guideNoteEnglisch In six languages, on your own phoneDeutsch In sechs Sprachen, auf dem eigenen Telefon
totalEnglisch TotalDeutsch Gesamt
peopleEnglisch {n} peopleDeutsch {n} Personen
payEnglisch Continue to paymentDeutsch Weiter zur Zahlung
emptyEnglisch Add a ticket to continue.Deutsch Wähle ein Ticket, um fortzufahren.
dayEnglisch DayDeutsch Tag
timeEnglisch Entry timeDeutsch Einlasszeit
pickTimeEnglisch Pick an entry timeDeutsch Einlasszeit wählen
placesEnglisch {n} places leftDeutsch Noch {n} Plätze
fullEnglisch Fully bookedDeutsch Ausgebucht
almostEnglisch Almost fullDeutsch Fast voll
chosenEnglisch Your entryDeutsch Dein Einlass
stayEnglisch Stay as long as you like after entry.Deutsch Nach dem Einlass bleibst du, so lange du willst.
reserveEnglisch Reserve {time}Deutsch {time} reservieren
levelsEnglisch LevelsDeutsch Ebenen
levelEnglisch Level {n}Deutsch Ebene {n}
detailEnglisch Detail {n} of {total}Deutsch Detail {n} von {total}
closeEnglisch Back to the whole workDeutsch Zurück zum ganzen Werk
prevEnglisch Previous detailDeutsch Vorheriges Detail
nextEnglisch Next detailDeutsch Nächstes Detail

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Museum reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links und Pfeil rechts.
  • Setzt aria-checked, aria-controls, aria-disabled, aria-expanded, aria-label, aria-live, aria-orientation, 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.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 7 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Museum?

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

Welche Varianten hat Museum?

5 Varianten, Ausstellungen, Tickets, Zeitfenster, Etagenplan und Werk im Fokus. Du wählst sie mit der Prop variant, zum Beispiel variant="tickets".

Kann ich die Texte von Museum übersetzen?

Ja. Museum bringt 37 eigene Texte auf Deutsch und Englisch mit, etwa „Aktuell“, „Demnächst“ und „Sammlung“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Museum einbauen?

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

Kann ich Museum ohne Code anpassen?

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

Ähnliche Components

Mehr aus Industries, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Museum stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert