Skip to content
Rebase LogoRebase

Slots

Overview

Section titled “Overview”

Slots are named UI extension points where you can inject custom React components. Each slot has typed props specific to its location in the UI. Rebase ships with 27 built-in slots covering the home page, navigation, collection views, entity forms, the app bar, and more.

Every slot in the table below is rendered. If you register a component for one and see nothing, the fault is in your component or its props, not in the slot — UNRENDERED_SLOTS in @rebasepro/cms-types is empty, and a test derives that list by scanning for render sites, so a slot cannot be declared here without one again.

Usage

Section titled “Usage”

Via <Rebase> prop

Section titled “Via <Rebase> prop”
<Rebase
    client={client}
    slots={[
        {
            slot: "navigation.footer",
            Component: MyNavigationFooter,
            order: 10
        },
        {
            slot: "collection.actions",
            Component: BulkExportButton
        }
    ]}
>

Via plugin

Section titled “Via plugin”
const myPlugin: RebasePlugin = {
    key: "my-plugin",
    slots: [
        {
            slot: "home.cards",
            Component: AnalyticsCard,
            order: 20
        }
    ]
};

Available Slots

Section titled “Available Slots”

Home Page

Section titled “Home Page”
Slot Props Type Description
home.actions PluginGenericProps Actions in the home page header
home.cards PluginHomePageAdditionalCardsProps Additional cards on the home page
home.children.start PluginGenericProps Content at the start of the home page
home.children.end PluginGenericProps Content at the end of the home page
home.card.widget HomeCardWidgetSlotProps Compact widget inside a home page collection card
home.collection.actions PluginHomePageActionsProps Actions on home page collection cards
Section titled “Navigation”
Slot Props Type Description
navigation.header NavigationSlotProps Below the logo in the sidebar drawer
navigation.footer NavigationSlotProps Above the collapse toggle at the bottom of the drawer

Collection View

Section titled “Collection View”
Slot Props Type Description
collection.actions CollectionActionsProps End-side toolbar actions (after collection Actions)
collection.actions.start CollectionActionsProps Start-side toolbar actions (alongside filters)
collection.header.action CollectionHeaderActionProps Column header action buttons
collection.add-column CollectionAddColumnProps “Add column” area in table header
collection.error CollectionErrorProps Error state display for a collection
collection.toolbar CollectionToolbarProps Extra widgets inside the collection toolbar row
collection.empty-state CollectionEmptyStateProps Custom empty-state when collection has no data
collection.widgets CollectionWidgetsSlotProps Widgets above the collection table

Entity / Form

Section titled “Entity / Form”
Slot Props Type Description
form.actions PluginFormActionProps Actions in the entity form action bar
form.actions.top PluginFormActionProps Actions above the form action bar
form.before PluginFormActionProps Content before the form title/field list
form.after PluginFormActionProps Content after the form field list
entity.row.actions EntityRowActionsProps Per-row actions in collection tables, beside the built-in row tools
entity.field.before EntityFieldSlotProps UI injected before an individual form field
entity.field.after EntityFieldSlotProps UI injected after an individual form field

Global / Shell

Section titled “Global / Shell”
Slot Props Type Description
global.search GlobalSearchProps Cross-collection search, in the app bar beside the breadcrumbs
shell.toolbar ShellToolbarProps Top-level actions, at the end of the app bar

Kanban

Section titled “Kanban”
Slot Props Type Description
kanban.setup KanbanSetupProps Kanban board setup UI
kanban.add-column KanbanAddColumnProps “Add column” in kanban view

Slot Props Reference

Section titled “Slot Props Reference”

All slot prop types are exported from @rebasepro/types and can be imported for type-safe slot components:

import type { CollectionActionsProps, NavigationSlotProps } from "@rebasepro/cms-types";

Each props type provides access to the context relevant to the slot’s location — collection metadata, entity data, navigation state, and more. Refer to the individual type definitions for full property details.

Section titled “Related”