Vertical toolbar

Switch from a horizontal toolbar at the bottom of the screen to a vertical one on the left.

import { DefaultToolbar, TLComponents, Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'

const components: TLComponents = {
	Toolbar: () => <DefaultToolbar orientation="vertical" />,
}

export default function BasicExample() {
	return (
		<div className="tldraw__editor">
			<Tldraw components={components} />
		</div>
	)
}

Tldraw supports a vertical toolbar out of the box. Override the toolbar component to set the orientation of the default toolbar to vertical.

Is this page helpful?
Prev
Toolbar groups
Next
Add a tool to the toolbar