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

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

## Declare the tile

**sanity.cli.ts**

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

## Choose a size

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

## Choose an order

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

## Wrap the tile in providers

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:

**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 tile

**src/tile.tsx**

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

## Next steps

[Render a panel](https://www.sanity.io/docs/dashboard-beta/render-a-panel)
Open a view from the dock.

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