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 F to insert a stack
Press T 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 V or Esc to exit the insert tool and return to selecting.
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"Subframe Docs","colors":{"primary":"#111111","light":"#dddddd","dark":"#111111"},"logo":{"light":"https://res.cloudinary.com/subframe/image/upload/v1711417507/shared/y2rsnhq3mex4auk54aye.png","dark":"https://res.cloudinary.com/subframe/image/upload/v1712778911/uploads/302/ul72rsawfl5muaja4dbp.png"},"favicon":"https://mintcdn.com/subframe-59800133/UtzN_VZHB2fC7oGB/favicon.png?fit=max\u0026auto=format\u0026n=UtzN_VZHB2fC7oGB\u0026q=85\u0026s=0d98a7ca9fe9d810d018908473d7c6a1","navbar":{"links":[{"href":"https://subframe.com","label":"subframe.com"}],"primary":{"type":"button","label":"Log in","href":"https://app.subframe.com"}},"footer":{"socials":{"linkedin":"https://www.linkedin.com/company/subframeapp","x":"https://x.com/SubframeApp","github":"https://github.com/SubframeApp/subframe","instagram":"https://www.instagram.com/subframeapp","slack":"https://join.slack.com/t/subframecommunity/shared_invite/zt-380uma6dv-_lr7_bDLU5DJcoygfUYkeQ","website":"https://subframe.com","youtube":"https://www.youtube.com/@SubframeApp"}},"seo":{"indexing":"all"},"icons":{"library":"lucide"},"integrations":{"ga4":{"measurementId":"G-1GGBBPL5LT"},"intercom":{"appId":"m19ac5dq"},"segment":{"key":"5nOHRiT81iSqK2WHigNEoNZWMG2JcfOq"}},"contextual":{"options":["copy","chatgpt","claude","perplexity"],"display":"header"},"metadata":{"timestamp":true},"styling":{"latex":false},"navigation":{"global":{"anchors":[{"anchor":"Go to Subframe","icon":"house","href":"https://subframe.com?utm_source=mintlify\u0026utm_medium=docs\u0026utm_campaign=global_link"},{"anchor":"Slack Community","icon":"slack","href":"https://join.slack.com/t/subframecommunity/shared_invite/zt-380uma6dv-_lr7_bDLU5DJcoygfUYkeQ"},{"anchor":"YouTube","icon":"youtube","href":"https://www.youtube.com/@SubframeApp"}]},"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"subframe-59800133","hasAudioNarration":false,"actualSubdomain":"subframe-59800133","customDomains":["docs.subframe.com"],"gitSource":{"type":"github","owner":"subframeapp","repo":"subframe","deployBranch":"main","contentDirectory":"packages/docs","isPrivate":false,"mountPath":"","label":""},"chroma":{"liveDeploymentHistoryId":"6ae8d5f0137482c03b45980c","collectionId":"6252001c-60d2-408c-a2fe-b9636909651b","schemaVersion":"v3","latestBuiltDeploymentHistoryId":"6ae8d5f0137482c03b45980c"},"feedback":{"thumbs":true,"edits":true,"issues":true},"entitlements":{"AI_CHAT":{"status":"ENABLED"},"WEB_MCP":{"status":"ENABLED"},"NARRATION":{"status":"ENABLED"}},"buildId":"6ae91f999ea91cadc17f5ae0","clientVersion":"0.0.4045","searchFilterCounts":[{"language":"default","tag":"Design","count":39},{"language":"default","tag":"Core Concepts","count":18},{"language":"default","tag":"Building from scratch","count":16},{"language":"default","tag":"Using the editor","count":12},{"language":"default","tag":"Agent","count":8},{"language":"default","tag":"Components","count":6},{"language":"default","tag":"Developer guides","count":6},{"language":"default","tag":"Browser","count":5},{"language":"default","tag":"Troubleshooting","count":5},{"language":"default","tag":"Admin and billing","count":4}]},"assistantConfig":{"enableAskAiButton":true,"enableStarterQuestions":false,"enableAskAiSearchBar":true,"deflection":{"enabled":true,"email":"support@subframe.com","showHelpButton":true}},"basePath":"","hasChatPermissions":true,"hasWebMcpPermissions":true,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"full-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"byok-sep-25","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"vite-origin","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-updated-9-15","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-dual-write","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"approve-review-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"sso-setup-deadline-banner","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"googleFontsInlined":false},"customCss":[{"filePath":"style.css","content":".frame{background:#f5f5f5}"}],"page":{"pagePath":"design/design-mode/adding-elements","slug":"/design/design-mode/adding-elements","pageMetadata":{"title":"Adding elements","description":"Add elements to your design using quick insert or drag-and-drop.","href":"/design/design-mode/adding-elements"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Add elements to your design using quick insert or drag-and-drop.\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={li:`li`,ol:`ol`,p:`p`,strong:`strong`,ul:`ul`,..._provideComponents(),...props.components},{Heading,Icon}=_components;if(!Heading)_missingMdxReference(`Heading`,true);if(!Icon)_missingMdxReference(`Icon`,true);return _jsxs(_Fragment,{children:[_jsx(_components.p,{children:`There are three ways to add elements to your design in Subframe: quick insert, the insert panel, and the insert tools.`}),`\n`,_jsx(Heading,{level:`2`,id:`method-1-quick-insert-recommended`,children:`Method 1: Quick insert (recommended)`}),`\n`,_jsx(`video`,{autoPlay:true,muted:true,loop:true,playsInline:true,className:`mint-w-full`,src:`https://mintcdn.com/subframe-59800133/8aw-1C9kraDsFhl_/videos/design-mode/add-element-button.mp4?fit=max\u0026auto=format\u0026n=8aw-1C9kraDsFhl_\u0026q=85\u0026s=951343351664640ec912b8992895c4ac`,\"data-path\":`videos/design-mode/add-element-button.mp4`}),`\n`,_jsxs(_components.ol,{children:[`\n`,_jsx(_components.li,{children:`Select an element on your canvas`}),`\n`,_jsx(_components.li,{children:`Hover over the edges of the selection box`}),`\n`,_jsxs(_components.li,{children:[`Click the `,_jsx(Icon,{icon:`plus`,size:16}),` button to open the search popup`]}),`\n`,_jsx(_components.li,{children:`Search for and select the element you want to add`}),`\n`,_jsx(_components.li,{children:`The new element will be inserted in the direction you clicked`}),`\n`]}),`\n`,_jsx(Heading,{level:`4`,id:`keyboard-shortcuts`,children:`Keyboard shortcuts`}),`\n`,_jsx(_components.p,{children:`You can also use these keyboard shortcuts after selecting an element:`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[`Quick insert above: `,_jsx(`kbd`,{children:`Ctrl`}),` + `,_jsx(`kbd`,{children:`I`})]}),`\n`,_jsxs(_components.li,{children:[`Quick insert below: `,_jsx(`kbd`,{children:`Ctrl`}),` + `,_jsx(`kbd`,{children:`K`})]}),`\n`,_jsxs(_components.li,{children:[`Quick insert left: `,_jsx(`kbd`,{children:`Ctrl`}),` + `,_jsx(`kbd`,{children:`J`})]}),`\n`,_jsxs(_components.li,{children:[`Quick insert right: `,_jsx(`kbd`,{children:`Ctrl`}),` + `,_jsx(`kbd`,{children:`L`})]}),`\n`]}),`\n`,_jsx(Heading,{level:`2`,id:`method-2-drag-and-drop-from-the-insert-panel`,children:`Method 2: Drag and drop from the Insert panel`}),`\n`,_jsx(`video`,{autoPlay:true,muted:true,loop:true,playsInline:true,className:`mint-w-full`,src:`https://mintcdn.com/subframe-59800133/8aw-1C9kraDsFhl_/videos/design-mode/drag-drop-insert-panel.mp4?fit=max\u0026auto=format\u0026n=8aw-1C9kraDsFhl_\u0026q=85\u0026s=eaa84ffc53d5173574dabc71494fc678`,\"data-path\":`videos/design-mode/drag-drop-insert-panel.mp4`}),`\n`,_jsxs(_components.ol,{children:[`\n`,_jsxs(_components.li,{children:[`Click the `,_jsx(_components.strong,{children:`Insert`}),` `,_jsx(Icon,{icon:`plus`,size:16}),` button in the toolbar at the bottom of the canvas`]}),`\n`,_jsx(_components.li,{children:`Find the element you want to add`}),`\n`,_jsx(_components.li,{children:`Drag it directly onto your canvas`}),`\n`]}),`\n`,_jsx(Heading,{level:`4`,id:`what’s-in-the-panel`,children:`What’s in the panel`}),`\n`,_jsx(_components.p,{children:`Search across everything from the bar at the top, or browse the sections:`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Basic elements`}),` — text, stacks, icons, images, and dividers.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Components`}),` — buttons, inputs, and other components from your design system.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Snippets`}),` — designs you’ve saved to reuse, like page headers, navigation bars, and card layouts.`]}),`\n`]}),`\n`,_jsx(Heading,{level:`2`,id:`method-3-insert-tools`,children:`Method 3: Insert tools`}),`\n`,_jsx(_components.p,{children:`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.`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[`Press `,_jsx(`kbd`,{children:`F`}),` to insert a `,_jsx(_components.strong,{children:`stack`})]}),`\n`,_jsxs(_components.li,{children:[`Press `,_jsx(`kbd`,{children:`T`}),` to insert `,_jsx(_components.strong,{children:`text`})]}),`\n`]}),`\n`,_jsx(_components.p,{children:`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.`}),`\n`,_jsxs(_components.p,{children:[`Press `,_jsx(`kbd`,{children:`V`}),` or `,_jsx(`kbd`,{children:`Esc`}),` to exit the insert tool and return to selecting.`]})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Adding elements","description":"Add elements to your design using quick insert or drag-and-drop.","href":"/design/design-mode/adding-elements"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Method 1: Quick insert (recommended)","slug":"method-1-quick-insert-recommended","depth":2,"children":[{"title":"Keyboard shortcuts","slug":"keyboard-shortcuts","depth":4,"children":[]}]},{"title":"Method 2: Drag and drop from the Insert panel","slug":"method-2-drag-and-drop-from-the-insert-panel","depth":2,"children":[{"title":"What’s in the panel","slug":"what’s-in-the-panel","depth":4,"children":[]}]},{"title":"Method 3: Insert tools","slug":"method-3-insert-tools","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"dynamicCss":".mint-w-full {\n width: 100%\n}","subdomain":"subframe-59800133","siteName":"Subframe Docs","title":"Adding elements - Subframe Docs","relatedPagesConfig":{"enabled":true,"limit":3,"mode":"automatic"},"navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-10-08T23:24:15.735Z","gitLastModified":"2026-10-08T23:24:07.000Z","originalFileLocation":"design/design-mode/adding-elements.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"system\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"Add elements to your design using quick insert or drag-and-drop.\">\u003cmeta data-mint-head name=\"application-name\" content=\"Subframe Docs\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/subframe-59800133/HHX6b_IDVg3WcJms/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/subframe-59800133/HHX6b_IDVg3WcJms/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/subframe-59800133/HHX6b_IDVg3WcJms/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/subframe-59800133/HHX6b_IDVg3WcJms/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/subframe-59800133/HHX6b_IDVg3WcJms/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/subframe-59800133/HHX6b_IDVg3WcJms/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/subframe-59800133/HHX6b_IDVg3WcJms/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/subframe-59800133/HHX6b_IDVg3WcJms/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/subframe-59800133/HHX6b_IDVg3WcJms/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Adding elements - Subframe Docs\">\u003cmeta data-mint-head property=\"og:description\" content=\"Add elements to your design using quick insert or drag-and-drop.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Subframe Docs\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.subframe.com/design/design-mode/adding-elements\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://subframe-59800133.mintlify.app/_mintlify/api/og/v2?division=Using+the+editor\u0026amp;title=Adding+elements\u0026amp;description=Add+elements+to+your+design+using+quick+insert+or+drag-and-drop.\u0026amp;theme=69b2f1aca99b9fa855dd05fd\u0026amp;signature=96607d7791688c543e900266aa0d6000e3708b3c29f4b4d17b6a457e4d03dab3\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Adding elements - Subframe Docs\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Add elements to your design using quick insert or drag-and-drop.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://subframe-59800133.mintlify.app/_mintlify/api/og/v2?division=Using+the+editor\u0026amp;title=Adding+elements\u0026amp;description=Add+elements+to+your+design+using+quick+insert+or+drag-and-drop.\u0026amp;theme=69b2f1aca99b9fa855dd05fd\u0026amp;signature=96607d7791688c543e900266aa0d6000e3708b3c29f4b4d17b6a457e4d03dab3\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/subframe-59800133/HHX6b_IDVg3WcJms/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Subframe Docs\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#111111\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.subframe.com/design/design-mode/adding-elements\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/design/design-mode/adding-elements.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.subframe.com/#organization\",\"name\":\"Subframe Docs\",\"url\":\"https://docs.subframe.com\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://res.cloudinary.com/subframe/image/upload/v1711417507/shared/y2rsnhq3mex4auk54aye.png\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.subframe.com#website\",\"name\":\"Subframe Docs\",\"url\":\"https://docs.subframe.com\",\"publisher\":{\"@id\":\"https://docs.subframe.com/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.subframe.com/design/design-mode/adding-elements#webpage\",\"url\":\"https://docs.subframe.com/design/design-mode/adding-elements\",\"name\":\"Adding elements\",\"description\":\"Add elements to your design using quick insert or drag-and-drop.\",\"dateModified\":\"2026-10-08T23:24:07.000Z\",\"isPartOf\":{\"@id\":\"https://docs.subframe.com#website\"},\"breadcrumb\":{\"@id\":\"https://docs.subframe.com/design/design-mode/adding-elements#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.subframe.com/design/design-mode/adding-elements#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Design\",\"item\":\"https://docs.subframe.com/design/overview\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using the editor\",\"item\":\"https://docs.subframe.com/design/design-mode/layers\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Adding elements\",\"item\":\"https://docs.subframe.com/design/design-mode/adding-elements\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.subframe.com/design/design-mode/adding-elements#article\",\"headline\":\"Adding elements\",\"name\":\"Adding elements\",\"description\":\"Add elements to your design using quick insert or drag-and-drop.\",\"url\":\"https://docs.subframe.com/design/design-mode/adding-elements\",\"mainEntityOfPage\":{\"@id\":\"https://docs.subframe.com/design/design-mode/adding-elements#webpage\"},\"dateModified\":\"2026-10-08T23:24:07.000Z\",\"publisher\":{\"@id\":\"https://docs.subframe.com/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.subframe.com#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Subframe Docs\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"Subframe Docs","nav":{"global":{"anchors":[{"anchor":"Go to Subframe","icon":"house","href":"https://subframe.com?utm_source=mintlify\u0026utm_medium=docs\u0026utm_campaign=global_link"},{"anchor":"Slack Community","icon":"slack","href":"https://join.slack.com/t/subframecommunity/shared_invite/zt-380uma6dv-_lr7_bDLU5DJcoygfUYkeQ"},{"anchor":"YouTube","icon":"youtube","href":"https://www.youtube.com/@SubframeApp"}]},"pages":[{"title":"Introduction","href":"/overview"},{"title":"Quickstart","href":"/quickstart"},{"title":"Desktop app","href":"/desktop-app"},{"title":"FAQ","href":"/faq"},{"group":"Design","pages":[{"title":"Overview","href":"/design/overview"},{"group":"Core Concepts","pages":[{"title":"Elements","href":"/design/elements"},{"group":"Components","pages":[{"title":"Overview","href":"/design/components/overview"},{"title":"Subcomponents","href":"/design/components/subcomponents"},{"title":"Props \u0026 slots","href":"/design/components/props-and-slots"},{"title":"Variants","href":"/design/components/variants"},{"title":"Hover, active, focus states","href":"/design/components/states"},{"title":"Import existing design system","href":"/design/components/importing"}]},{"title":"Pages","href":"/design/pages"},{"group":"Theme","pages":[{"title":"Customizing theme","href":"/design/theme/customizing-theme"},{"title":"Importing tokens","href":"/design/theme/importing-tokens"},{"title":"Exporting theme","href":"/design/theme/exporting-theme"},{"title":"Adding custom fonts","href":"/design/theme/adding-custom-fonts"}]},{"title":"Canvases","href":"/design/canvases"},{"title":"Snippets","href":"/design/snippets"},{"title":"Writing design docs","href":"/design/documents"},{"group":"Projects","pages":[{"title":"Overview","href":"/design/projects/overview"},{"title":"Project settings","href":"/design/projects/project-settings"},{"title":"Version history","href":"/design/projects/version-history"}]}]},{"group":"Using the editor","pages":[{"title":"Layers","href":"/design/design-mode/layers"},{"title":"Inspector","description":"Configure element properties in the right sidebar.","href":"/design/design-mode/inspector"},{"title":"Adding elements","href":"/design/design-mode/adding-elements"},{"title":"Working with stacks","description":"Master stack-based layouts with direction, spacing, and alignment.","href":"/design/design-mode/working-with-stacks"},{"title":"Page layouts","href":"/design/design-mode/page-layouts"},{"title":"Previewing designs","href":"/design/design-mode/preview"},{"title":"Responsive design","href":"/design/design-mode/responsive-design"},{"title":"Quick actions","href":"/design/design-mode/quick-actions"},{"title":"Keyboard shortcuts","href":"/design/design-mode/keyboard-shortcuts"},{"title":"Comments","href":"/design/design-mode/comments"},{"title":"Share designs","href":"/design/design-mode/share-designs"},{"title":"Custom CSS","href":"/design/design-mode/custom-css"}]},{"group":"Designing with AI","pages":[{"title":"Generating designs","href":"/design/ask-ai/prompt-to-design"},{"title":"Quick edits","href":"/design/ask-ai/making-quick-edits"},{"title":"Image to design","href":"/design/ask-ai/image-to-design"},{"title":"Adding context with @","href":"/design/ask-ai/adding-context"}]},{"title":"Exporting code and images","href":"/design/code-mode/overview"},{"group":"Prototype mode","pages":[{"title":"Creating prototypes","href":"/design/prototype-mode/overview"},{"title":"Annotations","href":"/design/prototype-mode/annotations"},{"title":"Interactions","href":"/design/prototype-mode/click-through-prototypes"}]}]},{"group":"Browser","pages":[{"title":"Overview","href":"/browser/overview"},{"title":"Previewing your local app","href":"/browser/previewing-your-local-app"},{"title":"Making live edits","href":"/browser/making-live-edits"},{"title":"Capturing as designs","href":"/browser/capturing-as-designs"},{"title":"Troubleshooting","href":"/browser/troubleshooting"}]},{"group":"Agent","pages":[{"title":"Using Agent chat","href":"/agent/overview"},{"title":"Connecting an agent","href":"/agent/connecting-an-agent"},{"title":"MCP server","href":"/agent/mcp-server"},{"title":"Connecting your codebase","href":"/agent/connecting-your-codebase"},{"title":"Giving your agent context","href":"/agent/giving-your-agent-context"},{"title":"Making code changes","href":"/agent/making-code-changes"},{"title":"Managing chats","href":"/agent/managing-chats"},{"title":"Troubleshooting","href":"/agent/troubleshooting"}]},{"group":"Building from scratch","pages":[{"sidebarTitle":"Overview","title":"Starting your design system in Subframe","href":"/develop/overview"},{"title":"Installation","href":"/develop/installation"},{"group":"How it works","pages":[{"title":"Design to code workflow","href":"/develop/concepts/design-to-code"},{"title":"Code generation","href":"/develop/concepts/code-generation"},{"title":"Syncing components","href":"/develop/concepts/syncing-components"}]},{"group":"Developer guides","pages":[{"title":"Dark mode","href":"/develop/guides/dark-mode"},{"title":"Accessibility","href":"/develop/guides/accessibility"},{"title":"Testing","href":"/develop/guides/testing"},{"title":"CLI in CI \u0026 agents","href":"/develop/guides/cli-automation"},{"title":"Publishing to NPM","href":"/develop/guides/publish-to-npm"},{"title":"Component directories","href":"/develop/upgrading/component-directories"}]},{"group":"Troubleshooting","pages":[{"title":"Next.js","href":"/develop/frameworks/nextjs"},{"title":"Vite","href":"/develop/frameworks/vite"},{"title":"Astro","href":"/develop/frameworks/astro"},{"title":"Monorepo","href":"/develop/frameworks/monorepo"},{"sidebarTitle":"Other (manual)","title":"Manual installation","href":"/develop/frameworks/manual"}]}]},{"group":"Admin and billing","pages":[{"title":"Managing team members","href":"/admin/managing-team"},{"title":"Managing pricing and plans","href":"/admin/pricing-and-plans"},{"title":"Managing auth tokens","href":"/admin/auth-tokens"},{"group":"Single sign-on (SSO)","pages":[{"title":"Setting up Okta SSO","href":"/admin/sso/okta"}]}]}]},"basePath":"","title":"Adding elements - Subframe Docs","buildId":"dpl_36EDyZCDfRuoUD9af5CH4M1bqY2h","deploymentId":"dpl_36EDyZCDfRuoUD9af5CH4M1bqY2h","dynamics":[],"chunks":[]}