Adds vertical space between components, in one of five fixed sizes.
A spacer adds vertical space between components.
A spacer has the following property:
spacerSize: the amount of space the component should take up. One of XS, S, M, L, XL.
For example:
[ { "componentText": { "text": "Content before an XS spacer" } }, { "componentSpacer": { "spacerSize": "XS" } }, { "componentText": { "text": "Content after spacer" } }]
Was this page helpful?
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"Plain Docs","colors":{"primary":"#2AAB6C","light":"#4FD1A0","dark":"#3e7cff"},"logo":{"light":"https://mintcdn.com/plain/O6H8aFQxBwl-gnm6/public/logo/light.png?fit=max\u0026auto=format\u0026n=O6H8aFQxBwl-gnm6\u0026q=85\u0026s=ac87c2d9dea7872ab904cb086b307745","dark":"https://mintcdn.com/plain/O6H8aFQxBwl-gnm6/public/logo/dark.png?fit=max\u0026auto=format\u0026n=O6H8aFQxBwl-gnm6\u0026q=85\u0026s=d8dbd88c35b9c3677c8737040dbb1361","href":"https://plain.com/?utm_source=docs"},"favicon":"https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/favicon/favicon.png?fit=max\u0026auto=format\u0026n=EjhjILX5S36Y2AF-\u0026q=85\u0026s=b2b9b9a242b170759c4af0fa8c965d26","navbar":{"links":[{"href":"https://help.plain.com","label":"Help Center"},{"href":"https://plain.com/changelog/?utm_source=docs","label":"Changelog"},{"href":"https://plain.com/blog/?utm_source=docs","label":"Blog"}]},"footer":{"socials":{"twitter":"https://twitter.com/plainsupport","linkedin":"https://www.linkedin.com/company/plainsupport","github":"https://github.com/team-plain"}},"seo":{"metatags":{"og:image":"/public/sharing/social-card.png","twitter:card":"summary_large_image","twitter:image":"/public/sharing/social-card.png","twitter:site:domain":"plain.com","apple-mobile-web-app-title":"Plain Docs","slack-app-id":"A03RQJJFZUP"},"indexing":"navigable"},"icons":{"library":"lucide"},"integrations":{"gtm":{"tagId":"GTM-M9JGV3MQ"}},"styling":{"latex":false},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"plain","hasAudioNarration":false,"actualSubdomain":"plain","customDomains":["www.plain.com"],"gitSource":{"type":"github","owner":"team-plain","repo":"docs","deployBranch":"main","contentDirectory":"","isPrivate":true,"mountPath":"","label":""},"chroma":{"liveDeploymentHistoryId":"6adb75041a579503f22a0564","collectionId":"84aabb69-1fb1-4cc8-83da-9c4aaf1cb419","schemaVersion":"v3","latestBuiltDeploymentHistoryId":"6adb75041a579503f22a0564"},"feedback":{"thumbs":true,"edits":false,"issues":false},"entitlements":{"AI_CHAT":{"status":"ENABLED"},"CODE_SNIPPET_FEEDBACK":{"status":"DISABLED"},"WEB_MCP":{"status":"ENABLED"},"NARRATION":{"status":"ENABLED"}},"buildId":"6adb75041a579503f22a0564","clientVersion":"0.0.3965","searchFilterCounts":[{"language":"default","tag":"API Reference","count":2162},{"language":"default","tag":"Types","count":1654},{"language":"default","tag":"Mutations","count":305},{"language":"default","tag":"Queries","count":203},{"language":"default","tag":"Developer","count":179},{"language":"default","tag":"Documentation","count":152},{"language":"default","tag":"GraphQL API","count":93},{"language":"default","tag":"Webhooks","count":51},{"language":"default","tag":"Webhook events","count":48},{"language":"default","tag":"Platform","count":46}]},"assistantConfig":{"deflection":{"enabled":false,"type":"link"}},"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":"editor-v7-file-tree","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":"pause-universal-search-reconcile","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":"per-site-search-delta","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":"editor-private-page-search","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":"editor-nav-generations","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":"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":"editor-agent-model-picker","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":"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}],"isAtlas":false,"googleFontsInlined":false},"customCss":[{"filePath":"custom.css","content":"html{overflow-y:scroll}#sidebar::-webkit-scrollbar{display:none}"}],"page":{"pagePath":"ui-components/spacer","slug":"/ui-components/spacer","pageMetadata":{"title":"Spacer","description":"Adds vertical space between components, in one of five fixed sizes.","href":"/ui-components/spacer"},"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: \"Adds vertical space between components, in one of five fixed sizes.\"\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={code:`code`,li:`li`,p:`p`,pre:`pre`,span:`span`,ul:`ul`,..._provideComponents(),...props.components},{CodeBlock,Frame,OptimizedImage}=_components;if(!CodeBlock)_missingMdxReference(`CodeBlock`,true);if(!Frame)_missingMdxReference(`Frame`,true);if(!OptimizedImage)_missingMdxReference(`OptimizedImage`,true);return _jsxs(_Fragment,{children:[_jsx(_components.p,{children:`A spacer adds vertical space between components.`}),`\n`,_jsx(Frame,{children:_jsx(OptimizedImage,{src:`https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/images/ui-component-spacer.png?fit=max\u0026auto=format\u0026n=EjhjILX5S36Y2AF-\u0026q=85\u0026s=78d1e68c020b90ebb29cf098007f24e4`,alt:`Example spacer`,\"data-og-width\":`1664`,width:`1664`,\"data-og-height\":`526`,height:`526`,\"data-path\":`public/images/ui-component-spacer.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/images/ui-component-spacer.png?w=280\u0026fit=max\u0026auto=format\u0026n=EjhjILX5S36Y2AF-\u0026q=85\u0026s=2d0c73a584c8902a71199ca12469c6b0 280w, https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/images/ui-component-spacer.png?w=560\u0026fit=max\u0026auto=format\u0026n=EjhjILX5S36Y2AF-\u0026q=85\u0026s=24988f9db188b4626a4ef142419b0e70 560w, https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/images/ui-component-spacer.png?w=840\u0026fit=max\u0026auto=format\u0026n=EjhjILX5S36Y2AF-\u0026q=85\u0026s=dc8cc4375801adb13035c5c3fc519d00 840w, https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/images/ui-component-spacer.png?w=1100\u0026fit=max\u0026auto=format\u0026n=EjhjILX5S36Y2AF-\u0026q=85\u0026s=d37fe0bb6ce4f2ac46e5417d5d731e5e 1100w, https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/images/ui-component-spacer.png?w=1650\u0026fit=max\u0026auto=format\u0026n=EjhjILX5S36Y2AF-\u0026q=85\u0026s=73d2536826eff1a44eb567d0cc04aa27 1650w, https://mintcdn.com/plain/EjhjILX5S36Y2AF-/public/images/ui-component-spacer.png?w=2500\u0026fit=max\u0026auto=format\u0026n=EjhjILX5S36Y2AF-\u0026q=85\u0026s=4f80998e3ce902edce6bf10ceda70105 2500w`})}),`\n`,_jsx(_components.p,{children:`A spacer has the following property:`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.code,{children:`spacerSize`}),`: the amount of space the component should take up. One of `,_jsx(_components.code,{children:`XS`}),`, `,_jsx(_components.code,{children:`S`}),`, `,_jsx(_components.code,{children:`M`}),`, `,_jsx(_components.code,{children:`L`}),`, `,_jsx(_components.code,{children:`XL`}),`.`]}),`\n`]}),`\n`,_jsx(_components.p,{children:`For example:`}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`17`,language:`json`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`json`,children:_jsxs(_components.code,{language:`json`,numberOfLines:`17`,children:[_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`[`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` {`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#116329`,\"--shiki-dark\":`#9CDCFE`},children:` \"componentText\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: {`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#116329`,\"--shiki-dark\":`#9CDCFE`},children:` \"text\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: `}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`\"Content before an XS spacer\"`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` }`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` },`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` {`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#116329`,\"--shiki-dark\":`#9CDCFE`},children:` \"componentSpacer\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: {`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#116329`,\"--shiki-dark\":`#9CDCFE`},children:` \"spacerSize\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: `}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`\"XS\"`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` }`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` },`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` {`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#116329`,\"--shiki-dark\":`#9CDCFE`},children:` \"componentText\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: {`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#116329`,\"--shiki-dark\":`#9CDCFE`},children:` \"text\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: `}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`\"Content after spacer\"`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` }`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` }`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`]`})}),`\n`]})})})]})}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":"Spacer","description":"Adds vertical space between components, in one of five fixed sizes.","href":"/ui-components/spacer"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[],"codeExamples":{}},"jsLinks":["/docs/_mintlify/custom/plain/c04082256428a281/chat.js"],"subdomain":"plain","siteName":"Plain Docs","title":"Spacer - Plain Docs","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-09-01T15:33:53.142Z","originalFileLocation":"ui-components/spacer.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=\"Adds vertical space between components, in one of five fixed sizes.\">\u003cmeta data-mint-head name=\"application-name\" content=\"Plain Docs\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/docs/mintlify-assets/_mintlify/favicons/plain/4wwc9npotO0Itnsq/_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=\"/docs/mintlify-assets/_mintlify/favicons/plain/4wwc9npotO0Itnsq/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/docs/mintlify-assets/_mintlify/favicons/plain/4wwc9npotO0Itnsq/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/docs/mintlify-assets/_mintlify/favicons/plain/4wwc9npotO0Itnsq/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/docs/mintlify-assets/_mintlify/favicons/plain/4wwc9npotO0Itnsq/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/docs/mintlify-assets/_mintlify/favicons/plain/4wwc9npotO0Itnsq/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/docs/mintlify-assets/_mintlify/favicons/plain/4wwc9npotO0Itnsq/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/docs/mintlify-assets/_mintlify/favicons/plain/4wwc9npotO0Itnsq/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/docs/mintlify-assets/_mintlify/favicons/plain/4wwc9npotO0Itnsq/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Spacer - Plain Docs\">\u003cmeta data-mint-head property=\"og:description\" content=\"Adds vertical space between components, in one of five fixed sizes.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Plain Docs\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://www.plain.com/docs/ui-components/spacer\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://plain.mintlify.app/public/sharing/social-card.png\">\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=\"Spacer - Plain Docs\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Adds vertical space between components, in one of five fixed sizes.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://plain.mintlify.app/public/sharing/social-card.png\">\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=\"/docs/mintlify-assets/_mintlify/favicons/plain/4wwc9npotO0Itnsq/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Plain Docs\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#2AAB6C\">\u003cmeta data-mint-head name=\"twitter:site:domain\" content=\"plain.com\">\u003cmeta data-mint-head name=\"slack-app-id\" content=\"A03RQJJFZUP\">\u003clink data-mint-head rel=\"canonical\" href=\"https://www.plain.com/docs/ui-components/spacer\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/docs/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/docs/ui-components/spacer.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://www.plain.com/#organization\",\"name\":\"Plain Docs\",\"url\":\"https://www.plain.com\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/plain/O6H8aFQxBwl-gnm6/public/logo/light.png?fit=max\u0026auto=format\u0026n=O6H8aFQxBwl-gnm6\u0026q=85\u0026s=ac87c2d9dea7872ab904cb086b307745\"}},{\"@type\":\"WebSite\",\"@id\":\"https://www.plain.com/docs#website\",\"name\":\"Plain Docs\",\"url\":\"https://www.plain.com/docs\",\"publisher\":{\"@id\":\"https://www.plain.com/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://www.plain.com/docs/ui-components/spacer#webpage\",\"url\":\"https://www.plain.com/docs/ui-components/spacer\",\"name\":\"Spacer\",\"description\":\"Adds vertical space between components, in one of five fixed sizes.\",\"dateModified\":\"2026-09-01T15:33:53.142Z\",\"isPartOf\":{\"@id\":\"https://www.plain.com/docs#website\"},\"breadcrumb\":{\"@id\":\"https://www.plain.com/docs/ui-components/spacer#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://www.plain.com/docs/ui-components/spacer#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"UI Components\",\"item\":\"https://www.plain.com/docs/ui-components\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Spacer\",\"item\":\"https://www.plain.com/docs/ui-components/spacer\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://www.plain.com/docs/ui-components/spacer#article\",\"headline\":\"Spacer\",\"name\":\"Spacer\",\"description\":\"Adds vertical space between components, in one of five fixed sizes.\",\"url\":\"https://www.plain.com/docs/ui-components/spacer\",\"mainEntityOfPage\":{\"@id\":\"https://www.plain.com/docs/ui-components/spacer#webpage\"},\"image\":\"https://www.plain.com/public/sharing/social-card.png\",\"dateModified\":\"2026-09-01T15:33:53.142Z\",\"publisher\":{\"@id\":\"https://www.plain.com/#organization\"},\"isPartOf\":{\"@id\":\"https://www.plain.com/docs#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Plain Docs\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"Plain Docs","nav":{"global":null,"tabs":[{"tab":"Documentation","pages":[{"title":"Documentation","href":"/product/what-is-plain"}]},{"tab":"Developer","pages":[{"group":"GraphQL API","icon":"code","pages":[{"title":"Introduction","sidebarTitle":"Introduction","href":"/graphql/introduction"},{"title":"Authentication","href":"/graphql/authentication"},{"title":"Schema","href":"/graphql/schema"},{"title":"Pagination","href":"/graphql/pagination"},{"title":"Error handling","href":"/graphql/error-handling"},{"title":"Error codes","href":"/graphql/error-codes"},{"group":"Customers","pages":[{"title":"Customers","sidebarTitle":"Overview","href":"/graphql/customers"},{"title":"Fetch customers","href":"/graphql/customers/get"},{"title":"Upserting customers","href":"/graphql/customers/upsert"},{"title":"Delete customers","href":"/graphql/customers/delete"},{"title":"Mark customer as spam","href":"/graphql/customers/spam"},{"title":"Customer groups","href":"/graphql/customers/customer-groups"}]},{"group":"Tenants","pages":[{"title":"Tenants","sidebarTitle":"Overview","href":"/graphql/tenants"},{"title":"Upserting tenants","href":"/graphql/tenants/upsert"},{"title":"Get tenants","href":"/graphql/tenants/get"},{"title":"Delete a tenant","href":"/graphql/tenants/delete"},{"title":"Tenant fields","href":"/graphql/tenants/tenant-fields"},{"title":"Add customers to tenants","sidebarTitle":"Add Customers","href":"/graphql/tenants/add-customers"},{"title":"Remove customers from tenants","sidebarTitle":"Remove Customers","href":"/graphql/tenants/remove-customers"},{"title":"Set customer tenants","href":"/graphql/tenants/set-customer-tenants"}]},{"group":"Threads","pages":[{"title":"Threads","sidebarTitle":"Overview","href":"/graphql/threads"},{"title":"Fetch threads","href":"/graphql/threads/get"},{"title":"Create threads","href":"/graphql/threads/create"},{"title":"Importing threads","href":"/graphql/threads/import"},{"title":"Update thread attributes","href":"/graphql/threads/update"},{"title":"Delete a thread","href":"/graphql/threads/delete"},{"title":"Assignment","href":"/graphql/threads/assignment"},{"title":"Escalating threads","href":"/graphql/threads/escalation"},{"title":"Changing status","href":"/graphql/threads/status-changes"},{"title":"Thread fields","href":"/graphql/threads/thread-fields"},{"title":"Autoresponders","href":"/graphql/threads/autoresponders"}]},{"group":"Tiers","pages":[{"title":"Tiers \u0026 SLAs","sidebarTitle":"Overview","href":"/graphql/tiers"},{"title":"Get tiers","sidebarTitle":"Get Tiers","href":"/graphql/tiers/get"},{"title":"Update tenant tier","href":"/graphql/tiers/update-tenant-tier"},{"title":"Add tenants to tiers","sidebarTitle":"Add Tenants","href":"/graphql/tiers/add-members"},{"title":"Remove tenants from tiers","sidebarTitle":"Remove Tenants","href":"/graphql/tiers/remove-members"},{"title":"Service level agreements","sidebarTitle":"SLAs","href":"/graphql/tiers/service-level-agreements"}]},{"group":"SLA policies","pages":[{"title":"SLA policies","sidebarTitle":"Overview","href":"/graphql/sla-policies"},{"title":"Get SLA policies","href":"/graphql/sla-policies/get"},{"title":"Manage SLA policies","href":"/graphql/sla-policies/manage"},{"title":"Apply SLA policies","href":"/graphql/sla-policies/apply-to-thread"}]},{"group":"Reporting","pages":[{"title":"Reporting","sidebarTitle":"Overview","href":"/graphql/reporting"},{"title":"Reporting metrics reference","sidebarTitle":"Metrics","href":"/graphql/reporting/metrics"},{"title":"Filter and group reporting queries","sidebarTitle":"Filters \u0026 Grouping","href":"/graphql/reporting/filters"},{"title":"Get a time series metric","sidebarTitle":"Time series","href":"/graphql/reporting/time-series"},{"title":"Get a single value metric","sidebarTitle":"Single value","href":"/graphql/reporting/single-value"},{"title":"Get a heatmap","sidebarTitle":"Heatmap","href":"/graphql/reporting/heatmap"}]},{"group":"Events","pages":[{"title":"Events","sidebarTitle":"Overview","href":"/graphql/events"},{"title":"Create a customer event","href":"/graphql/events/create-customer-event"},{"title":"Create a thread event","href":"/graphql/events/create-thread-event"}]},{"group":"Labels","pages":[{"title":"Labels","sidebarTitle":"Overview","href":"/graphql/labels"},{"title":"Add labels","href":"/graphql/labels/add"},{"title":"Remove labels","href":"/graphql/labels/remove"},{"title":"Manage label types","href":"/graphql/labels/label-types"}]},{"group":"Messaging","pages":[{"title":"Messaging","sidebarTitle":"Overview","href":"/graphql/messaging"},{"title":"Reply to threads","href":"/graphql/messaging/reply-to-thread"},{"title":"Send new emails","href":"/graphql/messaging/send-email"},{"title":"Reply to emails","href":"/graphql/messaging/reply-email"},{"title":"Suggested replies","href":"/graphql/messaging/suggested-replies"}]},{"group":"Snippets","pages":[{"title":"Snippets","sidebarTitle":"Overview","href":"/graphql/snippets"},{"title":"Fetch snippets","href":"/graphql/snippets/get"},{"title":"Create a snippet","href":"/graphql/snippets/create"},{"title":"Update a snippet","href":"/graphql/snippets/update"},{"title":"Delete a snippet","href":"/graphql/snippets/delete"}]},{"group":"Tasks","pages":[{"title":"Tasks","sidebarTitle":"Overview","href":"/graphql/tasks"},{"title":"Fetch tasks","href":"/graphql/tasks/get"},{"title":"Create a task","href":"/graphql/tasks/create"},{"title":"Update a task","href":"/graphql/tasks/update"},{"title":"Delete a task","href":"/graphql/tasks/delete"}]},{"group":"Knowledge gaps","pages":[{"title":"Knowledge gaps","sidebarTitle":"Overview","href":"/graphql/knowledge-gaps"},{"title":"Fetch knowledge gaps","href":"/graphql/knowledge-gaps/get"}]},{"title":"AI feedback","href":"/graphql/ai-feedback"},{"title":"Notes","href":"/graphql/notes"},{"group":"Webhook targets","pages":[{"title":"Webhook targets","sidebarTitle":"Overview","href":"/graphql/webhook-targets"},{"title":"Fetch webhook targets","href":"/graphql/webhook-targets/get"},{"title":"Create a webhook target","href":"/graphql/webhook-targets/create"},{"title":"Update a webhook target","href":"/graphql/webhook-targets/update"},{"title":"Delete a webhook target","href":"/graphql/webhook-targets/delete"},{"title":"Inspect delivery attempts","href":"/graphql/webhook-targets/delivery-attempts"}]},{"group":"Discussions","pages":[{"title":"Discussions","sidebarTitle":"Overview","href":"/graphql/discussions"},{"title":"Fetch discussions","href":"/graphql/discussions/get"},{"title":"Start a discussion","href":"/graphql/discussions/create"},{"title":"Send a discussion message","href":"/graphql/discussions/send-message"}]},{"group":"Help center","pages":[{"title":"Help Center","sidebarTitle":"Overview","href":"/graphql/help-center"},{"title":"Fetch help centers and articles","href":"/graphql/help-center/get"},{"title":"Manage articles","href":"/graphql/help-center/manage-articles"},{"title":"Manage article groups","href":"/graphql/help-center/manage-article-groups"},{"title":"Manage the navigation","sidebarTitle":"Navigation","href":"/graphql/help-center/navigation"},{"title":"Access \u0026 authentication","href":"/graphql/help-center/authentication"}]},{"title":"Building your own ticket importer","href":"/graphql/custom-ticket-importer"},{"title":"Attachments","href":"/graphql/attachments"},{"title":"API explorer","icon":"link","url":"https://app.plain.com/developer/api-explorer/","href":"/graphql/api-explorer"},{"title":"GraphQL SDK","icon":"package","href":"/graphql/sdk"}]},{"group":"Building Agents","icon":"bot","pages":[{"title":"Set up an agent","sidebarTitle":"Getting started","href":"/agents"},{"title":"Interacting in discussions","sidebarTitle":"Interacting in Discussions","href":"/agents/discussions"},{"title":"Working on threads","sidebarTitle":"Working on Threads","href":"/agents/threads"},{"title":"Tool calls","sidebarTitle":"Tool Calls","href":"/agents/tool-calls"},{"title":"Suggesting replies","sidebarTitle":"Suggesting Replies","href":"/agents/suggested-replies"},{"title":"Working with notes","sidebarTitle":"Working with Notes","href":"/agents/notes"},{"title":"Using knowledge","sidebarTitle":"Using Knowledge","href":"/agents/searching-knowledge"},{"title":"Example agents","sidebarTitle":"Examples","href":"/agents/examples"}]},{"group":"Agent integrations","icon":"plug","pages":[{"title":"Agent integrations","sidebarTitle":"Overview","href":"/integrations"},{"title":"MCP server","href":"/integrations/mcp-server"},{"title":"Agent skill","href":"/integrations/agent-skill"},{"title":"Cursor","href":"/integrations/cursor"}]},{"group":"Webhooks","icon":"webhook","pages":[{"title":"Webhooks","sidebarTitle":"Overview","href":"/webhooks"},{"title":"Webhook versions","sidebarTitle":"Webhook Versions","href":"/webhooks/versions"},{"group":"Webhook events","pages":[{"title":"Thread created","href":"/webhooks/thread-created"},{"title":"Thread status transitioned","href":"/webhooks/thread-status-transitioned"},{"title":"Thread assignment transitioned","href":"/webhooks/thread-assignment-transitioned"},{"title":"Thread labels changed","href":"/webhooks/thread-labels-changed"},{"title":"Thread priority changed","href":"/webhooks/thread-priority-changed"},{"title":"Note created","href":"/webhooks/thread-note-created"},{"title":"Note mention created","href":"/webhooks/thread-note-mention-created"},{"title":"Email received","href":"/webhooks/thread-email-received"},{"title":"Email sent","href":"/webhooks/thread-email-sent"},{"title":"Slack message received","href":"/webhooks/thread-slack-message-received"},{"title":"Slack message sent","href":"/webhooks/thread-slack-message-sent"},{"title":"Slack message updated","href":"/webhooks/thread-slack-message-updated"},{"title":"Discord message received","href":"/webhooks/thread-discord-message-received"},{"title":"Discord message sent","href":"/webhooks/thread-discord-message-sent"},{"title":"Discord message updated","href":"/webhooks/thread-discord-message-updated"},{"title":"Microsoft Teams message received","href":"/webhooks/thread-ms-teams-message-received"},{"title":"Microsoft Teams message sent","href":"/webhooks/thread-ms-teams-message-sent"},{"title":"Chat sent","href":"/webhooks/thread-chat-sent"},{"title":"Chat received","href":"/webhooks/thread-chat-received"},{"title":"Thread field created","href":"/webhooks/thread-field-created"},{"title":"Thread field updated","href":"/webhooks/thread-field-updated"},{"title":"Thread field deleted","href":"/webhooks/thread-field-deleted"},{"title":"Thread SLA status transitioned","href":"/webhooks/thread-service-level-agreement-status-transitioned"},{"title":"Thread tenant (account) updated","href":"/webhooks/thread-tenant-updated"},{"title":"Thread locked","href":"/webhooks/thread-locked"},{"title":"Discussion created","href":"/webhooks/discussion-created"},{"title":"Discussion message created","href":"/webhooks/discussion-message-created"},{"title":"Tool call approval requested","href":"/webhooks/discussion-tool-call-approval-requested"},{"title":"Tool call approval resolved","href":"/webhooks/discussion-tool-call-approval-resolved"},{"title":"Discussion turn stop requested","href":"/webhooks/discussion-turn-stop-requested"},{"title":"Task created","href":"/webhooks/task-created"},{"title":"Task updated","href":"/webhooks/task-updated"},{"title":"Task status transitioned","href":"/webhooks/task-status-transitioned"},{"title":"Task deleted","href":"/webhooks/task-deleted"},{"title":"Account created","href":"/webhooks/account-created"},{"title":"Account updated","href":"/webhooks/account-updated"},{"title":"Account deleted","href":"/webhooks/account-deleted"},{"title":"Account membership changed","href":"/webhooks/account-membership-changed"},{"title":"Account field created","href":"/webhooks/account-field-created"},{"title":"Account field updated","href":"/webhooks/account-field-updated"},{"title":"Account field deleted","href":"/webhooks/account-field-deleted"},{"title":"Customer created","href":"/webhooks/customer-created"},{"title":"Customer updated","href":"/webhooks/customer-updated"},{"title":"Customer deleted","href":"/webhooks/customer-deleted"},{"title":"Customer changed","href":"/webhooks/customer-changed"},{"title":"Customer group membership changed","href":"/webhooks/customer-group-membership-changed"},{"title":"Customer group changed","href":"/webhooks/customer-group-changed"},{"title":"Timeline entry changed","href":"/webhooks/timeline-entry-changed"}]},{"title":"Webhooks SDK","icon":"package","href":"/webhooks/sdk"}]},{"group":"Channels","icon":"inbox","pages":[{"title":"Authenticate chat customers","sidebarTitle":"Authentication","href":"/product/channels/chat-authentication"},{"title":"Headless portal","href":"/headless-portal"},{"title":"Custom channels","href":"/custom-channels"}]},{"group":"Customer Cards","icon":"id-card","pages":[{"title":"Customer cards","sidebarTitle":"Overview","href":"/customer-cards"},{"title":"Create a customer card","href":"/customer-cards/create-a-customer-card"},{"title":"Protocol","href":"/customer-cards/protocol"},{"title":"Playground","icon":"link","url":"https://app.plain.com/developer/ui-components-playground/","href":"/customer-cards/playground"},{"title":"Examples","icon":"link","url":"https://github.com/team-plain/example-customer-cards","href":"/customer-cards/examples"}]},{"group":"UI Components","icon":"component","pages":[{"title":"UI components","sidebarTitle":"Overview","href":"/ui-components"},{"title":"Badge","href":"/ui-components/badge"},{"title":"Container","href":"/ui-components/container"},{"title":"CopyButton","href":"/ui-components/copy-button"},{"title":"Divider","href":"/ui-components/divider"},{"title":"LinkButton","href":"/ui-components/link-button"},{"title":"WorkflowButton","href":"/ui-components/workflow-button"},{"title":"PlainText","href":"/ui-components/plain-text"},{"title":"Row","description":"Useful when you need to show two things next to each-other.","href":"/ui-components/row"},{"title":"Spacer","href":"/ui-components/spacer"},{"title":"Text","description":"Renders a line of text, with optional size, color, and formatting.","href":"/ui-components/text"},{"title":"UI components SDK","icon":"package","href":"/ui-components/sdk"}]},{"group":"Security","icon":"shield-check","pages":[{"title":"Request signing","href":"/request-signing"},{"title":"mTLS","href":"/mtls"}]},{"group":"Changelog","icon":"history","pages":[{"sidebarTitle":"Changelog","title":"API and webhook updates","href":"/changelog"}]}]},{"tab":"API Reference","pages":[{"title":"API Reference","href":"/graphql-reference/queries/activeThreadCluster"}]}]},"title":"Spacer - Plain Docs","buildId":"dpl_BvXubCjoPYfvfFiCP5WgKvGYUZ9k","deploymentId":"dpl_BvXubCjoPYfvfFiCP5WgKvGYUZ9k","dynamics":["07c022d89b","a74be98ba7"],"chunks":["Frame-kGT3JtHF.js","DynamicMarkdown-DteaQut7.js","zoom-image-lightbox-kIzybAsE.js","lightbox-handle-r17bVUz3.js"]}