> ## 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 two main ways to add elements to your design in Subframe: quick insert and the insert panel.

## 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.