Extensibility examples

📄️Restyle a component

Goal: change the look of a shared atom — here the design-system

Goal: redesign a self-contained section — here the leisure

Goal: create a brand-new component that upstream does not ship (e.g. a city hero

Goal: change global context behaviour — here make the city default to dark

Goal: change the authenticated layout chrome — here add a city announcement bar

Goal: completely redesign a page — here the events screen — with a different

Goal: add a page that upstream does not ship — a city-only route — under an

Goal: give a screen a bespoke loading state. The App Router treats loading.js

Goal: add a city side effect to a mutation — here write a city audit log entry

Goal: change how a module talks to the gateway — here add a city header to every

Goal: change the single request entry point — here add a security header and

Goal: rebrand the whole city — change the primary/secondary palette, radii or

Goal: change wording or add new keys for the city — here rename the events

Goal: add, reorder or relabel the menu entries a module contributes — here add a

Goal: change who can do something — here let the OPERATOR role manage

Goal: reorder, relabel or add cards on the authenticated home grid — by

Goal: change how a module formats values — here render prices and event

Goal: change the public site's SEO surface — the indexable route list, the

Goal: ship a city-only Neighbourhoods section under leisure that upstream does

Goal: customise a page that lives outside the session gate — here the public