Hide UI components
Hide individual UI components.
import { TLUiComponents, Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
// The type here is include only to ensure this example contains all possible ui components,
const components: Required<TLUiComponents> = {
ContextMenu: null,
ActionsMenu: null,
HelpMenu: null,
ZoomMenu: null,
MainMenu: null,
Minimap: null,
StylePanel: null,
PageMenu: null,
NavigationPanel: null,
Toolbar: null,
KeyboardShortcutsDialog: null,
QuickActions: null,
HelperButtons: null,
DebugPanel: null,
DebugMenu: null,
SharePanel: null,
MenuPanel: null,
TopPanel: null,
CursorChatBubble: null,
RichTextToolbar: null,
ImageToolbar: null,
VideoToolbar: null,
Dialogs: null,
Toasts: null,
A11y: null,
FollowingIndicator: null,
}
export default function UiComponentsHiddenExample() {
return (
<div className="tldraw__editor">
<Tldraw components={components} />
</div>
)
}
UI components can be hidden by providing null as their value within components. In this example, all configurable UI components are hidden.
Is this page helpful?
Prev
Format rich text on multiple shapesNext
Menu system hover