Coworking

For coworking spaces and shared offices. Plans by team size, room booking on a time axis, amenities on the floor plan, a day pass and locations with live occupancy.

5 variants

Switch category

Plans

A team size slider picks the plan that fits, it lifts and gets the label, the monthly total for the team glides along.

Open in Studio

Installv1.0.0

aiw add @ai-website/coworking

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

Usage

<Coworking variant="plans" plans={[{ id, title, price, fits: [1, 2], features, hours, icon }]} />

Source

Room booking

All rooms on one time axis, booked hours hatched. Tap a start and an end, the selection glides into place and the summary prices it.

Open in Studio

Installv1.0.0

aiw add @ai-website/coworking

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

Usage

<Coworking variant="room-booking" rooms={[{ id, name, seats, price, booked: [{ from: "09:00", to: "10:30" }], features }]} days={[…]} open={[8, 20]} onBook={(d) => …} />

Source

Amenities

Pins pop onto the floor plan when it scrolls in, the active one pulses. Hover or tap a pin or the list to read about it.

Open in Studio

Installv1.0.0

aiw add @ai-website/coworking

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

Usage

<Coworking variant="amenities" plan={<img … />} amenities={[{ id, title, text, icon, x: 30, y: 52 }]} />

Source

Day pass

Pick a day, people and extras, the price glides. After paying a ticket with a code pops in.

Open in Studio

Installv1.0.0

aiw add @ai-website/coworking

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

Usage

<Coworking variant="day-pass" passPrice={25} passExtras={[{ id, title, price, icon }]} days={[…]} code={<img … />} onBook={(d) => …} />

Source

Locations

Sites on a map with labelled pins, a list with how busy each one is right now. The bars fill when they scroll in, hover links list and map.

Open in Studio

Installv1.0.0

aiw add @ai-website/coworking

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

Usage

<Coworking variant="locations" map={<img … />} locations={[{ id, name, address, load: 0.42, desks, open, image, x, y }]} />

Source

Details

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

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

Props

The CoworkingProps interface from components/ui/coworking.tsx, with the comments from the code.

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

Built-in texts

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

Show all 42 texts

Key	English	German
team	English Team size	German Teamgröße
people	English {n} people	German {n} Personen
person	English 1 person	German 1 Person
perPerson	English per person / month	German pro Person und Monat
teamTotal	English a month for your team	German im Monat für dein Team
fits	English Fits {a} to {b} people	German Passt für {a} bis {b} Personen
best	English Best for your team	German Passt zu deinem Team
hours	English {n} meeting room hours	German {n} Stunden Meetingraum
choose	English Choose {plan}	German {plan} wählen
rooms	English Rooms	German Räume
seats	English {n} seats	German {n} Plätze
seat	English 1 seat	German 1 Platz
perHour	English {price} / hour	German {price} / Std.
free	English Free	German Frei
taken	English Booked	German Belegt
selected	English Your booking	German Deine Buchung
bookRoom	English Book a room	German Raum buchen
pickSlot	English Pick a start time, then an end time.	German Wähle eine Startzeit, dann eine Endzeit.
hoursN	English {n} h	German {n} Std.
book	English Book {room}	German {room} buchen
booked	English {room} is yours	German {room} gehört dir
bookedText	English {time}. The door code comes by email ten minutes before.	German {time}. Den Türcode schicken wir zehn Minuten vorher per E-Mail.
again	English Book another room	German Weiteren Raum buchen
clear	English Clear	German Zurücksetzen
day	English Day	German Tag
plan	English Floor plan	German Grundriss
date	English Date	German Datum
guests	English People	German Personen
fewer	English One less	German Eine Person weniger
more	English One more	German Eine Person mehr
extras	English Extras	German Extras
pay	English Buy pass for {price}	German Pass für {price} kaufen
paid	English Your day pass	German Dein Tagespass
paidText	English Show the code at the reception or scan it at the door.	German Zeig den Code am Empfang oder scanne ihn an der Tür.
valid	English Valid {date}, 8:00 to 20:00	German Gültig am {date}, 8 bis 20 Uhr
newPass	English Buy another pass	German Weiteren Pass kaufen
load	English {n}% taken	German {n} % belegt
quiet	English Quiet	German Ruhig
medium	English Busy	German Gut besucht
full	English Nearly full	German Fast voll
desks	English {n} desks	German {n} Plätze
to	English to	German bis

Read from the source of the component.

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

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

Frequent questions

How do I install Coworking?

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

Which variants does Coworking have?

5 variants, Plans, Room booking, Amenities, Day pass and Locations. You pick one with the variant prop, for example variant="room-booking".

Can I translate the texts of Coworking?

Yes. Coworking carries 42 texts of its own in English and German, such as “Team size”, “1 person” and “per person / month”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Coworking?

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

Can I adjust Coworking without code?

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

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Coworking on a page.

Coworking

Plans

Room booking

Amenities

Day pass

Locations

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with