Skip to content

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,
    },
  },
})

Layout

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.

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.

Example

// ./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,
    }
  }
})

Logo

The logo component for your studio that appears in the navbar. Replace the default logo with your own logo to brand your studio.

Properties

  • 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.

Example

// ./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,
    }
  }
})

Navbar

The navbar component in the studio.

Properties

  • 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.

Example

// ./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,
    }
  }
})

Tool menu

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.

Properties

  • 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.

Example

// ./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>
  )
}

Updated on March 28, 2023

Was this article helpful?