Studio components
The studio components API allows you to customize the UI of your Sanity Studio.
Introduction
The studio.components config property enables configuration-level customization of your Studio. The following components can be overridden:
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,
}
}
})Pro tip
Looking to change the Studio logo? You can customize it with the icon property in the workspace configuration.
Customizing components with renderDefault
The props for each component available in the API include a callback function named renderDefault. As the name implies, renderDefault will render the default component. When you call renderDefault, you also pass along the props needed to render the default component. You can modify the props to your liking before passing them along. If you want to completely replace the component in question with your own markup, do not invoke renderDefault in your return statement.
// MyEnhancedNavbar.jsx
import { Stack, Card, Flex, Text } from '@sanity/ui'
// Adds markup and invokes renderDefault()
function MyEnhancedNavbar(props) {
return (
<Stack>
<Card padding={3} tone="caution">
<Flex justify="center">
<Text>Important Message: Please Read!</Text>
</Flex>
</Card>
<>{props.renderDefault(props)}</>
</Stack>
)
}
// Completely replaces default navbar
function MySuperiorNavbar() {
return (
<Stack>
<Card padding={3} tone="caution">
<Flex justify="center">
{/* Custom navbar stuff goes here */}
</Flex>
</Card>
</Stack>
)
}For some components, like navbar and layout, the renderDefault callback is the only prop passed along, while other components receive additional props.
For example, this component overrides each tool's title before rendering the default tool menu:
function MyToolMenu(props) {
// ToolMenuProps includes the tools from the project config, each with a title
const { renderDefault, tools } = props
// Overwrite each tool's `title` after spreading the props object
return renderDefault({
...props,
tools: tools.map((tool) => ({ ...tool, title: tool.title.toUpperCase() })),
})
}This example filters which tools appear in the tool menu:
import { isDev } from 'sanity'
function MyToolMenu(props) {
// ToolMenuProps includes list of installed tools, and more
const { tools, renderDefault } = props
// Only show the dev-tool if the isDev variable resolves to true
const availableTools = isDev ? tools : tools.filter(tool => tool.name !== 'dev-tool')
return renderDefault({ ...props, tools: availableTools })
}Composing renderDefault()
The rendering of components in this API uses a middleware pattern. This means that plugin customizations are applied in a chain. Each plugin may call props.renderDefault(props) to defer to default rendering. If any component in the chain fails to call the callback function, the chain breaks.