Built-in UI components

The tldraw UI system provides a comprehensive set of components that you can use and customize. These components are organized into high-level UI elements and low-level primitives.

Available components

You can access and override any of these components through the components prop:

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

const components: TLUiComponents = {
  Toolbar: MyCustomToolbar,
  StylePanel: MyCustomStylePanel,
  // ... other components
}

export default function App() {
  return <Tldraw components={components} />
}

High-level components

The main toolbar containing drawing tools and shape tools.

import { DefaultToolbar } from 'tldraw'

// Default usage (included automatically)
<DefaultToolbar />

// With custom orientation
<DefaultToolbar orientation="vertical" />

// With custom overflow settings
<DefaultToolbar
  minItems={4}
  maxItems={8}
  minSizePx={310}
  maxSizePx={470}
/>

Props:

orientation?: 'horizontal' | 'vertical' - Toolbar orientation (default: horizontal)
minItems?: number - Minimum visible items before overflow (default: 4)
maxItems?: number - Maximum visible items (default: 8)
minSizePx?: number - Minimum size in pixels (default: 310)
maxSizePx?: number - Maximum size in pixels (default: 470)
children?: ReactNode - Custom toolbar content

MainMenu

The main dropdown menu with file operations and settings.

import { DefaultMainMenu } from 'tldraw'

<DefaultMainMenu>
  {/* Custom menu content */}
</DefaultMainMenu>

StylePanel

The panel showing style options for selected shapes.

import { DefaultStylePanel } from 'tldraw'

<DefaultStylePanel />

// Mobile version
<DefaultStylePanel isMobile />

// With custom styles
<DefaultStylePanel styles={customStyles} />

Props:

isMobile?: boolean - Use mobile layout
styles?: ReadonlySharedStyleMap | null - Custom style map
children?: ReactNode - Custom style panel content

ContextMenu

The right-click context menu.

import { DefaultContextMenu } from 'tldraw'

<DefaultContextMenu>
  {/* Custom context menu items */}
</DefaultContextMenu>

ActionsMenu

Quick actions menu (undo, redo, etc.).

import { DefaultActionsMenu } from 'tldraw'

<DefaultActionsMenu />

HelpMenu

Help menu with keyboard shortcuts and documentation links.

import { DefaultHelpMenu } from 'tldraw'

<DefaultHelpMenu />

ZoomMenu

Zoom controls menu.

import { DefaultZoomMenu } from 'tldraw'

<DefaultZoomMenu />

PageMenu

Page management menu for multi-page documents.

import { DefaultPageMenu } from 'tldraw'

<DefaultPageMenu />

NavigationPanel

Zoom controls and page navigation.

import { DefaultNavigationPanel } from 'tldraw'

<DefaultNavigationPanel />

QuickActions

Quick action buttons (undo, redo, delete, duplicate).

import { DefaultQuickActions } from 'tldraw'

<DefaultQuickActions />

HelperButtons

Helper buttons for special states (back to content, exit pen mode, stop following).

import { DefaultHelperButtons } from 'tldraw'

<DefaultHelperButtons />

Minimap

Minimap overview of the canvas.

import { DefaultMinimap } from 'tldraw'

<DefaultMinimap />

SharePanel

Share and collaboration controls (shown in multiplayer contexts).

import { DefaultSharePanel } from 'tldraw'

<DefaultSharePanel />

Specialized components

KeyboardShortcutsDialog

Dialog showing available keyboard shortcuts.

import { DefaultKeyboardShortcutsDialog } from 'tldraw'

<DefaultKeyboardShortcutsDialog />

Dialogs

Container for all modal dialogs.

import { DefaultDialogs } from 'tldraw'

<DefaultDialogs />

Toasts

Toast notification system.

import { DefaultToasts } from 'tldraw'

<DefaultToasts />

DebugPanel

Debug information panel (shown when debug mode is enabled).

import { DefaultDebugPanel } from 'tldraw'

<DefaultDebugPanel />

DebugMenu

Debug menu with developer tools.

import { DefaultDebugMenu } from 'tldraw'

<DefaultDebugMenu />

RichTextToolbar

Floating toolbar shown when editing text.

import { DefaultRichTextToolbar } from 'tldraw'

<DefaultRichTextToolbar />

ImageToolbar

Floating toolbar shown when an image is selected.

import { DefaultImageToolbar } from 'tldraw'

<DefaultImageToolbar />

VideoToolbar

Floating toolbar shown when a video is selected.

import { DefaultVideoToolbar } from 'tldraw'

<DefaultVideoToolbar />

UI primitives

Low-level components for building custom UI:

TldrawUiButton

Button component with multiple variants.

import { TldrawUiButton, TldrawUiButtonIcon } from 'tldraw'

// Icon button
<TldrawUiButton type="icon" title="Click me">
  <TldrawUiButtonIcon icon="edit" />
</TldrawUiButton>

// Tool button
<TldrawUiButton type="tool" isActive={isActive}>
  <TldrawUiButtonIcon icon="draw" />
</TldrawUiButton>

// Normal button
<TldrawUiButton type="normal" onClick={handleClick}>
  Click me
</TldrawUiButton>

// Primary button
<TldrawUiButton type="primary">
  Save
</TldrawUiButton>

// Danger button
<TldrawUiButton type="danger">
  Delete
</TldrawUiButton>

Button types:

