> ## Documentation Index
> Fetch the complete documentation index at: https://docs.frogbot.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Document Views

Document Views are the routes used to work with one collection document. They share the document layout and can provide tab navigation.

Configure them under `admin.components.edit.views`. The complete collection slot table is in [Collection Custom Components](https://docs.frogbot.ai/configuration/collections.md#custom-components).

```ts theme={"theme":"tokyo-night"}
import type { CollectionConfig } from 'frogbot'

export const Posts: CollectionConfig = {
  slug: 'posts',
  admin: {
    components: {
      edit: {
        views: {
          audit: {
            Component: '/components/AuditView#AuditView',
            path: '/audit',
            tab: {
              label: 'Audit log',
            },
          },
        },
      },
    },
  },
  fields: [],
}
```

## Document Root

The `root` view replaces the complete document area, including controls, tabs, and nested views. It must be the only entry in `views`. Use `default` instead when you only need to replace the editor.

```ts theme={"theme":"tokyo-night"}
views: {
  root: {
    Component: '/components/DocumentWorkspace#DocumentWorkspace',
  },
}
```

## Edit View

The `default` view is the main document editor. See [Edit View](https://docs.frogbot.ai/custom-components/edit-view.md) for its component slots.

## Document Tabs

A custom view can define a tab with a `label`, `href`, `order`, or custom `Component`. Every view and tab option is listed in [Document Views](https://docs.frogbot.ai/configuration/collections.md#document-views).

```ts theme={"theme":"tokyo-night"}
audit: {
  Component: '/components/AuditView#AuditView',
  path: '/audit',
  tab: {
    Component: '/components/AuditTab#AuditTab',
  },
}
```

### Tab Components

Use `DocumentTabServerProps` or `DocumentTabClientProps` from `frogbot` to type a custom tab. Use `next/link` for navigation.

```tsx theme={"theme":"tokyo-night"}
import type { DocumentTabServerProps } from 'frogbot'
import Link from 'next/link'

export function AuditTab({ path }: DocumentTabServerProps) {
  return <Link href={`${path}/audit`}>Audit log</Link>
}
```

```tsx theme={"theme":"tokyo-night"}
'use client'

import type { DocumentTabClientProps } from 'frogbot'
import Link from 'next/link'

export function AuditTab({ path }: DocumentTabClientProps) {
  return <Link href={`${path}/audit`}>Audit log</Link>
}
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.