Zum Inhalt springen
UI Kit
Accent

Coworking

Für Coworking Spaces und Bürogemeinschaften. Tarife nach Teamgröße, Raumbuchung auf der Zeitachse, Ausstattung auf dem Grundriss, Tagespass und Standorte mit Live-Auslastung.

5 Variants
Kategorie wechseln

Coworking

Tarife

Ein Regler für die Teamgröße wählt den passenden Tarif, er hebt sich und bekommt das Label, die Monatssumme fürs Team gleitet mit.

Im Studio öffnen

Raumbuchung

Alle Räume auf einer Zeitachse, belegte Zeiten schraffiert. Start und Ende antippen, die Auswahl gleitet an ihren Platz, die Zusammenfassung nennt den Preis.

Im Studio öffnen

Ausstattung

Pins springen auf den Grundriss, wenn er hereinscrollt, der aktive pulsiert. Pin oder Liste antippen oder überfahren, um mehr zu lesen.

Im Studio öffnen

Tagespass

Tag, Personen und Extras wählen, der Preis gleitet mit. Nach dem Bezahlen springt ein Ticket mit Code herein.

Im Studio öffnen

Standorte

Standorte auf einer Karte mit beschrifteten Pins, daneben eine Liste mit der aktuellen Auslastung. Die Balken füllen sich beim Hereinscrollen, Hover verbindet Liste und Karte.

Im Studio öffnen

Details

Was Coworking mitbringt, aus Registry und Quellcode gelesen.

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

Props

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

  • variantoptional
    CoworkingVariant

    plansroom-bookingamenitiesday-passlocations

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • plansoptional
    CoworkPlan[]
  • roomsoptional
    CoworkRoom[]
  • openoptional
    [number, number]

    room-booking: opening hours as whole hours

  • amenitiesoptional
    CoworkAmenity[]
  • planoptional
    React.ReactNode

    amenities: the plan picture the pins sit on

  • passPriceoptional
    number

    day-pass

  • passExtrasoptional
    { id: string; title: string; price: number; icon?: IconName }[]
  • passIncludesoptional
    string[]

    day-pass: what every pass includes

  • daysoptional
    string[]
  • codeoptional
    React.ReactNode

    day-pass: the code picture shown after buying

  • locationsoptional
    CoworkLocation[]
  • mapoptional
    React.ReactNode

    locations: a map picture the pins sit on

  • currencyoptional
    string
  • onBookoptional
    (data: Record<string, string>) => void

Eingebaute Texte

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

Alle 42 Texte anzeigen
teamEnglisch Team sizeDeutsch Teamgröße
peopleEnglisch {n} peopleDeutsch {n} Personen
personEnglisch 1 personDeutsch 1 Person
perPersonEnglisch per person / monthDeutsch pro Person und Monat
teamTotalEnglisch a month for your teamDeutsch im Monat für dein Team
fitsEnglisch Fits {a} to {b} peopleDeutsch Passt für {a} bis {b} Personen
bestEnglisch Best for your teamDeutsch Passt zu deinem Team
hoursEnglisch {n} meeting room hoursDeutsch {n} Stunden Meetingraum
chooseEnglisch Choose {plan}Deutsch {plan} wählen
roomsEnglisch RoomsDeutsch Räume
seatsEnglisch {n} seatsDeutsch {n} Plätze
seatEnglisch 1 seatDeutsch 1 Platz
perHourEnglisch {price} / hourDeutsch {price} / Std.
freeEnglisch FreeDeutsch Frei
takenEnglisch BookedDeutsch Belegt
selectedEnglisch Your bookingDeutsch Deine Buchung
bookRoomEnglisch Book a roomDeutsch Raum buchen
pickSlotEnglisch Pick a start time, then an end time.Deutsch Wähle eine Startzeit, dann eine Endzeit.
hoursNEnglisch {n} hDeutsch {n} Std.
bookEnglisch Book {room}Deutsch {room} buchen
bookedEnglisch {room} is yoursDeutsch {room} gehört dir
bookedTextEnglisch {time}. The door code comes by email ten minutes before.Deutsch {time}. Den Türcode schicken wir zehn Minuten vorher per E-Mail.
againEnglisch Book another roomDeutsch Weiteren Raum buchen
clearEnglisch ClearDeutsch Zurücksetzen
dayEnglisch DayDeutsch Tag
planEnglisch Floor planDeutsch Grundriss
dateEnglisch DateDeutsch Datum
guestsEnglisch PeopleDeutsch Personen
fewerEnglisch One lessDeutsch Eine Person weniger
moreEnglisch One moreDeutsch Eine Person mehr
extrasEnglisch ExtrasDeutsch Extras
payEnglisch Buy pass for {price}Deutsch Pass für {price} kaufen
paidEnglisch Your day passDeutsch Dein Tagespass
paidTextEnglisch Show the code at the reception or scan it at the door.Deutsch Zeig den Code am Empfang oder scanne ihn an der Tür.
validEnglisch Valid {date}, 8:00 to 20:00Deutsch Gültig am {date}, 8 bis 20 Uhr
newPassEnglisch Buy another passDeutsch Weiteren Pass kaufen
loadEnglisch {n}% takenDeutsch {n} % belegt
quietEnglisch QuietDeutsch Ruhig
mediumEnglisch BusyDeutsch Gut besucht
fullEnglisch Nearly fullDeutsch Fast voll
desksEnglisch {n} desksDeutsch {n} Plätze
toEnglisch toDeutsch bis

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Coworking reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts und Leertaste.
  • Setzt aria-checked, aria-controls, aria-label, aria-live und aria-pressed, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen group, radio, radiogroup und status.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Jedes Feld hat ein Label, sichtbar oder für Screenreader.
  • 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

  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 2 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Coworking?

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

Welche Varianten hat Coworking?

5 Varianten, Tarife, Raumbuchung, Ausstattung, Tagespass und Standorte. Du wählst sie mit der Prop variant, zum Beispiel variant="room-booking".

Kann ich die Texte von Coworking übersetzen?

Ja. Coworking bringt 42 eigene Texte auf Deutsch und Englisch mit, etwa „Teamgröße“, „1 Person“ und „pro Person und Monat“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Coworking einbauen?

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

Kann ich Coworking ohne Code anpassen?

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

Ähnliche Components

Mehr aus Industries, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Coworking stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert