Render a panel

Render a panel surface as part of your app.

A panel view is a narrow, persistent column that opens between the dock and the window. It is the same surface Notifications and Content Agent use, so a panel can sit alongside whichever app is in the window, not just your own.

Each panel view gets its own item in the Dashboard dock. Selecting the item opens the panel, and selecting it again closes it. An app can declare several panel views, but only one panel is open at a time.

import {defineApplication, defineCliConfig, definePanelView} from 'sanity/cli'

export default defineCliConfig({
  app: defineApplication({
    organizationId: 'your-organization-id',
    slug: 'content-activity',
    title: 'Content activity',
    views: [
      definePanelView({name: 'activity', title: 'Activity', src: './src/panel.tsx'}),
    ],
  }),
})

src is relative to the project root, the folder that contains sanity.cli.ts. The panel's name must be unique across the app's views and web workers.

Each panel renders in its own island, so it doesn't inherit the Dashboard's context or providers. Wrap it in SanityApp, the same provider your app's window uses:

import {SanityApp} from '@sanity/sdk-react'
import type {ReactNode} from 'react'

export function Providers({children}: {children: ReactNode}) {
  return (
    <SanityApp fallback={null}>
      {children}
    </SanityApp>
  )
}

import {unstable_defineView} from 'sanity/dashboard'
import {Providers} from './Providers'

export default unstable_defineView('panel', {
  title: ({view}) => view.title,
  panel: () => (
    <Providers>
      { /* the rest of your panel */ }
    </Providers>
  ),
})

The Dashboard shows the title component in the panel header, next to a close button, and the panel component in the body. Both receive view, which contains the view's name and title. Each component renders in its own island, so wrap any component that uses App SDK hooks in Providers. The title here only returns view.title, so it doesn't need them.

The panel opens 400 pixels wide beside the current app. Users can resize it from 280 pixels up to half the window width. On narrow screens, the panel fills the width.