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

# Root Components

Root Components customize the Admin Panel across every route. Configure them through the root `admin.components` object.

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

export default buildConfig({
  admin: {
    components: {
      actions: ['/components/HelpAction#HelpAction'],
      graphics: {
        Icon: '/components/BrandIcon#BrandIcon',
        Logo: '/components/BrandLogo#BrandLogo',
      },
    },
  },
  collections: [],
})
```

## Config Options

`admin.components` is the `RootAdminComponents` type. The other root `admin` options are listed in [Admin panel](https://docs.frogbot.ai/admin/overview.md#admin-options).

| Option | Type | Default | Description |
| - | - | - | - |
| `actions` | `FrogBotComponent[]` | `[]` | Components at the top right of the Admin Panel, in array order. |
| `beforeLogin` | `FrogBotComponent[]` | `[]` | Components before the login form's email and password fields. |
| `afterLogin` | `FrogBotComponent[]` | `[]` | Components after the login form's fields. When the user collection configures `auth.signIn`, FrogBot appends its sign-in buttons after your components. |
| `header` | `FrogBotComponent[]` | `[]` | Components above the admin panel's top bar, on every signed-in page. |
| `beforeDashboard` | `FrogBotComponent[]` | `[]` | Components on the dashboard, above its content. Renders only on the default dashboard, not one replaced with `views.dashboard`. |
| `afterDashboard` | `FrogBotComponent[]` | `[]` | Components on the dashboard, below its content. Renders only on the default dashboard, not one replaced with `views.dashboard`. |
| `beforeNavLinks` | `FrogBotComponent[]` | `[]` | Components in the sidebar above the nav links. |
| `afterNavLinks` | `FrogBotComponent[]` | `[]` | Components in the sidebar below the nav links and sections. |
| `beforeBottomRail` | `FrogBotComponent[]` | `[]` | Components in the bottom sidebar rail, above Account and Settings. |
| `afterBottomRail` | `FrogBotComponent[]` | `[]` | Components in the bottom sidebar rail, below Account and Settings. |
| `beforeSidebarClose` | `FrogBotComponent[]` | `[]` | Components in the expanded sidebar header, left of the collapse button. |
| `beforeAccountMenu` | `FrogBotComponent[]` | `[]` | Account menu items above Settings. |
| `afterAccountMenu` | `FrogBotComponent[]` | `[]` | Account menu items below Settings. |
| `settingsMenu` | `FrogBotComponent[]` | `[]` | Account menu items after `afterAccountMenu`. |
| `logout` | `{ Button?: FrogBotComponent }` | Built-in Log out item | `Button` replaces the account menu's Log out item. |
| `chat` | `{ Chat?, Greeting?, AssistantMessageActions?, UserMessageActions? }` | Built-in chat components | Admin chat slots; each value is a `FrogBotComponent`. See [Chat](#chat). |
| `graphics` | `{ Icon?: FrogBotComponent, Logo?: FrogBotComponent }` | FrogBot head mark and wordmark | `Icon` replaces the compact mark in navigation. `Logo` replaces the full mark on the login page and the empty-chat greeting fallback. |
| `Nav` | `FrogBotComponent` | FrogBot sidebar | Replaces the complete sidebar navigation. See [Replace the sidebar](https://docs.frogbot.ai/admin/admin-navigation.md#replace-the-sidebar). |
| `navItems` | `NavItem[]` | `[]` | Links above your collections. See [Navigation item options](https://docs.frogbot.ai/admin/admin-navigation.md#navigation-item-options). |
| `navSections` | `FrogBotComponent[]` | `['@frogbotai/ui/admin/rsc#CollectionsSection']` | Sidebar sections below the links. Setting it replaces the default array. See [Configure sections](https://docs.frogbot.ai/admin/admin-navigation.md#configure-sections). |
| `providers` | `ProviderComponent[]` | `[]` | Components that wrap the Admin Panel and render `children`, outermost first. See [Custom Providers](https://docs.frogbot.ai/custom-components/custom-providers.md). |
| `views` | `Record<string, AdminViewConfig>` | Built-in views, plus a `settings` view at `/settings` | Replaces built-in root views (`account`, `dashboard`, `settings`) or adds routes under any other key. See [View options](https://docs.frogbot.ai/custom-components/custom-views.md#view-options). |

The `chat` slots are:

| Option | Type | Default | Description |
| - | - | - | - |
| `Chat` | `FrogBotComponent` | Built-in conversation surface | Replaces the complete chat surface. |
| `Greeting` | `FrogBotComponent` | Built-in greeting | Replaces the empty-chat greeting. It receives `avatar`, `logo`, `name`, and `userName`. |
| `AssistantMessageActions` | `FrogBotComponent` | Built-in actions | Replaces the controls under assistant messages. |
| `UserMessageActions` | `FrogBotComponent` | Built-in actions | Replaces the controls under user messages. |

See [Chat persistence](https://docs.frogbot.ai/chat/overview.md#customize-admin-chat-components) for the props each chat slot receives. See [Custom Providers](https://docs.frogbot.ai/custom-components/custom-providers.md), [Custom Views](https://docs.frogbot.ai/custom-components/custom-views.md), and [Dashboard](https://docs.frogbot.ai/custom-components/dashboard.md) for those larger extension points.

## Components

### actions

Actions add controls to the Admin Panel header.

```tsx theme={"theme":"tokyo-night"}
import { Button } from '@frogbotai/ui'

