Subframe Docs home page
Search...
⌘K
Ask AI
Log in
Log in
Search...
Navigation
Designing with Subframe
Adding elements
Community
Blog
Get started
Introduction
Installation
Tailwind CSS
Fonts
FAQ
Framework guides
Designing with Subframe
Adding elements
Using AI to design
Personalizing AI
Prototyping with Subframe
Creating AI prototypes
Sharing prototypes
Developing with Subframe
Syncing components
Using components
Copy & paste pages
Adding business logic
Props and Slots
Disabling sync
Building with AI
MCP Server
Export to Bolt
Export to Replit
Export to Cursor
Export to Lovable
Account Management
Single Sign-On
On this page
Method 1: Quick insert (recommended)
Keyboard shortcuts
Method 2: Drag and drop from the Insert panel
Tabs
Designing with Subframe
Adding elements
There are two main ways to add elements to your design in Subframe: quick insert and the insert panel.
Method 1: Quick insert (recommended)
Select an element on your canvas
Hover over the edges of the selection box
Click the plus button to open the search popup
Search for and select the element you want to add
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:
Ctrl
+
I
Quick insert below:
Ctrl
+
K
Quick insert left:
Ctrl
+
J
Quick insert right:
Ctrl
+
L
Method 2: Drag and drop from the Insert panel
Click on the Insert tab in the left panel
Find the element you want to add
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.
Was this page helpful?
Yes
No
Suggest edits
Raise issue
Manual
Using AI to design
Assistant
Responses are generated using AI and may contain mistakes.