icon - Icon-only button
tool - Tool button with active state
normal - Standard button
primary - Primary action button
danger - Destructive action button
low - Low emphasis button
menu - Menu button
help - Help button

TldrawUiDropdownMenu

Dropdown menu component.

import { TldrawUiDropdownMenu } from 'tldraw'

<TldrawUiDropdownMenu id="my-menu">
  {/* Menu items */}
</TldrawUiDropdownMenu>

TldrawUiInput

Input field component.

import { TldrawUiInput } from 'tldraw'

<TldrawUiInput
  value={value}
  onChange={(e) => setValue(e.target.value)}
  placeholder="Enter text..."
/>

TldrawUiSelect

Select dropdown component.

import { TldrawUiSelect } from 'tldraw'

<TldrawUiSelect
  id="my-select"
  value={value}
  options={[
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
  ]}
  onChange={(value) => setValue(value)}
/>

TldrawUiSlider

Slider component.

import { TldrawUiSlider } from 'tldraw'

<TldrawUiSlider
  value={value}
  onChange={(value) => setValue(value)}
  min={0}
  max={100}
  step={1}
/>

TldrawUiIcon

Icon component.

import { TldrawUiIcon } from 'tldraw'

<TldrawUiIcon icon="edit" />
<TldrawUiIcon icon="trash" small />

TldrawUiKbd

Keyboard shortcut display component.

import { TldrawUiKbd } from 'tldraw'

<TldrawUiKbd>Ctrl+Z</TldrawUiKbd>

TldrawUiDialog

Dialog/modal component.

import { TldrawUiDialog } from 'tldraw'

<TldrawUiDialog onClose={handleClose}>
  {/* Dialog content */}
</TldrawUiDialog>

TldrawUiPopover

Popover component.

import { TldrawUiPopover } from 'tldraw'

<TldrawUiPopover id="my-popover">
  {/* Popover content */}
</TldrawUiPopover>

TldrawUiMenuItem

Basic menu item.

import { TldrawUiMenuItem } from 'tldraw'

<TldrawUiMenuItem
  id="my-item"
  label="My Item"
  icon="edit"
  onSelect={() => console.log('Selected')}
/>

TldrawUiMenuGroup

Menu item group.

import { TldrawUiMenuGroup } from 'tldraw'

<TldrawUiMenuGroup id="my-group">
  {/* Menu items */}
</TldrawUiMenuGroup>

TldrawUiMenuSubmenu

Submenu component.

import { TldrawUiMenuSubmenu } from 'tldraw'

<TldrawUiMenuSubmenu
  id="my-submenu"
  label="More options"
>
  {/* Submenu items */}
</TldrawUiMenuSubmenu>

TldrawUiMenuActionItem

Menu item that triggers an action.

import { TldrawUiMenuActionItem } from 'tldraw'

<TldrawUiMenuActionItem actionId="copy" />

TldrawUiMenuCheckboxItem

Checkbox menu item.

import { TldrawUiMenuCheckboxItem } from 'tldraw'

<TldrawUiMenuCheckboxItem
  id="my-checkbox"
  label="Toggle feature"
  checked={isEnabled}
  onSelect={() => setIsEnabled(!isEnabled)}
/>

Component composition

You can compose these components to create custom UI:

import {
  TldrawUiButton,
  TldrawUiButtonIcon,
  TldrawUiDropdownMenu,
  TldrawUiMenuGroup,
  TldrawUiMenuItem,
  useEditor,
} from 'tldraw'

function CustomToolbar() {
  const editor = useEditor()
  
  return (
    <div className="my-custom-toolbar">
      <TldrawUiButton
        type="tool"
        onClick={() => editor.setCurrentTool('select')}
      >
        <TldrawUiButtonIcon icon="tool-pointer" />
      </TldrawUiButton>
      
      <TldrawUiDropdownMenu id="custom-menu">
        <TldrawUiMenuGroup id="shapes">
          <TldrawUiMenuItem
            id="rectangle"
            label="Rectangle"
            icon="geo-rectangle"
            onSelect={() => editor.setCurrentTool('rectangle')}
          />
          <TldrawUiMenuItem
            id="ellipse"
            label="Ellipse"
            icon="geo-ellipse"
            onSelect={() => editor.setCurrentTool('ellipse')}
          />
        </TldrawUiMenuGroup>
      </TldrawUiDropdownMenu>
    </div>
  )
}

Get started

Core concepts

Guides

Shapes

UI and theming

Advanced

Documentation Index

​Available components

​High-level components

​Toolbar

​MainMenu

​StylePanel

​ContextMenu

​ActionsMenu

​HelpMenu

​ZoomMenu

​PageMenu

​NavigationPanel

​QuickActions

​HelperButtons

​Minimap

​SharePanel

​Specialized components

​KeyboardShortcutsDialog

​Dialogs

​Toasts

​DebugPanel

​DebugMenu

​Toolbar-specific components

​RichTextToolbar

​ImageToolbar

​VideoToolbar

​UI primitives

​TldrawUiButton

​TldrawUiDropdownMenu

​TldrawUiInput

​TldrawUiSelect

​TldrawUiSlider

​TldrawUiIcon

​TldrawUiKbd

​TldrawUiDialog

​TldrawUiPopover

​Menu item components

​TldrawUiMenuItem

​TldrawUiMenuGroup

​TldrawUiMenuSubmenu

​TldrawUiMenuActionItem

​TldrawUiMenuCheckboxItem

​Component composition

​Next steps

Customization

Menus and toolbars