Upgraded and refreshed Studio UI

This update significantly upgrades the Sanity Studio user interface (UI) and Sanity UI. The goal here is to align it with what you expect for modern tooling and reduce elements where possible to make it easier and smoother. We also wanted to bring more consistency in styling and interactivity.

At a high level, we have:

• Updated the navigation bar with fewer visual elements
• Reduced visual noise in document lists and made it easier to discern between documents and folders
• Made typography, line heights, and styling more consistent
• Updated color themes to add more vibrancy where interactive elements need to stand out
• Cleaned up the document form and added a large title to make it easier for editors to discern where they are
• Made dates human readable (exact date time accessible on hover)
• Added simple animations to improve how it feels to use the Studio
• Removed the components.studio.logo API to more clearly signpost what workspace you are in (you can still add custom logos with workspace icons)
• Done the groundwork to simplify branding and theming the Studio
• Updated Sanity UI with new studio-specific UI components and better support for the new localization features

To install this upgrade (v3.23.0) run:

npm install sanity@latest

If you have used Sanity UI (@sanity/ui) for Studio customization, you should install the beta of the new major release, too.

npm install @sanity/ui@beta

We have worked hard to identify edge cases, but this update might break with customizations, and plugins that use and haven't updated their Sanity UI dependency might look a bit out of place. We recommend you test out the upgrade on a branch and preview deployment.

If this upgrade for some reason doesn't work with your current Studio, you can downgrade to v3.22.0 (and minor patch releases for it). Edit package.json and run npm install:

{
  //...rest of package.json
  "dependencies": {
    "sanity": "^3.22.x"
  }
}

If you have to do this, tell us what doesn't work for you in an issue on GitHub.

This upgrade changes how the Studio feels and looks; in some cases, it moves affordances that your content team might have used to. We think this upgrade improves the editorial experience, but it is still good to inform your team that this change is coming. And use that opportunity to teach them about keyboard shortcuts like cmd + K / ctrl + K to open the search bar.

If you are a plugin maintainer and want to support this upgrade, then you can add ^2.0.0-beta to the peer-dependency range of @sanity/ui:

{
  //...rest of package.json
  "peerDependencies": {
    "@sanity/ui": "^1.0 || ^2.0.0-beta"
  }
}

This will make it stay compatible with future stable/non-beta releases of @sanity/ui@2.x.

This release deprecates some parts of the Studio Customization Framework.

The studio.components.logo are no longer rendered. For custom logos, use the icon property in the workspace configuration instead:

// sanity.config.ts
import {defineConfig} from 'sanity'
import {RobotIcon, RocketIcon} from '@sanity/icons'
import {deskTool} from 'sanity/desk'
import {schemaTypes} from './schemas'

export default defineConfig({
  projectId: '<projectId>',
  dataset: 'production',
  name: 'Production',
  title: 'Default Workspace',
  icon: RobotIcon,
  plugins: [deskTool()],
  schema: {
    types: schemaTypes,
  },
})

Tool icons are no longer rendered; only the tool name is used in the navigation bar. There is no workaround for this.

The Structure Builder API has allowed for a menu group title to be set. This is no longer displayed.