a774ac673a
Some checks failed
Deploy analytics worker / Deploy analytics worker to ${{ (github.ref == 'refs/heads/production' && 'production') || (github.ref == 'refs/heads/main' && 'staging') || 'preview' }} (push) Failing after 1s
i18n upload strings / Upload latest strings (push) Failing after 1s
Deploy bemo / Deploy bemo to ${{ (github.ref == 'refs/heads/bemo-production' && 'production') || (github.ref == 'refs/heads/main' && 'staging') || 'preview' }} (push) Failing after 1s
Deploy grafana resources / ${{ github.event_name == 'push' && 'Deploy grafana resources' || 'Validate grafana resources (dry run)' }} (push) Failing after 0s
End to end tests (dotcom) / Check for relevant changes (push) Failing after 0s
End to end tests (examples) / Check for relevant changes (push) Failing after 0s
End to end tests (mermaid readability) / Check for relevant changes (push) Failing after 1s
End to end tests (perf) / Check for relevant changes (push) Failing after 0s
Publish editor extensions / Publish editor extensions (push) Failing after 1s
Publish SDK packages / Remove the publish-packages label (push) Has been skipped
Checks / Tests & checks (push) Has been cancelled
Checks / Build all projects (push) Has been cancelled
Deploy templates / Deploy templates (push) Has been cancelled
End to end tests (dotcom) / End to end tests (dotcom) (push) Has been cancelled
End to end tests (mermaid readability) / End to end tests (mermaid readability) (push) Has been cancelled
End to end tests (perf) / End to end tests (perf) (push) Has been cancelled
Deploy .com / Deploy dotcom to ${{ (github.ref == 'refs/heads/production' && 'production') || (github.ref == 'refs/heads/main' && 'staging') || 'preview' }} (push) Has been cancelled
End to end tests (examples) / End to end tests (examples) (push) Has been cancelled
Publish SDK packages / Publish SDK packages (push) Has been cancelled
Publish SDK packages / Tell user released version (push) Has been cancelled
Publish SDK packages / Publishes code templates to separate repositories (push) Has been cancelled
Publish SDK packages / Deploys the template demos with the new SDK version (push) Has been cancelled
61 lines
2.0 KiB
Plaintext
61 lines
2.0 KiB
Plaintext
---
|
|
title: User interface
|
|
status: published
|
|
author: steveruizok
|
|
date: 3/22/2023
|
|
order: 3
|
|
keywords:
|
|
- ui
|
|
- interface
|
|
- tools
|
|
- shapes
|
|
- custom
|
|
- button
|
|
- toolbar
|
|
- styles
|
|
readability: 8
|
|
voice: 8
|
|
completeness: 8
|
|
accuracy: 9
|
|
notes: 'Brief intro that links to sdk-features articles.'
|
|
---
|
|
|
|
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:
|
|
|
|
```tsx
|
|
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](/sdk-features/ui-components) — Component architecture, overrides, and customization
|
|
- [UI primitives](/sdk-features/ui-primitives) — Buttons, menus, dialogs for building custom interfaces
|
|
- [Actions](/sdk-features/actions) — Add or override actions and keyboard shortcuts
|
|
- [Styles](/sdk-features/styles) — The style panel and custom style properties
|
|
- [Themes](/sdk-features/themes) — Color modes and custom color palettes
|
|
- [Accessibility](/sdk-features/accessibility) — Keyboard navigation and screen reader support
|
|
- [Internationalization](/sdk-features/internationalization) — Translations and language support
|
|
|
|
## Examples
|
|
|
|
- [Hide UI](/examples/ui/hide-ui) — Hide the entire default interface
|
|
- [Custom UI](/examples/ui/custom-ui) — Build a completely custom interface
|
|
- [Hide UI components](/examples/ui/ui-components-hidden) — Selectively hide specific components
|
|
- [Action overrides](/examples/ui/action-overrides) — Customize actions and shortcuts
|
|
- [UI events](/examples/events/ui-events) — Track user interactions
|