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

# Adding elements

> Add elements to your design using quick insert or drag-and-drop.

There are three ways to add elements to your design in Subframe: quick insert, the insert panel, and the insert tools.

## Method 1: Quick insert (recommended)

<video autoPlay muted loop playsInline className="w-full" src="https://hevpkratkeuc60w7.public.blob.vercel-storage.com/add-element-button.mp4" />

1. Select an element on your canvas
2. Hover over the edges of the selection box
3. Click the <Icon icon="plus" size={16} /> button to open the search popup
4. Search for and select the element you want to add
5. The new element will be inserted in the direction you clicked

#### Keyboard shortcuts

You can also use these keyboard shortcuts after selecting an element:

* Quick insert above: <kbd>Ctrl</kbd> + <kbd>I</kbd>
* Quick insert below: <kbd>Ctrl</kbd> + <kbd>K</kbd>
* Quick insert left: <kbd>Ctrl</kbd> + <kbd>J</kbd>
* Quick insert right: <kbd>Ctrl</kbd> + <kbd>L</kbd>

## Method 2: Drag and drop from the Insert panel

<video autoPlay muted loop playsInline className="w-full" src="https://hevpkratkeuc60w7.public.blob.vercel-storage.com/drag-drop-insert-panel.mp4" />

1. Click on the Insert tab in the left panel
2. Find the element you want to add
3. Drag it directly onto your canvas

#### Tabs

There are two tabs in the Insert panel:

* **Your library** contains basic elements like text, images, and icons, as well as components like buttons, inputs from your design system.
* **Snippets** contains larger, pre-built compositions like page headers, navigation bars, card layouts, and other complex UI patterns.

## Method 3: Insert tools

Press a shortcut to pick up an insert tool, then click where you want the element to land—no need to select an element first.

* Press <kbd>F</kbd> to insert a **stack**
* Press <kbd>T</kbd> to insert **text**

As you move over the canvas, a preview follows your cursor and a line shows where the element will land. Click to place it. Inserting text drops you straight into editing so you can start typing.

Press <kbd>V</kbd> or <kbd>Esc</kbd> to exit the insert tool and return to selecting.
