> For AI agents: the complete Sanity documentation index is available at [https://www.sanity.io/docs/llms.txt](https://www.sanity.io/docs/llms.txt).

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

> [!WARNING]
> Beta API
> `unstable_defineView` can change without notice.

## Declare the panel

**sanity.cli.ts**

```typescript
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.

## Wrap the panel in providers

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:

**src/Providers.tsx**

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

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

## Export the panel

**src/panel.tsx**

```tsx
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.

## Panel size

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.

## Next steps

[Render a tile](https://www.sanity.io/docs/dashboard-beta/render-a-tile)
Show a view on the Dashboard home page.

[Run a background service](https://www.sanity.io/docs/dashboard-beta/run-a-background-service)
Start work that doesn't need a visible panel.

[Extension API reference](https://www.sanity.io/docs/dashboard-beta/extension-api-reference)
Look up panel component props.