Snippets are reusable designs that can be inserted anywhere. They are usually composed designs—similar to molecules and organisms in an atomic design system.
Unlike components, changes to snippets will not affect anywhere that uses them.
Access your snippets at any time from Snippets in the left panel. You can edit or delete snippets from here.Use the sort control at the top of the list to order snippets by A-Z (default), Recently edited, or Recently created.
{"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/snippets","slug":"/design/snippets","pageMetadata":{"title":"Snippets","description":"Save and reuse design patterns.","href":"/design/snippets"},"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: \"Save and reuse design patterns.\"\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={a:`a`,li:`li`,ol:`ol`,p:`p`,strong:`strong`,ul:`ul`,..._provideComponents(),...props.components},{Frame,Heading,Icon,OptimizedImage}=_components;if(!Frame)_missingMdxReference(`Frame`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!Icon)_missingMdxReference(`Icon`,true);if(!OptimizedImage)_missingMdxReference(`OptimizedImage`,true);return _jsxs(_Fragment,{children:[_jsx(_components.p,{children:`Snippets are reusable designs that can be inserted anywhere. They are usually composed designs—similar to molecules and organisms in an atomic design system.`}),`\n`,_jsx(Frame,{children:_jsx(OptimizedImage,{src:`https://mintcdn.com/subframe-59800133/8aw-1C9kraDsFhl_/images/snippets/insert-menu.png?fit=max\u0026auto=format\u0026n=8aw-1C9kraDsFhl_\u0026q=85\u0026s=84f0278fe04c62ab1d99ca597d584202`,className:`mint-w-[776px]`,alt:`The Insert panel with basic elements and the Components section expanded`,\"data-og-width\":`1552`,width:`1552`,\"data-og-height\":`912`,height:`912`,\"data-path\":`images/snippets/insert-menu.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/subframe-59800133/8aw-1C9kraDsFhl_/images/snippets/insert-menu.png?w=280\u0026fit=max\u0026auto=format\u0026n=8aw-1C9kraDsFhl_\u0026q=85\u0026s=24ffd08633d54fc577d0acdf21867ec9 280w, https://mintcdn.com/subframe-59800133/8aw-1C9kraDsFhl_/images/snippets/insert-menu.png?w=560\u0026fit=max\u0026auto=format\u0026n=8aw-1C9kraDsFhl_\u0026q=85\u0026s=08b93d71b463cada927b8b8382c7d5ce 560w, https://mintcdn.com/subframe-59800133/8aw-1C9kraDsFhl_/images/snippets/insert-menu.png?w=840\u0026fit=max\u0026auto=format\u0026n=8aw-1C9kraDsFhl_\u0026q=85\u0026s=891f9debac8bfdd69e09449630b07cdb 840w, https://mintcdn.com/subframe-59800133/8aw-1C9kraDsFhl_/images/snippets/insert-menu.png?w=1100\u0026fit=max\u0026auto=format\u0026n=8aw-1C9kraDsFhl_\u0026q=85\u0026s=c33f5d4a18358f438ed405b62ba5aada 1100w, https://mintcdn.com/subframe-59800133/8aw-1C9kraDsFhl_/images/snippets/insert-menu.png?w=1650\u0026fit=max\u0026auto=format\u0026n=8aw-1C9kraDsFhl_\u0026q=85\u0026s=4a3b11df426cb24b863037f71fe97003 1650w, https://mintcdn.com/subframe-59800133/8aw-1C9kraDsFhl_/images/snippets/insert-menu.png?w=2500\u0026fit=max\u0026auto=format\u0026n=8aw-1C9kraDsFhl_\u0026q=85\u0026s=ac30a26ed2a0088b44edcd13eb5a9708 2500w`})}),`\n`,_jsx(_components.p,{children:`Unlike components, changes to snippets will not affect anywhere that uses them.`}),`\n`,_jsx(Heading,{level:`2`,id:`creating-a-snippet`,children:`Creating a snippet`}),`\n`,_jsxs(_components.ol,{children:[`\n`,_jsxs(_components.li,{children:[`Right-click or press `,_jsx(`kbd`,{children:`/`}),` to open `,_jsx(_components.a,{href:`/design/design-mode/quick-actions`,children:`quick actions`})]}),`\n`,_jsxs(_components.li,{children:[`Select `,_jsx(_components.strong,{children:`Save as snippet`})]}),`\n`,_jsx(_components.li,{children:`Preview your snippet and give it a name`}),`\n`,_jsxs(_components.li,{children:[`Click `,_jsx(_components.strong,{children:`Create`})]}),`\n`]}),`\n`,_jsx(Heading,{level:`2`,id:`inserting-snippets`,children:`Inserting snippets`}),`\n`,_jsx(_components.p,{children:`There are two ways to insert snippets:`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[`Open the `,_jsx(_components.strong,{children:`Insert`}),` `,_jsx(Icon,{icon:`plus`,size:16}),` panel from the toolbar at the bottom of the canvas and find your snippet under `,_jsx(_components.strong,{children:`Custom snippets`})]}),`\n`,_jsxs(_components.li,{children:[`Search for the snippet using the `,_jsx(_components.a,{href:`/design/design-mode/adding-elements`,children:`quick insert`}),` `,_jsx(Icon,{icon:`plus`,size:16}),` menu`]}),`\n`]}),`\n`,_jsxs(_components.p,{children:[`See `,_jsx(_components.a,{href:`/design/design-mode/adding-elements`,children:`adding elements`}),` for more info.`]}),`\n`,_jsx(Heading,{level:`2`,id:`managing-snippets`,children:`Managing snippets`}),`\n`,_jsxs(_components.p,{children:[`Access your snippets at any time from `,_jsx(_components.strong,{children:_jsx(_components.a,{href:`https://app.subframe.com/library?component=snippets`,children:`Snippets`})}),` in the left panel. You can edit or delete snippets from here.`]}),`\n`,_jsxs(_components.p,{children:[`Use the sort control at the top of the list to order snippets by `,_jsx(_components.strong,{children:`A-Z`}),` (default), `,_jsx(_components.strong,{children:`Recently edited`}),`, or `,_jsx(_components.strong,{children:`Recently created`}),`.`]})]})}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":"Snippets","description":"Save and reuse design patterns.","href":"/design/snippets"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Creating a snippet","slug":"creating-a-snippet","depth":2,"children":[]},{"title":"Inserting snippets","slug":"inserting-snippets","depth":2,"children":[]},{"title":"Managing snippets","slug":"managing-snippets","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"dynamicCss":".mint-w-\\[776px\\] {\n width: 776px\n}","subdomain":"subframe-59800133","siteName":"Subframe Docs","title":"Snippets - Subframe Docs","relatedPagesConfig":{"enabled":true,"limit":3,"mode":"automatic"},"navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-10-08T23:24:15.731Z","gitLastModified":"2026-10-08T23:24:07.000Z","originalFileLocation":"design/snippets.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=\"Save and reuse design patterns.\">\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=\"Snippets - Subframe Docs\">\u003cmeta data-mint-head property=\"og:description\" content=\"Save and reuse design patterns.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Subframe Docs\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.subframe.com/design/snippets\">\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=Core+Concepts\u0026amp;title=Snippets\u0026amp;description=Save+and+reuse+design+patterns.\u0026amp;theme=69b2f1aca99b9fa855dd05fd\u0026amp;signature=c01e6c014a2d1a5cc46ae1427e9d256f776a8b13f231be91394ad4f2b6d08fe0\">\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=\"Snippets - Subframe Docs\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Save and reuse design patterns.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://subframe-59800133.mintlify.app/_mintlify/api/og/v2?division=Core+Concepts\u0026amp;title=Snippets\u0026amp;description=Save+and+reuse+design+patterns.\u0026amp;theme=69b2f1aca99b9fa855dd05fd\u0026amp;signature=c01e6c014a2d1a5cc46ae1427e9d256f776a8b13f231be91394ad4f2b6d08fe0\">\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/snippets\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/design/snippets.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/snippets#webpage\",\"url\":\"https://docs.subframe.com/design/snippets\",\"name\":\"Snippets\",\"description\":\"Save and reuse design patterns.\",\"dateModified\":\"2026-10-08T23:24:07.000Z\",\"isPartOf\":{\"@id\":\"https://docs.subframe.com#website\"},\"breadcrumb\":{\"@id\":\"https://docs.subframe.com/design/snippets#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.subframe.com/design/snippets#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Design\",\"item\":\"https://docs.subframe.com/design/overview\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Core Concepts\",\"item\":\"https://docs.subframe.com/design/elements\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Snippets\",\"item\":\"https://docs.subframe.com/design/snippets\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.subframe.com/design/snippets#article\",\"headline\":\"Snippets\",\"name\":\"Snippets\",\"description\":\"Save and reuse design patterns.\",\"url\":\"https://docs.subframe.com/design/snippets\",\"mainEntityOfPage\":{\"@id\":\"https://docs.subframe.com/design/snippets#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","description":"Organize related pages on a canvas.","href":"/design/canvases"},{"title":"Snippets","href":"/design/snippets"},{"title":"Writing design docs","description":"Use design documents to share product context, brand voice, and component guidelines with your team and AI agents.","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","href":"/design/design-mode/inspector"},{"title":"Adding elements","href":"/design/design-mode/adding-elements"},{"title":"Working with stacks","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":"Snippets - Subframe Docs","buildId":"dpl_36EDyZCDfRuoUD9af5CH4M1bqY2h","deploymentId":"dpl_36EDyZCDfRuoUD9af5CH4M1bqY2h","dynamics":["07c022d89b","a74be98ba7"],"chunks":["Frame-DW6UFrUy.js","DynamicMarkdown-B62XqCSI.js","zoom-image-lightbox-eHyQ0tlO.js","lightbox-handle-r17bVUz3.js"]}