Studio Components Reference
The studio.components config API lets you override parts of the studio UI with your own 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, logo, navigation bar and tool menu:
// ./sanity.config.tsx|jsx
import {defineConfig} from 'sanity'
import {MyLayout, MyNavbar, MyToolMenu} from './components/studio'
export default defineConfig({
// rest of config ...
studio: {
components: {
layout: MyLayout,
logo: ({ title, renderDefault, ...props }) => {
return (
<div title={title}>
{renderDefault({ ...props, title: '🚀 🌈 🦄 💀'})}
</div>
)
},
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,
}
}
})
The logo component for your studio that appears in the navbar. Replace the default logo with your own logo to brand your studio.
titlestring
The title displayed in the logo. The default title is the title configured in the studio config.
renderDefaultfunction
A callback function that renders the default logo component. The function takes the component's properties as an argument, and these properties can be modified.
// ./sanity.config.tsx|jsx
import {defineConfig, LogoProps} from 'sanity'
import {Text} from '@sanity/ui'
function CustomLogo(props: LogoProps) {
return (
<Text style={{color: 'magenta'}} weight="bold">
{props.title}
</Text>
)
}
export default defineConfig({
// rest of config ...
title: 'My studio',
studio: {
components: {
logo: CustomLogo,
}
}
})
The navbar component in the studio.
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 links to all of your tools. The tool menu is displayed in two different places depending on the screen size width. On larger screens, it appears in the top bar, while on smaller 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>
)
}