Frame colors

Give frames a colored fill and heading with the showColors option.

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

const shapeUtils = [FrameShapeUtil.configure({ showColors: true })]

export default function FrameColorsExample() {
	return (
		<div className="tldraw__editor">
			<Tldraw persistenceKey="frame-colors" shapeUtils={shapeUtils} />
		</div>
	)
}

By default frames are white with a plain heading and ignore the color style. FrameShapeUtil.configure({ showColors: true }) makes frames use the selected color for a tinted fill and a colored heading, and adds the color picker to the style panel when a frame is selected.

Create a frame (F), then pick a color in the style panel to see it applied.

Is this page helpful?
Prev
Deep links
Next
Note resizing