Hide UI components
UI components can be hidden by providing null
as their value within components
. In this example, all configurable UI components are hidden.
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,
Dialogs: null,
Toasts: null,
A11y: null,
}
export default function UiComponentsHiddenExample() {
return (
<div className="tldraw__editor">
<Tldraw components={components} />
</div>
)
}
Is this page helpful?
Prev
Change default stylesNext
Things on the canvas