User interface and menus
Complete UI library with responsive components, customizable toolbars, and comprehensive menu architecture for professional applications.
Key features
Key features
Key features
Key features
Context menu system
Create rich dropdown and context menus with keyboard navigation, nested submenus, and positioning. Perfect for design apps where users expect right-click workflows.
Context menu system
Create rich dropdown and context menus with keyboard navigation, nested submenus, and positioning. Perfect for design apps where users expect right-click workflows.
Context menu system
Create rich dropdown and context menus with keyboard navigation, nested submenus, and positioning. Perfect for design apps where users expect right-click workflows.
Context menu system
Create rich dropdown and context menus with keyboard navigation, nested submenus, and positioning. Perfect for design apps where users expect right-click workflows.
Component overrides
Replace every UI component with your custom implementation. Swap out toolbars, menus, panels, or canvas overlays to match your app’s brand.
Component overrides
Replace every UI component with your custom implementation. Swap out toolbars, menus, panels, or canvas overlays to match your app’s brand.
Component overrides
Replace every UI component with your custom implementation. Swap out toolbars, menus, panels, or canvas overlays to match your app’s brand.
Component overrides
Replace every UI component with your custom implementation. Swap out toolbars, menus, panels, or canvas overlays to match your app’s brand.
Responsive breakpoints
Implement adaptive layouts that automatically adjust to different screen sizes and device orientations. Interface elements hide, resize, or reposition based on available space.
Responsive breakpoints
Implement adaptive layouts that automatically adjust to different screen sizes and device orientations. Interface elements hide, resize, or reposition based on available space.
Responsive breakpoints
Implement adaptive layouts that automatically adjust to different screen sizes and device orientations. Interface elements hide, resize, or reposition based on available space.
Responsive breakpoints
Implement adaptive layouts that automatically adjust to different screen sizes and device orientations. Interface elements hide, resize, or reposition based on available space.
Internationalization support
Menu labels, tooltips, and interface text automatically adapt to user language preferences with proper text direction handling.
Internationalization support
Menu labels, tooltips, and interface text automatically adapt to user language preferences with proper text direction handling.
Internationalization support
Menu labels, tooltips, and interface text automatically adapt to user language preferences with proper text direction handling.
Internationalization support
Menu labels, tooltips, and interface text automatically adapt to user language preferences with proper text direction handling.
UI where you feel at home
Intuitive context menus and overflow handling. UX that makes sense.
UI where you feel at home
Intuitive context menus and overflow handling. UX that makes sense.
UI where you feel at home
Intuitive context menus and overflow handling. UX that makes sense.
UI where you feel at home
Intuitive context menus and overflow handling. UX that makes sense.
Engineering details
Engineering details
Engineering details
Engineering details
Component provider system
The UI framework uses hierarchical React contexts to manage component overrides, themes, and state throughout the interface. This provider architecture delivers components their required props while supporting deep customization without prop drilling. The system handles component registration, override resolution, and fallback management automatically, letting you replace individual pieces or entire interface sections. In other words, you can customize every piece without breaking the whole.
Component provider system
The UI framework uses hierarchical React contexts to manage component overrides, themes, and state throughout the interface. This provider architecture delivers components their required props while supporting deep customization without prop drilling. The system handles component registration, override resolution, and fallback management automatically, letting you replace individual pieces or entire interface sections. In other words, you can customize every piece without breaking the whole.
Component provider system
The UI framework uses hierarchical React contexts to manage component overrides, themes, and state throughout the interface. This provider architecture delivers components their required props while supporting deep customization without prop drilling. The system handles component registration, override resolution, and fallback management automatically, letting you replace individual pieces or entire interface sections. In other words, you can customize every piece without breaking the whole.
Component provider system
The UI framework uses hierarchical React contexts to manage component overrides, themes, and state throughout the interface. This provider architecture delivers components their required props while supporting deep customization without prop drilling. The system handles component registration, override resolution, and fallback management automatically, letting you replace individual pieces or entire interface sections. In other words, you can customize every piece without breaking the whole.
Intelligent overflow management
The toolbar system is uses space calculations and dynamic component hiding based on available screen real estate. Components register their minimum sizes and priority levels, then the system automatically moves lower-priority items to overflow menus when space becomes constrained. This responsive behavior includes breakpoint detection, orientation change handling, and smooth transitions between expanded and collapsed states.
Intelligent overflow management
The toolbar system is uses space calculations and dynamic component hiding based on available screen real estate. Components register their minimum sizes and priority levels, then the system automatically moves lower-priority items to overflow menus when space becomes constrained. This responsive behavior includes breakpoint detection, orientation change handling, and smooth transitions between expanded and collapsed states.
Intelligent overflow management
The toolbar system is uses space calculations and dynamic component hiding based on available screen real estate. Components register their minimum sizes and priority levels, then the system automatically moves lower-priority items to overflow menus when space becomes constrained. This responsive behavior includes breakpoint detection, orientation change handling, and smooth transitions between expanded and collapsed states.
Intelligent overflow management
The toolbar system is uses space calculations and dynamic component hiding based on available screen real estate. Components register their minimum sizes and priority levels, then the system automatically moves lower-priority items to overflow menus when space becomes constrained. This responsive behavior includes breakpoint detection, orientation change handling, and smooth transitions between expanded and collapsed states.
Menu system and interaction patterns
The menu architecture is designed to support a variety of interaction styles, all from a single unified system. Standard dropdown menus provide familiar hover and keyboard navigation, while context menus adapt dynamically to what’s selected. Panel-based menus integrate into toolbars and sidebars, and on mobile, menus are touch-optimized with larger targets and gesture-friendly interactions. This consistency makes menus predictable for users while giving teams flexibility in how they present actions.
Menu system and interaction patterns
The menu architecture is designed to support a variety of interaction styles, all from a single unified system. Standard dropdown menus provide familiar hover and keyboard navigation, while context menus adapt dynamically to what’s selected. Panel-based menus integrate into toolbars and sidebars, and on mobile, menus are touch-optimized with larger targets and gesture-friendly interactions. This consistency makes menus predictable for users while giving teams flexibility in how they present actions.
Menu system and interaction patterns
The menu architecture is designed to support a variety of interaction styles, all from a single unified system. Standard dropdown menus provide familiar hover and keyboard navigation, while context menus adapt dynamically to what’s selected. Panel-based menus integrate into toolbars and sidebars, and on mobile, menus are touch-optimized with larger targets and gesture-friendly interactions. This consistency makes menus predictable for users while giving teams flexibility in how they present actions.
Menu system and interaction patterns
The menu architecture is designed to support a variety of interaction styles, all from a single unified system. Standard dropdown menus provide familiar hover and keyboard navigation, while context menus adapt dynamically to what’s selected. Panel-based menus integrate into toolbars and sidebars, and on mobile, menus are touch-optimized with larger targets and gesture-friendly interactions. This consistency makes menus predictable for users while giving teams flexibility in how they present actions.
Branching chat starter kit
Build visual conversation interfaces where users create branching chat trees with AI integration. Perfect for interactive chatbots, conversation design tools, and storytelling applications. Create, connect, and organize chat nodes on an infinite canvas with real-time AI responses and context-aware conversation flows.
Agent starter kit
Give your AI agents visual superpowers. Allow them to read drawings, generate diagrams, and interact with canvas elements just like human users. You handle the AI integration, tldraw handles the complex canvas interactions, shape recognition, and visual rendering.
Branching chat starter kit
Build visual conversation interfaces where users create branching chat trees with AI integration. Perfect for interactive chatbots, conversation design tools, and storytelling applications. Create, connect, and organize chat nodes on an infinite canvas with real-time AI responses and context-aware conversation flows.
Agent starter kit
Give your AI agents visual superpowers. Allow them to read drawings, generate diagrams, and interact with canvas elements just like human users. You handle the AI integration, tldraw handles the complex canvas interactions, shape recognition, and visual rendering.
Examples
Examples
Examples
Examples
© 2025 tldraw