Slot overrides

Pass an overrides object to replace a built-in component. Your version is used everywhere that component appears, without you having to find each place it is rendered.

import { TrueForgeUI, type AssistantMessageBubbleProps } from "@truefoundry/trueforge-ui";

function MyBubble({ children, error, actionBar, className }: AssistantMessageBubbleProps) {
  return (
    <div className={className} data-testid="my-bubble">
      {error}
      <div className="prose">{children}</div>
      {actionBar}
    </div>
  );
}

<TrueForgeUI
  server={server}
  layout="sidebar"
  overrides={{ AssistantMessageBubble: MyBubble }}
/>;

SlotOverrides is Partial<AtomSlots>, so overrides are type-checked against the default component’s signature. Import the exported *Props type for the slot you are replacing and honor the props you receive — several are rendered nodes (actionBar, error, approvalSlot) that the container supplies and expects you to place.

Commonly overridden slots

Messages and content

AssistantMessageBubble, UserMessageBubble, UserMessageEdit, UserMessageActionBar, MessageActionBar, MessageErrorBanner, MessageIndicator, MessageTimestamp, MessageGroup, Markdown, SyntaxHighlighter, OpenUiFenceBlock, CodeEditor, MonacoEditorCore, WelcomeScreen.

Composer

ComposerShell, ComposerLeftSection, ComposerRightSection, ComposerSendButton, AttachmentCard, AttachmentPickerButton, AttachmentPreviewDialog.The draft composer has its own slots — DraftComposerLeftSection, DraftComposerRightSection, DraftModelSelector, and DraftCompositeSelector — so you can restyle the draft chrome without touching the standard composer.The two sets interact. In a mutable draft the container substitutes the draft sections behind ComposerLeftSection / ComposerRightSection, but only while those slots are still at their defaults. Override either one and yours wins in draft mode too, which means the model and composite selectors disappear unless you render them yourself.

Thread shell and list

ThreadRootShell, ThreadViewportShell, ThreadComposerAreaShell, ScrollToBottomButton, MessageListSkeleton, HistoryLoader, ThreadListShell, ThreadListNewButton, ThreadListRow, ThreadListRowSkeleton, ThreadListEmptyState.

Tools and prompts

ToolCallCard, ToolCallContentBlock, ToolApprovalBar, ToolGroupCard, SubAgentCard, SandboxToolCallCard, SandboxArtifactDownload, ChatFileDownload, AgentStepsCard, and the prompt slots AskUserPrompt, McpAuthPrompt, ReasoningCard.

Agent library and shell

AgentsLibrary, AgentsLibraryButton, SaveAgentButton, SelectAgentEmptyState, ClearChatButton, ShellActionsActionSlot, Toast, ToastStack, Accordion, AccordionSummary, AccordionDetails.ShellActionsActionSlot exists purely to be overridden — it renders nothing by default and is the supported place to add your own chrome, such as a logout control, beside the theme and settings buttons. Layouts keep it mounted while Settings is open, so state in your component survives.

SlotOverrides is derived directly from the SDK’s default slot table, so autocomplete on the overrides object is an exact list of what can be overridden — nothing more, nothing less.

Some slots are override-only, meaning you supply your own component rather than wrapping a default: AskUserPrompt, McpAuthPrompt, and ReasoningCard publish their prop types but not the components, and Accordion, AccordionSummary, and AccordionDetails publish neither.

Button (Button.Primary / .Secondary / .Ghost / .Destructive) and IconButton are public design-system atoms. They are restyled through semantic tokens and CSS rather than slot overrides — see Theming.

Discovering slot names

SlotOverrides is a mapped type over every slot, so your editor autocompletes the available names as you type inside the overrides object, and hovering a name shows the component signature you need to match. That is the fastest way to find a slot. The groups above list the ones most applications touch.

Overriding outside TrueForgeUI

If you compose providers manually, pass overrides to SlotsProvider and keep it outside TrueForgeChatProvider:

<SlotsProvider overrides={{ ThreadListRow: MyRow }}>{/* ... */}</SlotsProvider>

Getting Started

TrueForge Harness

SDK

UI Chat

Project

Commonly overridden slots

Discovering slot names

Overriding outside TrueForgeUI

​Commonly overridden slots

​Discovering slot names

​Overriding outside TrueForgeUI

Commonly overridden slots

Discovering slot names

Overriding outside TrueForgeUI