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

Prev
Tools
Next
Handles