> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tsdraw.com/llms.txt
> Use this file to discover all available pages before exploring further.

# User interface

> Customize the toolbar, style panel, and other UI elements

The `@tsdraw/react` package includes a toolbar and style panel, configurable via `uiOptions`.

## Toolbar

### Hiding

```tsx theme={null}
<Tsdraw uiOptions={{ toolbar: { hide: true } }} />
```

### Layout

The `parts` option controls grouping:

```tsx theme={null}
<Tsdraw uiOptions={{ toolbar: { parts: [['pen'], ['undo']] } }} />
```

### Placement

Position relative to the edge:

```tsx theme={null}
<Tsdraw uiOptions={{ toolbar: { placement: { anchor: 'bottom-right' } } }} />
```

### Draggable

```tsx theme={null}
<Tsdraw uiOptions={{ toolbar: { draggable: true, saveDraggedPosition: true } }} />
```

### Pen mode indicator

When a stylus is detected, Pen mode is activated. This makes it easier for the user to draw using their pressure-sensitive display/stylus. The **Pen** control in the toolbar shows a small blue "P" badge during Pen mode. This is on by default. Hide it with:

```tsx theme={null}
<Tsdraw uiOptions={{ showPenModeIndicator: false }} />
```

## Style panel

Click a bubble to open a **context-style menu** at the pointer with every choice together; the current value stays highlighted in the list.

### Hiding

```tsx theme={null}
<Tsdraw uiOptions={{ stylePanel: { hide: true } }} />
```

### Placement

```tsx theme={null}
<Tsdraw uiOptions={{ stylePanel: { placement: { anchor: 'top-right', edgeOffset: 18 } } }} />
```

## Custom elements

Add arbitrary overlays:

```tsx theme={null}
<Tsdraw
  uiOptions={{
    customElements: [{
      id: 'logo',
      render: () => <div>tsdraw</div>
    }]
  }}
/>
```

## Theming

```tsx theme={null}
<Tsdraw theme="light" /> // or "dark", "system"
```

## Cursors

```tsx theme={null}
<Tsdraw uiOptions={{ cursor: { getCursor: (ctx) => 'crosshair' } }} />
```