Studio Components Reference
The Studio Components API lets you override parts of the Studio UI with custom React components.
The top-level configuration property studio enables customization of several parts of the studio's user interface. Its sole components key accepts an object with overrides for the layout, navigation bar, and tool menu:
// ./sanity.config.tsx|jsx
import {defineConfig} from 'sanity'
import {MyActiveToolLayout, MyLayout, MyNavbar, MyToolMenu} from './components/studio'
export default defineConfig({
// rest of config ...
studio: {
components: {
activeToolLayout: MyActiveToolLayout,
layout: MyLayout,
navbar: MyNavbar,
toolMenu: MyToolMenu,
},
},
})The layout is the root UI component for the studio. You probably never want to replace this component entirely with a custom layout component, but you might want to render the default layout component inside, say, a React context provider. This would allow all components inside the studio to retrieve the values from your provider.
renderDefaultfunction
A callback function that renders the default layout component. The function takes the component's properties as an argument, and these properties can be modified.
// ./sanity.config.tsx|jsx
import {defineConfig, LayoutProps} from 'sanity'
import {MyProvider} from '../path/to/my-provider'
function CustomLayout(props: LayoutProps) {
return (
<MyProvider>
{props.renderDefault(props)}
</MyProvider>
)
}
export default defineConfig({
// rest of config ...
studio: {
components: {
layout: CustomLayout,
}
}
})Similar to layout, but wraps only the currently active tool. You probably never want to replace this component entirely with a custom layout component, but you might want to render the default layout component inside, say, a React context provider. This would allow all components inside the currently active tool to retrieve the values from your provider.
Properties
renderDefaultfunction
A callback function that renders the default layout component. The function takes the component's properties as an argument, and these properties can be modified.
activeToolTool
The currently active studio tool.
// ./sanity.config.tsx|jsx
import {defineConfig, LayoutProps} from 'sanity'
import {MyProvider} from '../path/to/my-provider'
function CustomActiveToolLayout(props: ActiveToolLayoutProps) {
return (
<MyProvider>
{props.renderDefault(props)}
</MyProvider>
)
}
export default defineConfig({
// rest of config ...
studio: {
components: {
activeToolLayout: CustomActiveToolLayout,
}
}
})You can override and insert extra components in the Studio's navbar. This can be useful if you want to customize the navbar to be visually distinct in certain environments (e.g. development vs. production). Or control what's displayed based on user roles or other contextual factors.
renderDefaultfunction
A callback function that renders the default navbar component. The function takes the component's properties as an argument, and these properties can be modified.
// ./sanity.config.tsx|jsx
import {defineConfig, NavbarProps, useWorkspace} from 'sanity'
import {Card, Stack, Text} from '@sanity/ui'
function CustomNavbar(props: NavbarProps) {
const {dataset} = useWorkspace()
return (
<Stack>
<Card padding={3} tone="primary">
<Text size={1}>
Using the <b>{dataset}</b> dataset
</Text>
</Card>
{props.renderDefault(props)} {/* Render the default navbar */}
</Stack>
)
}
export default defineConfig({
// rest of config ...
studio: {
components: {
navbar: CustomNavbar,
}
}
})The tool menu appears in the navbar and lists all your Studio tools. The tool menu is displayed in two places depending on the width of the screen size. On wide screens, it appears in the top bar, while on narrow screens, it appears inside the sidebar.
activeToolNamestring
The active tool name
closeSidebarfunction
A function that closes the sidebar
contextstring
A string that informs about the "context" in which the tool menu is rendered. This value is useful when you want to make two different customizations depending on whether the tool menu is in the top bar or in the side bar.
toolsarray
An array of the tools in the studio
renderDefaultfunction
A callback function that renders the default tool menu component. The function takes the component's properties as an argument, and these properties can be modified.
// ./components/custom-toolmenu.tsx|jsx
import {defineConfig, ToolMenuProps, ToolLink} from 'sanity'
import {Button, Flex} from '@sanity/ui'
function CustomToolMenu(props: ToolMenuProps) {
const {activeToolName, context, tools} = props
const isSidebar = context === 'sidebar'
// Change flex direction depending on context
const direction = isSidebar ? 'column' : 'row'
return (
<Flex gap={1} direction={direction}>
{tools.map((tool) => (
<Button
as={ToolLink}
icon={tool.icon || PlugIcon}
key={tool.name}
name={tool.name}
padding={3}
selected={tool.name === activeToolName}
text={tool.title || tool.name}
tone="primary"
/>
))}
</Flex>
)
}