Architecture studio

For architects and interior designers. The work phases by fee share, a philosophy with a sketch that draws itself, a project sheet with elevation, section and plan, materials to touch and a building cost estimate.

5 variants

Switch category

Work phases

Nine phases on a rail, each as wide as its share of the fee, grouped by stage. The bars rise in while scrolling, pointing or tabbing opens what the client gets. On the phone a list with the share as a small bar.

Open in Studio

Installv1.0.0

aiw add @ai-website/architecture

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

Usage

<Architecture variant="work-phases" phases={[{ number: "1", title, share: 2, stage, text, deliverables: ["…"] }]} />

Source

Philosophy

A statement set large and four principles that rise in. Beside them a line drawing on grid paper draws itself stroke by stroke while you scroll.

Open in Studio

Installv1.0.0

aiw add @ai-website/architecture

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

Usage

<Architecture variant="philosophy" statement="…" principles={[{ title, text }]} drawing={<svg>…paths with pathLength="1"…</svg>} />

Source

Project sheet

Elevation, section and plan as tabs, each drawing redraws itself line by line. Beside it the facts in a hairline grid, the milestones on a line that fills and the team.

Open in Studio

Installv1.0.0

aiw add @ai-website/architecture

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

Usage

<Architecture variant="project-sheet" project={{ name, place, year, type }} views={[{ id, label, media }]} facts={[{ label, value }]} milestones={[{ date, label }]} team={["…"]} />

Source

Materials

Drawn swatches of wood, clay, stone and metal that lift and zoom when you point at them. Pick one, a large sample shows where it comes from, what it is used for and how far it travels.

Open in Studio

Installv1.0.0

aiw add @ai-website/architecture

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

Usage

<Architecture variant="materials" materials={[{ id, name, pattern: "wood", tone: "#b98a5e", origin, use, distance, text }]} />

Source

Building cost estimate

Pick the building, the area and the standard. The cost glides to a rounded value with a range and price per m², the split by cost group grows in below.

Open in Studio

Installv1.0.0

aiw add @ai-website/architecture

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

Usage

<Architecture variant="cost-estimate" types={[{ id, label, icon, rate: { mid: 2900 } }]} standards={[{ id, label }]} costGroups={[{ code: "300", label, share: 62 }]} />

Source

Details

What Architecture studio brings along, read from the registry and the source.

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

Props

The ArchitectureProps interface from components/ui/architecture.tsx, with the comments from the code.

variantoptional
ArchitectureVariant
work-phasesphilosophyproject-sheetmaterialscost-estimate
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
phasesoptional
ArchPhase[]
work-phases
principlesoptional
ArchPrinciple[]
philosophy: principles, and a line drawing whose paths carry pathLength="1" so they draw in on scroll
drawingoptional
React.ReactNode
statementoptional
string
philosophy: one sentence set large
projectoptional
{ name: string; place: string; year: string; type: string }
project-sheet
viewsoptional
ArchView[]
factsoptional
{ label: string; value: string }[]
teamoptional
string[]
milestonesoptional
{ date: string; label: string }[]
materialsoptional
ArchMaterial[]
materials
typesoptional
ArchBuildingType[]
cost-estimate
standardsoptional
{ id: string; label: string }[]
costGroupsoptional
{ code: string; label: string; share: number }[]
cost-estimate: cost groups with their share of the building cost in percent
areaoptional
number
cost-estimate: start area in m²
currencyoptional
string

Built-in texts

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

Show all 23 texts

Key	English	German
phases	English Work phases	German Leistungsphasen
fee	English {n}% of the fee	German {n} % des Honorars
youGet	English What you get	German Was du bekommst
talk	English Talk about your project	German Über dein Projekt sprechen
principles	English What we stand for	German Wofür wir stehen
view	English View	German Ansicht
facts	English Project facts	German Projektdaten
team	English Team	German Team
timeline	English From first sketch to moving in	German Von der ersten Skizze bis zum Einzug
materials	English Materials	German Materialien
origin	English Source	German Herkunft
use	English Used for	German Eingesetzt für
distance	English Way to the site	German Weg zur Baustelle
km	English {n} km	German {n} km
type	English Building	German Gebäude
area	English Gross floor area	German Bruttogrundfläche
standard	English Standard	German Standard
estimate	English Building cost, about	German Baukosten, etwa
range	English Range {low} to {high}	German Spanne {low} bis {high}
perM2	English {price} per m²	German {price} pro m²
groups	English By cost group	German Nach Kostengruppe
note	English Estimate for a first conversation. Plot, demolition and financing are not included.	German Schätzung für ein erstes Gespräch. Grundstück, Abriss und Finanzierung sind nicht enthalten.
request	English Request a cost check	German Kostencheck anfragen

Read from the source of the component.

Architecture studio handles the keys Arrow up, Arrow down, Arrow left and Arrow right itself.
Sets aria-checked, aria-controls, aria-expanded, aria-label, aria-labelledby, aria-live and aria-selected, so screen readers announce purpose and state.
Uses the roles radio, radiogroup, tab, tablist and tabpanel.
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

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 Architecture studio?

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

Which variants does Architecture studio have?

5 variants, Work phases, Philosophy, Project sheet, Materials and Building cost estimate. You pick one with the variant prop, for example variant="philosophy".

Can I translate the texts of Architecture studio?

Yes. Architecture studio carries 23 texts of its own in English and German, such as “Work phases”, “What you get” and “Talk about your project”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Architecture studio?

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

Can I adjust Architecture studio without code?

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

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Architecture studio on a page.