Skip to Content
ExtensionsNavigation and theming

Navigation and theming

Extensions can replace the supported navbar logo, project selector, and search contributions. Use the public StudioExtension contract and register replacements in the intended project.

Contribution contracts

ContributionProps and responsibility
navbar.logoReceives theme and title; render a recognizable, accessible identity.
navbar.projectSelectorReceives current projectId and projects; preserve correct project navigation.
navbar.searchReceives projectId, schema, and onSelect; return the expected record identity on selection.

Where multiple extensions provide a component replacement, the first resolved contribution is selected. Nested extension ordering can therefore affect the result. Test the final project configuration rather than relying on package installation order.

Styling

Load Studio and each installed extension’s CSS once through the framework’s supported stylesheet entry. Scope extension styles to avoid overriding unrelated app controls. Check light/dark themes, readable contrast, focus states, long labels, and small viewports.

Do not depend on untyped navigation replacements or command declarations without a documented runtime contract. Use custom app routes for additional workspaces.

Last updated on

© 2026