All components were tested using the most popular email clients.
Gmail
Apple Mail
Outlook
Yahoo! Mail
HEY
Superhuman
⌘I
{"docsConfig":{"theme":"almond","$schema":"https://mintlify.com/docs.json","name":"React Email","colors":{"primary":"#06BCEE","light":"#81D7F7","dark":"#0E7490"},"logo":{"light":"https://mintcdn.com/react-email/5VriGJ5Ik0v6egEW/logo/light.svg?fit=max\u0026auto=format\u0026n=5VriGJ5Ik0v6egEW\u0026q=85\u0026s=b39c562221038e5817dcacb0afb698a9","dark":"https://mintcdn.com/react-email/5VriGJ5Ik0v6egEW/logo/dark.svg?fit=max\u0026auto=format\u0026n=5VriGJ5Ik0v6egEW\u0026q=85\u0026s=9d8335c2783b8541912c4dfce2a98d58"},"favicon":"https://mintcdn.com/react-email/5VriGJ5Ik0v6egEW/favicon.png?fit=max\u0026auto=format\u0026n=5VriGJ5Ik0v6egEW\u0026q=85\u0026s=bc6741090f7306d11f881052cd25ce9f","background":{"image":"https://mintcdn.com/react-email/5VriGJ5Ik0v6egEW/images/background.png?fit=max\u0026auto=format\u0026n=5VriGJ5Ik0v6egEW\u0026q=85\u0026s=f8e7b360614b3c860bad7ac326584901","color":{"light":"#FFFFFF","dark":"#111111"}},"navbar":{"primary":{"type":"github","href":"https://github.com/resend/react-email"}},"styling":{"codeblocks":{"theme":{"light":"github-light","dark":"vesper"}},"latex":false},"integrations":{"ga4":{"measurementId":"G-2LXLLQLM5D"}},"contextual":{"options":["copy",{"title":"llms-full.txt","description":"View all docs as Markdown for LLMs","icon":"markdown","href":"https://react.email/docs/llms-full.txt"},"chatgpt","claude"],"display":"header"},"navigation":{"global":{"anchors":[{"anchor":"Components","icon":"grid-2-plus","href":"https://react.email/components"},{"anchor":"Templates","icon":"arrow-pointer","href":"https://demo.react.email/preview/Community/notifications/vercel-invite-user"}]},"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"react-email","hasAudioNarration":false,"actualSubdomain":"react-email","customDomains":["react.email"],"gitSource":{"type":"github","owner":"resend","repo":"react-email","deployBranch":"main","contentDirectory":"apps/docs","mountPath":"","label":""},"chroma":{"liveDeploymentHistoryId":"6acfe14364145da8aa474c38","collectionId":"fae6ef1e-5e76-4949-b3d2-e5efff5edc05","schemaVersion":"v3","latestBuiltDeploymentHistoryId":"6acfe14364145da8aa474c38"},"entitlements":{},"buildId":"6acfe14364145da8aa474c38","clientVersion":"0.0.3965","searchFilterCounts":[{"language":"default","tag":"Primitives","count":65},{"language":"default","tag":"Editor","count":26},{"language":"default","tag":"Components","count":19},{"language":"default","tag":"Integrations","count":18},{"language":"default","tag":"API Reference","count":11},{"language":"default","tag":"Contributing","count":10},{"language":"default","tag":"Features","count":10},{"language":"default","tag":"Getting Started","count":8},{"language":"default","tag":"Overview","count":7},{"language":"default","tag":"Development workflow","count":6}]},"assistantConfig":{},"hasChatPermissions":false,"hasWebMcpPermissions":false,"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":true},"customCss":[{"filePath":"style.css","content":"@media (min-width:1024px){#navbar .flex-1.flex.items-center.gap-x-4:has(img.nav-logo):has(>a){flex:none!important;width:14.75rem}#navbar .flex.items-center.gap-4:has(.nav-tabs){flex:1!important}#navbar .ml-auto:has(.nav-tabs){margin-left:0!important;justify-content:space-between;flex:1!important}#navbar .gap-x-6:has(.nav-tabs)>nav{margin-left:auto!important}}#footer a[href*=\"mintlify.com\"]{display:none}"}],"page":{"pagePath":"components/column","slug":"/components/column","pageMetadata":{"title":"Column","sidebarTitle":"Column","description":"Display a column that separates content areas vertically in your email. A column needs to be used in combination with a Row component.","og:image":"https://react.email/static/covers/column.png","icon":"columns-3","href":"/components/column"},"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: \"Display a column that separates content areas vertically in your email. A column needs to be used in combination with a Row component.\"\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`,p:`p`,pre:`pre`,span:`span`,..._provideComponents(),...props.components},{CodeBlock,CodeGroup,Heading,OptimizedImage}=_components;if(!CodeBlock)_missingMdxReference(`CodeBlock`,true);if(!CodeGroup)_missingMdxReference(`CodeGroup`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!OptimizedImage)_missingMdxReference(`OptimizedImage`,true);return _jsxs(_Fragment,{children:[_jsx(Heading,{level:`2`,id:`install`,children:`Install`}),`\n`,_jsx(_components.p,{children:`Install component from your command line.`}),`\n`,_jsxs(CodeGroup,{children:[_jsx(CodeBlock,{filename:`npm`,numberOfLines:`1`,language:`shellscript`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light vesper`,style:{backgroundColor:`#fff`,\"--shiki-dark-bg\":`#101010`,color:`#24292e`,\"--shiki-dark\":`#FFF`},language:`shellscript`,children:_jsxs(_components.code,{language:`shellscript`,numberOfLines:`1`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#6F42C1`,\"--shiki-dark\":`#FFC799`},children:`npm`}),_jsx(_components.span,{style:{color:`#032F62`,\"--shiki-dark\":`#99FFE4`},children:` install`}),_jsx(_components.span,{style:{color:`#032F62`,\"--shiki-dark\":`#99FFE4`},children:` react-email`}),_jsx(_components.span,{style:{color:`#005CC5`,\"--shiki-dark\":`#99FFE4`},children:` -E`})]}),`\n`]})})}),_jsx(CodeBlock,{filename:`yarn`,numberOfLines:`1`,language:`shellscript`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light vesper`,style:{backgroundColor:`#fff`,\"--shiki-dark-bg\":`#101010`,color:`#24292e`,\"--shiki-dark\":`#FFF`},language:`shellscript`,children:_jsxs(_components.code,{language:`shellscript`,numberOfLines:`1`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#6F42C1`,\"--shiki-dark\":`#FFC799`},children:`yarn`}),_jsx(_components.span,{style:{color:`#032F62`,\"--shiki-dark\":`#99FFE4`},children:` add`}),_jsx(_components.span,{style:{color:`#032F62`,\"--shiki-dark\":`#99FFE4`},children:` react-email`}),_jsx(_components.span,{style:{color:`#005CC5`,\"--shiki-dark\":`#99FFE4`},children:` -E`})]}),`\n`]})})}),_jsx(CodeBlock,{filename:`pnpm`,numberOfLines:`1`,language:`shellscript`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light vesper`,style:{backgroundColor:`#fff`,\"--shiki-dark-bg\":`#101010`,color:`#24292e`,\"--shiki-dark\":`#FFF`},language:`shellscript`,children:_jsxs(_components.code,{language:`shellscript`,numberOfLines:`1`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#6F42C1`,\"--shiki-dark\":`#FFC799`},children:`pnpm`}),_jsx(_components.span,{style:{color:`#032F62`,\"--shiki-dark\":`#99FFE4`},children:` add`}),_jsx(_components.span,{style:{color:`#032F62`,\"--shiki-dark\":`#99FFE4`},children:` react-email`}),_jsx(_components.span,{style:{color:`#005CC5`,\"--shiki-dark\":`#99FFE4`},children:` -E`})]}),`\n`]})})})]}),`\n`,_jsx(Heading,{level:`2`,id:`getting-started`,children:`Getting started`}),`\n`,_jsx(_components.p,{children:`Add the component to your email template. Include styles where needed.`}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`11`,language:`jsx`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light vesper`,style:{backgroundColor:`#fff`,\"--shiki-dark-bg\":`#101010`,color:`#24292e`,\"--shiki-dark\":`#FFF`},language:`jsx`,children:_jsxs(_components.code,{language:`jsx`,numberOfLines:`11`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#A0A0A0`},children:`import`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#FFF`},children:` { Column, Row } `}),_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#A0A0A0`},children:`from`}),_jsx(_components.span,{style:{color:`#032F62`,\"--shiki-dark\":`#99FFE4`},children:` \"react-email\"`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#FFF`},children:`;`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#A0A0A0`},children:`const`}),_jsx(_components.span,{style:{color:`#6F42C1`,\"--shiki-dark\":`#FFC799`},children:` Email`}),_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#A0A0A0`},children:` =`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#FFF`},children:` () `}),_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#A0A0A0`},children:`=>`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#FFF`},children:` {`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#D73A49`,\"--shiki-dark\":`#A0A0A0`},children:` return`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#FFF`},children:` (`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#A0A0A0`},children:` \u003c`}),_jsx(_components.span,{style:{color:`#005CC5`,\"--shiki-dark\":`#FFC799`},children:`Row`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#A0A0A0`},children:`>`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#A0A0A0`},children:` \u003c`}),_jsx(_components.span,{style:{color:`#005CC5`,\"--shiki-dark\":`#FFC799`},children:`Column`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#A0A0A0`},children:`>`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#FFF`},children:`A`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#A0A0A0`},children:`\u003c/`}),_jsx(_components.span,{style:{color:`#005CC5`,\"--shiki-dark\":`#FFC799`},children:`Column`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#A0A0A0`},children:`>`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#A0A0A0`},children:` \u003c`}),_jsx(_components.span,{style:{color:`#005CC5`,\"--shiki-dark\":`#FFC799`},children:`Column`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#A0A0A0`},children:`>`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#FFF`},children:`B`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#A0A0A0`},children:`\u003c/`}),_jsx(_components.span,{style:{color:`#005CC5`,\"--shiki-dark\":`#FFC799`},children:`Column`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#A0A0A0`},children:`>`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#A0A0A0`},children:` \u003c`}),_jsx(_components.span,{style:{color:`#005CC5`,\"--shiki-dark\":`#FFC799`},children:`Column`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#A0A0A0`},children:`>`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#FFF`},children:`C`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#A0A0A0`},children:`\u003c/`}),_jsx(_components.span,{style:{color:`#005CC5`,\"--shiki-dark\":`#FFC799`},children:`Column`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#A0A0A0`},children:`>`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#A0A0A0`},children:` \u003c/`}),_jsx(_components.span,{style:{color:`#005CC5`,\"--shiki-dark\":`#FFC799`},children:`Row`}),_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#A0A0A0`},children:`>`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#FFF`},children:` );`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#24292E`,\"--shiki-dark\":`#FFF`},children:`};`})}),`\n`]})})}),`\n`,_jsx(Heading,{level:`2`,id:`support`,children:`Support`}),`\n`,_jsx(_components.p,{children:`All components were tested using the most popular email clients.`}),`\n`,_jsxs(`div`,{role:`list`,className:`mint-grid mint-py-2 mint-list-none mint-border mint-rounded-xl mint-text-sm`,style:{gridTemplateColumns:`repeat(auto-fit, minmax(100px, 1fr))`,columnGap:`0.5rem`,borderColor:`rgb(30 41 59/1)`},children:[_jsxs(`div`,{className:`mint-text-center mint-block not-prose group mint-relative mint-my-2 mint-ring-2 mint-ring-transparent mint-overflow-hidden`,children:[_jsx(OptimizedImage,{src:`https://react.email/static/icons/gmail.svg`,width:`56px`,height:`56px`,alt:`Gmail`,className:`mint-mx-auto mint-mb-1`}),_jsx(_components.p,{children:`Gmail`})]}),_jsxs(`div`,{className:`mint-text-center mint-block not-prose group mint-relative mint-my-2 mint-ring-2 mint-ring-transparent mint-overflow-hidden`,children:[_jsx(OptimizedImage,{src:`https://react.email/static/icons/apple-mail.svg`,width:`56px`,height:`56px`,alt:`Apple Mail`,className:`mint-mx-auto mint-mb-1`}),_jsx(_components.p,{children:`Apple Mail`})]}),_jsxs(`div`,{className:`mint-text-center mint-block not-prose group mint-relative mint-my-2 mint-ring-2 mint-ring-transparent mint-overflow-hidden`,children:[_jsx(OptimizedImage,{src:`https://react.email/static/icons/outlook.svg`,width:`56px`,height:`56px`,alt:`Outlook`,className:`mint-mx-auto mint-mb-1`}),_jsx(_components.p,{children:`Outlook`})]}),_jsxs(`div`,{className:`mint-text-center mint-block not-prose group mint-relative mint-my-2 mint-ring-2 mint-ring-transparent mint-overflow-hidden`,children:[_jsx(OptimizedImage,{src:`https://react.email/static/icons/yahoo-mail.svg`,width:`56px`,height:`56px`,alt:`Yahoo! Mail`,className:`mint-mx-auto mint-mb-1`}),_jsx(_components.p,{children:`Yahoo! Mail`})]}),_jsxs(`div`,{className:`mint-text-center mint-block not-prose group mint-relative mint-my-2 mint-ring-2 mint-ring-transparent mint-overflow-hidden`,children:[_jsx(OptimizedImage,{src:`https://react.email/static/icons/hey.svg`,width:`56px`,height:`56px`,alt:`HEY`,className:`mint-mx-auto mint-mb-1`}),_jsx(_components.p,{children:`HEY`})]}),_jsxs(`div`,{className:`mint-text-center mint-block not-prose group mint-relative mint-my-2 mint-ring-2 mint-ring-transparent mint-overflow-hidden`,children:[_jsx(OptimizedImage,{src:`https://react.email/static/icons/superhuman.svg`,width:`56px`,height:`56px`,alt:`Superhuman`,className:`mint-mx-auto mint-mb-1`}),_jsx(_components.p,{children:`Superhuman`})]})]})]})}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":{"codeStyling":{"theme":{"light":"github-light","dark":"vesper"}},"config":{},"pageMetadata":{"title":"Column","sidebarTitle":"Column","description":"Display a column that separates content areas vertically in your email. A column needs to be used in combination with a Row component.","og:image":"https://react.email/static/covers/column.png","icon":"columns-3","href":"/components/column"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Install","slug":"install","depth":2,"children":[]},{"title":"Getting started","slug":"getting-started","depth":2,"children":[]},{"title":"Support","slug":"support","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"dynamicCss":".mint-relative {\n position: relative\n}\n.mint-mx-auto {\n margin-left: auto;\n margin-right: auto\n}\n.mint-my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem\n}\n.mint-mb-1 {\n margin-bottom: 0.25rem\n}\n.mint-block {\n display: block\n}\n.mint-grid {\n display: grid\n}\n.mint-list-none {\n list-style-type: none\n}\n.mint-overflow-hidden {\n overflow: hidden\n}\n.mint-rounded-xl {\n border-radius: 0.75rem\n}\n.mint-border {\n border-width: 1px\n}\n.mint-py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n.mint-text-center {\n text-align: center\n}\n.mint-text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem\n}\n.mint-ring-2 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)\n}\n.mint-ring-transparent {\n --tw-ring-color: transparent\n}","subdomain":"react-email","siteName":"React Email","title":"Column - React Email","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-04-28T19:23:19.585Z","originalFileLocation":"components/column.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=\"Display a column that separates content areas vertically in your email. A column needs to be used in combination with a Row component.\">\u003cmeta data-mint-head name=\"application-name\" content=\"React Email\">\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/react-email/HKze1io2eEDCMZTC/_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/react-email/HKze1io2eEDCMZTC/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/docs/mintlify-assets/_mintlify/favicons/react-email/HKze1io2eEDCMZTC/_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/react-email/HKze1io2eEDCMZTC/_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/react-email/HKze1io2eEDCMZTC/_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/react-email/HKze1io2eEDCMZTC/_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/react-email/HKze1io2eEDCMZTC/_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/react-email/HKze1io2eEDCMZTC/_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/react-email/HKze1io2eEDCMZTC/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Column - React Email\">\u003cmeta data-mint-head property=\"og:description\" content=\"Display a column that separates content areas vertically in your email. A column needs to be used in combination with a Row component.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"React Email\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://react.email/docs/components/column\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://react.email/static/covers/column.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=\"Column - React Email\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Display a column that separates content areas vertically in your email. A column needs to be used in combination with a Row component.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://react.email/static/covers/column.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/react-email/HKze1io2eEDCMZTC/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"React Email\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#06BCEE\">\u003clink data-mint-head rel=\"canonical\" href=\"https://react.email/docs/components/column\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/docs/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/docs/components/column.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://react.email/#organization\",\"name\":\"React Email\",\"url\":\"https://react.email\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/react-email/5VriGJ5Ik0v6egEW/logo/light.svg?fit=max\u0026auto=format\u0026n=5VriGJ5Ik0v6egEW\u0026q=85\u0026s=b39c562221038e5817dcacb0afb698a9\"}},{\"@type\":\"WebSite\",\"@id\":\"https://react.email/docs#website\",\"name\":\"React Email\",\"url\":\"https://react.email/docs\",\"publisher\":{\"@id\":\"https://react.email/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://react.email/docs/components/column#webpage\",\"url\":\"https://react.email/docs/components/column\",\"name\":\"Column\",\"description\":\"Display a column that separates content areas vertically in your email. A column needs to be used in combination with a Row component.\",\"dateModified\":\"2026-04-28T19:23:19.585Z\",\"isPartOf\":{\"@id\":\"https://react.email/docs#website\"},\"breadcrumb\":{\"@id\":\"https://react.email/docs/components/column#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://react.email/docs/components/column#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Components\",\"item\":\"https://react.email/docs/components/html\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Column\",\"item\":\"https://react.email/docs/components/column\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://react.email/docs/components/column#article\",\"headline\":\"Column\",\"name\":\"Column\",\"description\":\"Display a column that separates content areas vertically in your email. A column needs to be used in combination with a Row component.\",\"url\":\"https://react.email/docs/components/column\",\"mainEntityOfPage\":{\"@id\":\"https://react.email/docs/components/column#webpage\"},\"image\":\"https://react.email/static/covers/column.png\",\"dateModified\":\"2026-04-28T19:23:19.585Z\",\"publisher\":{\"@id\":\"https://react.email/#organization\"},\"isPartOf\":{\"@id\":\"https://react.email/docs#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"React Email\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"React Email","nav":{"global":{"anchors":[{"anchor":"Components","icon":"grid-2-plus","href":"https://react.email/components"},{"anchor":"Templates","icon":"arrow-pointer","href":"https://demo.react.email/preview/Community/notifications/vercel-invite-user"}]},"tabs":[{"tab":"Primitives","icon":"cubes","groups":[{"group":"Overview","pages":[{"title":"React Email","sidebarTitle":"Introduction","icon":"hand-wave","href":"/introduction"},{"title":"Changelog","sidebarTitle":"Changelog","icon":"list-check","href":"/changelog"},{"title":"Roadmap","sidebarTitle":"Roadmap","icon":"map","href":"/roadmap"},{"title":"CLI","sidebarTitle":"CLI","icon":"square-terminal","href":"/cli"},{"title":"Deployment","sidebarTitle":"Deployment","icon":"rocket","href":"/deployment"}]},{"group":"Getting Started","pages":[{"title":"Automatic Setup","sidebarTitle":"Automatic Setup","icon":"download","href":"/getting-started/automatic-setup"},{"title":"Manual Setup","sidebarTitle":"Manual Setup","icon":"hammer","href":"/getting-started/manual-setup"},{"group":"Monorepo Setup","icon":"diagram-project","pages":[{"title":"Setting up for npm workspaces","sidebarTitle":"npm","href":"/getting-started/monorepo-setup/npm"},{"title":"Setting up for pnpm workspaces","sidebarTitle":"pnpm","href":"/getting-started/monorepo-setup/pnpm"},{"title":"Setting up for yarn workspaces","sidebarTitle":"yarn","href":"/getting-started/monorepo-setup/yarn"},{"title":"Setting up for bun workspaces","sidebarTitle":"bun","href":"/getting-started/monorepo-setup/bun"}]},{"title":"Migrating to React Email","sidebarTitle":"Migrating to React Email","icon":"paper-plane","href":"/getting-started/migrating-to-react-email"},{"title":"Updating React Email","sidebarTitle":"Updating React Email","icon":"arrow-up-wide-short","href":"/getting-started/updating-react-email"}]},{"group":"Guides","pages":[{"group":"Internationalization","icon":"earth-americas","pages":[{"title":"next-intl","sidebarTitle":"next-intl","href":"/guides/internationalization/next-intl"},{"title":"react-i18next","sidebarTitle":"react-i18next","href":"/guides/internationalization/react-i18next"},{"title":"React Intl","sidebarTitle":"React Intl","href":"/guides/internationalization/react-intl"}]},{"title":"Custom esbuild plugins","sidebarTitle":"esbuild plugins","icon":"puzzle-piece","href":"/guides/esbuild-plugins"}]},{"group":"Components","pages":[{"title":"HTML","sidebarTitle":"HTML","icon":"file-code","href":"/components/html"},{"title":"Head","sidebarTitle":"Head","icon":"head-side","href":"/components/head"},{"title":"Body","sidebarTitle":"Body","icon":"window-maximize","href":"/components/body"},{"title":"Button","sidebarTitle":"Button","icon":"b","href":"/components/button"},{"title":"Container","sidebarTitle":"Container","icon":"grid","href":"/components/container"},{"title":"Code Block","sidebarTitle":"Code Block","icon":"file-lines","href":"/components/code-block"},{"title":"Code Inline","sidebarTitle":"Code Inline","description":"Display a predictable inline code HTML element that works on all email clients.","icon":"code","href":"/components/code-inline"},{"title":"Column","sidebarTitle":"Column","icon":"columns-3","href":"/components/column"},{"title":"Row","sidebarTitle":"Row","description":"Display a row that separates content areas horizontally in your email.","icon":"table-rows","href":"/components/row"},{"title":"Font","sidebarTitle":"Font","icon":"book-font","href":"/components/font"},{"title":"Heading","sidebarTitle":"Heading","icon":"h1","href":"/components/heading"},{"title":"Hr","sidebarTitle":"Hr","icon":"horizontal-rule","href":"/components/hr"},{"title":"Image","sidebarTitle":"Image","icon":"image","href":"/components/image"},{"title":"Link","sidebarTitle":"Link","icon":"link","href":"/components/link"},{"title":"Markdown","sidebarTitle":"Markdown","icon":"file-code","href":"/components/markdown"},{"title":"Preview","sidebarTitle":"Preview","icon":"input-text","href":"/components/preview"},{"title":"Section","sidebarTitle":"Section","icon":"rectangles-mixed","href":"/components/section"},{"title":"Tailwind","sidebarTitle":"Tailwind","icon":"wind","href":"/components/tailwind"},{"title":"Text","sidebarTitle":"Text","icon":"text-size","href":"/components/text"}]},{"group":"Utilities","pages":[{"title":"Render","sidebarTitle":"Render","href":"/utilities/render"}]},{"group":"Integrations","pages":[{"title":"Overview","sidebarTitle":"Overview","href":"/integrations/overview"},{"title":"Send email using Resend","sidebarTitle":"Resend","href":"/integrations/resend"},{"title":"Send (\u0026 receive) emails using Inbound","sidebarTitle":"Inbound","href":"/integrations/inbound"},{"title":"Send email using Nodemailer","sidebarTitle":"Nodemailer","href":"/integrations/nodemailer"},{"title":"Send email using Mailgun","sidebarTitle":"Mailgun","href":"/integrations/mailgun"},{"title":"Send email using SendGrid","sidebarTitle":"SendGrid","href":"/integrations/sendgrid"},{"title":"Send email using Postmark","sidebarTitle":"Postmark","href":"/integrations/postmark"},{"title":"Send email using AWS SES","sidebarTitle":"AWS SES","href":"/integrations/aws-ses"},{"title":"Send email using Azure Communication Email","sidebarTitle":"Azure Communication Email","href":"/integrations/azure-communication-email"},{"title":"Send email using MailerSend","sidebarTitle":"MailerSend","href":"/integrations/mailersend"},{"title":"Send email using Scaleway Transactional Email","sidebarTitle":"Scaleway","href":"/integrations/scaleway"},{"title":"Send email using Plunk","sidebarTitle":"Plunk","href":"/integrations/plunk"},{"title":"Send email using Lettermint","sidebarTitle":"Lettermint","href":"/integrations/lettermint"},{"title":"Send email using eusend","sidebarTitle":"eusend","href":"/integrations/eusend"},{"title":"Send email using Brevo","sidebarTitle":"Brevo","href":"/integrations/brevo"},{"title":"Send email using Mailtrap","sidebarTitle":"Mailtrap","href":"/integrations/mailtrap"},{"title":"Send email using ZeptoMail","sidebarTitle":"ZeptoMail","href":"/integrations/zeptomail"},{"title":"Send email using Mailchimp Transactional","sidebarTitle":"Mailchimp Transactional","href":"/integrations/mailchimp-transactional"}]},{"group":"Contributing","pages":[{"title":"Getting Started","sidebarTitle":"Getting Started","icon":"hand-wave","href":"/contributing/introduction"},{"title":"Opening issues","sidebarTitle":"Opening issues","icon":"scroll","href":"/contributing/opening-issues"},{"title":"Opening pull requests","sidebarTitle":"Opening pull requests","icon":"code-pull-request","href":"/contributing/opening-pull-requests"},{"title":"Codebase overview","sidebarTitle":"Codebase overview","icon":"folder-tree","href":"/contributing/codebase-overview"},{"group":"Development workflow","icon":"arrow-progress","pages":[{"title":"Setup","sidebarTitle":"1. Setup","href":"/contributing/development-workflow/1-setup"},{"title":"Running tests","sidebarTitle":"2. Running tests","href":"/contributing/development-workflow/2-running-tests"},{"title":"Linting","sidebarTitle":"3. Linting","href":"/contributing/development-workflow/3-linting"},{"title":"Building","sidebarTitle":"4. Building","href":"/contributing/development-workflow/4-building"},{"title":"Writing docs","sidebarTitle":"5. Writing docs","href":"/contributing/development-workflow/5-writing-docs"},{"title":"Editing the components","sidebarTitle":"6. Editing the components","href":"/contributing/development-workflow/6-editing-the-components"}]}]}]},{"tab":"Editor","icon":"pen-to-square","pages":[{"title":"Editor","href":"/editor/overview"}]}]},"title":"Column - React Email","buildId":"dpl_BvXubCjoPYfvfFiCP5WgKvGYUZ9k","deploymentId":"dpl_BvXubCjoPYfvfFiCP5WgKvGYUZ9k","dynamics":["a74be98ba7"],"chunks":["zoom-image-lightbox-kIzybAsE.js","lightbox-handle-r17bVUz3.js"]}