User interface

The tldraw package includes a complete user interface with menus, toolbars, keyboard shortcuts, and style panels. You can hide it entirely, listen to events, or customize individual components.

Each of those is a prop on <Tldraw>: hideUi hides everything, components replaces or removes individual pieces, and onUiEvent reports every UI interaction:

import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'

export default function App() {
	return (
		<div style={{ position: 'fixed', inset: 0 }}>
			<Tldraw
				hideUi={false}
				components={{ PageMenu: null }}
				onUiEvent={(name, data) => console.log(name, data)}
			/>
		</div>
	)
}

Learn more

• UI components — Component architecture, overrides, and customization
• UI primitives — Buttons, menus, dialogs for building custom interfaces
• Actions — Add or override actions and keyboard shortcuts
• Styles — The style panel and custom style properties
• Themes — Color modes and custom color palettes
• Accessibility — Keyboard navigation and screen reader support
• Internationalization — Translations and language support

Examples

• Hide UI — Hide the entire default interface
• Custom UI — Build a completely custom interface
• Hide UI components — Selectively hide specific components
• Action overrides — Customize actions and shortcuts
• UI events — Track user interactions