Render a tile on the homepage

Show a tile view from your app on the Dashboard home page, and choose its size and order.

A tile is a view on the Dashboard home page. The home page collects the tiles from every app in your organization into one grid, sorted by order. Tiles appear for apps with default visibility only.

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

export default defineCliConfig({
  app: defineApplication({
    organizationId: 'your-organization-id',
    slug: 'content-summary',
    title: 'Content summary',
    views: [
      defineTileView({
        name: 'summary',
        title: 'Content summary',
        src: './src/tile.tsx',
        size: 'small',
        order: 10,
      }),
    ],
  }),
})

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

size is required and sets the tile's footprint in the grid:

• small: Half the width of the grid, at least 200 pixels tall.
• large: The full width of the grid, at least 360 pixels tall.
• banner: The full width of the grid, at least 120 pixels tall.

On screens narrower than 900 pixels, every tile is full width. Tiles grow taller to fit their content.

If size is anything else, sanity dev only warns and the app drops out of the local Dashboard, and sanity deploy stops with views.0.size: Invalid input.

order sorts the tiles from every app in ascending order and can be any number. Tiles without an order come last.

Each tile 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('tile', {
  tile: ({view}) => (
    <Providers>
      { /* content */ }
    </Providers>
  ),
})

The component receives view, which contains the tile's name, title, and size. Use size to adapt the layout to the footprint. The home page doesn't add a heading to the tile, so render view.title yourself.