export function HelpAction() {
  return <Button asChild><a href="/help">Help</a></Button>
}
```

### beforeLogin and afterLogin

Use `beforeLogin` and `afterLogin` to place content around the login fields:

```ts theme={"theme":"tokyo-night"}
components: {
  beforeLogin: ['/components/LoginNotice#LoginNotice'],
  afterLogin: ['/components/LoginHelp#LoginHelp'],
}
```

### Sidebar slots

Use the sidebar slots without replacing its built-in behavior:

```ts theme={"theme":"tokyo-night"}
components: {
  beforeSidebarClose: ['/components/WorkspaceName#WorkspaceName'],
  beforeNavLinks: ['/components/NavHeader#NavHeader'],
  afterNavLinks: ['/components/NavFooter#NavFooter'],
  beforeBottomRail: ['/components/SupportLink#SupportLink'],
  afterBottomRail: ['/components/Version#Version'],
}
```

### Account menu

Add items to the account menu or replace its Log out item:

```ts theme={"theme":"tokyo-night"}
components: {
  beforeAccountMenu: ['/components/WorkspaceSwitcher#WorkspaceSwitcher'],
  afterAccountMenu: ['/components/SupportLink#SupportLink'],
  logout: { Button: '/components/LogoutButton#LogoutButton' },
}
```

See [Customize the account menu](https://docs.frogbot.ai/admin/admin-navigation.md#customize-the-account-menu) for the item order and a sign-out example.

### Nav

`Nav` replaces the complete sidebar. Use `navItems` or `navSections` when you only need to change its contents.

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

export function CustomNav() {
  return <nav><Link href="/admin">Home</Link></nav>
}
```

```ts theme={"theme":"tokyo-night"}
components: {
  navItems: [
    { label: 'Operations', path: '/admin/operations' },
  ],
  navSections: ['/components/ProjectSection#ProjectSection'],
}
```

Navigation items are empty by default. Setting `navSections` replaces the default Collections section, so include `@frogbotai/ui/admin/rsc#CollectionsSection` to keep it. See [Admin navigation](https://docs.frogbot.ai/admin/admin-navigation.md) for New Chat and Recents examples.

### Chat

Chat slots customize the conversation, greeting, and message actions:

```ts theme={"theme":"tokyo-night"}
components: {
  chat: {
    Chat: '/components/ProjectChat#ProjectChat',
    Greeting: '/components/ProjectGreeting#ProjectGreeting',
    AssistantMessageActions: '/components/AssistantActions#AssistantActions',
    UserMessageActions: '/components/UserActions#UserActions',
  },
}
```

### graphics.Icon

`graphics.Icon` is the compact mark used in navigation.

```tsx theme={"theme":"tokyo-night"}
export function BrandIcon() {
  return <img src="/brand/icon.svg" alt="Acme" />
}
```

### graphics.Logo

`graphics.Logo` is the full mark used on the login page.

```tsx theme={"theme":"tokyo-night"}
export function BrandLogo() {
  return <img src="/brand/logo.svg" alt="Acme" />
}
```

## Component props

Type server components in these slots with `RootComponentServerProps`:

```tsx theme={"theme":"tokyo-night"}
import type { RootComponentServerProps } from 'frogbot'

export function SupportLink({ req, user }: RootComponentServerProps) {
  const agents = Object.keys(req?.frogbot.agents ?? {})

  return <a href="/support">Support ({user?.email}, {agents.length} agents)</a>
}
```

Root component props:

| Prop | Type | Default | Description |
| - | - | - | - |
| `req` | `FrogBotRequest` | Optional | The current request. Use `req?.frogbot` to reach FrogBot. Not passed to login page components or the dashboard slots. |
| `user` | `UntypedUser` | Optional | The signed-in user, or `undefined` when nobody is signed in. Use `req.user` for authorization decisions. |
| `permissions` | `SanitizedPermissions` | Optional | The current user's collection and admin permissions. |
| `visibleEntities` | `VisibleEntities` | Optional | Slugs of the collections visible to the current user. |
| `i18n` | `I18nClient` | Required | Translation helpers and the current admin language. |
| `locale` | `Locale` | Optional | The current content locale when localization is enabled. |
| `params` | `Params` | Optional | Route parameters of the current admin page. |
| `searchParams` | `Params` | Optional | Query string parameters of the current admin page. |
| `viewType` | `ViewTypes` | Optional | The kind of view being rendered, such as `'list'` or `'document'`. |
| `documentSubViewType` | `DocumentSubViewTypes` | Optional | The document sub-view, such as `'default'` or `'versions'`, on document routes. |
| `id` | `string \| number` | Optional | Part of the shared type; the built-in root slots don't set it. |

`req` is optional:

* Sidebar, account menu, top bar, and custom `Nav` components receive `req`. Use `req?.frogbot` to reach FrogBot.
* Login page components (`beforeLogin`, `afterLogin`, and `graphics.Logo`) and the dashboard slots (`beforeDashboard` and `afterDashboard`) don't receive `req`. Use `getCachedFrogBot()` from `frogbot` instead.


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