You can use the `useUndo` and `useRedo` hooks to undo and redo actions. We also provide `useCanUndo` and `useCanRedo` hooks to check if you can undo or redo.

> **Try it out:** Select, drag and resize the text layer. Then use the undo and redo buttons to undo and redo the actions.

```tsx
import { useUndo, useRedo, useCanUndo, useCanRedo } from "@shadcn/designer"

function HistoryControls() {
  const canUndo = useCanUndo()
  const canRedo = useCanRedo()
  const undo = useUndo()
  const redo = useRedo()

  return (
    <div>
      <button onClick={undo} disabled={!canUndo}>Undo</button>
      <button onClick={redo} disabled={!canRedo}>Redo</button>
    </div>
  )
}
```

## ActionToolbarHistory

The `ActionToolbarHistory` component is a toolbar button that allows you to undo and redo actions. 

```tsx
import { Designer, DesignerToolbar, ActionToolbarHistory } from "@shadcn/designer"

function CustomDesigner() {
  return (
    <Designer>
      <DesignerToolbar>
        <ActionToolbarHistory />
      </DesignerToolbar>
    </Designer>
  )
}
```