Displays a shadcn/ui Alert component with customizable title and description
Opens a pricing modal when clicked
Highlights the user’s current subscription plan in the modal
Shows which one-time purchases have been made
Fully integrated with the i18n translation system
Responsive design that works on all screen sizes
{"docsConfig":{"$schema":"https://mintlify.com/docs.json","theme":"mint","name":"LaunchIt","colors":{"primary":"#023146","light":"#3f7d9a","dark":"#023146"},"favicon":"/favicon.png","logo":{"light":"https://mintcdn.com/launchit/Pu_3tCytCupS6A7V/logo/light.png?fit=max\u0026auto=format\u0026n=Pu_3tCytCupS6A7V\u0026q=85\u0026s=43c1a11fdec6e557744bc563da07aa4b","dark":"https://mintcdn.com/launchit/Pu_3tCytCupS6A7V/logo/dark.png?fit=max\u0026auto=format\u0026n=Pu_3tCytCupS6A7V\u0026q=85\u0026s=0e105d00b6b9f0d5bbc8180776e801eb"},"navbar":{"links":[{"label":"Support","href":"mailto:hi@mintlify.com"}],"primary":{"type":"button","label":"Dashboard","href":"https://dashboard.mintlify.com"}},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"launchit","hasAudioNarration":false,"actualSubdomain":"launchit","customDomains":["docs.getlaunch.it"],"gitSource":{"type":"github","owner":"lorenzpfei","repo":"saas-docs","deployBranch":"main","contentDirectory":"","isPrivate":true,"mountPath":"","label":""},"chroma":{"liveDeploymentHistoryId":"6a21e67c91916e8ce404ef14","collectionId":"8e0f88da-9c8e-44a9-b308-cd1f798c148d","schemaVersion":"v2"},"entitlements":{},"buildId":"6a21e67c91916e8ce404ef14:success","clientVersion":"0.0.4044","searchFilterCounts":[{"language":"default","tag":"Initial Setup","count":6},{"language":"default","tag":"Customization","count":5},{"language":"default","tag":"Marketing \u0026 Analytics","count":4},{"language":"default","tag":"Deployment","count":2},{"language":"default","tag":"Get Started","count":2},{"language":"default","tag":"SEO","count":2},{"language":"default","tag":"Utilities","count":2},{"language":"default","tag":"Legal","count":1}]},"assistantConfig":{},"basePath":"","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":"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":[],"page":{"pagePath":"utilities/components","slug":"/utilities/components","pageMetadata":{"title":"Helper Components","description":"Reusable UI components for common functionality","icon":"puzzle-piece","href":"/utilities/components"},"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: \"Reusable UI components for common functionality\"\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,Expandable,Heading,ResponseField}=_components;if(!CodeBlock)_missingMdxReference(`CodeBlock`,true);if(!Expandable)_missingMdxReference(`Expandable`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!ResponseField)_missingMdxReference(`ResponseField`,true);return _jsxs(_Fragment,{children:[_jsx(Heading,{level:`2`,id:`paywall-components`,children:`Paywall Components`}),`\n`,_jsxs(ResponseField,{name:`PaywallAlert`,type:`component`,id:`param-paywall-alert`,children:[_jsx(_components.p,{children:`A shadcn/ui alert component that displays subscription/purchase information and opens a pricing modal when clicked.`}),_jsxs(Expandable,{title:`Props`,children:[_jsx(ResponseField,{name:`title`,type:`string`,required:true,id:`param-title`,children:_jsx(_components.p,{children:`The title of the alert. Usually a translation key from the portal namespace.`})}),_jsx(ResponseField,{name:`description`,type:`string`,required:true,id:`param-description`,children:_jsx(_components.p,{children:`The description text shown in the alert. Usually a translation key from the portal namespace.`})}),_jsx(ResponseField,{name:`dialogDescription`,type:`string`,required:true,id:`param-dialog-description`,children:_jsx(_components.p,{children:`The description text shown in the pricing modal dialog. Usually a translation key from the portal namespace.`})}),_jsx(ResponseField,{name:`subscription`,type:`Subscription | null`,required:true,id:`param-subscription`,children:_jsx(_components.p,{children:`The user’s current subscription object. Used to highlight the current plan in the pricing modal.`})}),_jsx(ResponseField,{name:`purchases`,type:`Purchase[]`,required:true,id:`param-purchases`,children:_jsx(_components.p,{children:`Array of the user’s purchases. Used to show which one-time purchases have been made.`})}),_jsx(ResponseField,{name:`user`,type:`User`,required:true,id:`param-user`,children:_jsx(_components.p,{children:`The current user object. Used for displaying user-specific information in the pricing modal.`})})]}),_jsx(Expandable,{title:`Example`,children:_jsx(CodeBlock,{filename:``,numberOfLines:`8`,language:`tsx`,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:`tsx`,children:_jsxs(_components.code,{language:`tsx`,numberOfLines:`8`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#808080`},children:`\u003c`}),_jsx(_components.span,{style:{color:`#116329`,\"--shiki-dark\":`#4EC9B0`},children:`PaywallAlert`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#9CDCFE`},children:` title`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`=`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`{`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`tPortal`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`'noPlan.alert.title'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`)`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`}`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#9CDCFE`},children:` description`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`=`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`{`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`tPortal`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`'noPlan.alert.description'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`)`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`}`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#9CDCFE`},children:` dialogDescription`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`=`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`{`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`tPortal`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`'noPlan.alert.dialogDescription'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`)`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`}`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#9CDCFE`},children:` subscription`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`=`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`{`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`subscription`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`}`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#9CDCFE`},children:` purchases`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`=`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`{`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`[]`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`}`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#9CDCFE`},children:` user`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`=`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`{`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`user`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`}`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#808080`},children:`/>`})}),`\n`]})})})}),_jsx(Expandable,{title:`Features`,children:_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:`Displays a shadcn/ui Alert component with customizable title and description`}),`\n`,_jsx(_components.li,{children:`Opens a pricing modal when clicked`}),`\n`,_jsx(_components.li,{children:`Highlights the user’s current subscription plan in the modal`}),`\n`,_jsx(_components.li,{children:`Shows which one-time purchases have been made`}),`\n`,_jsx(_components.li,{children:`Fully integrated with the i18n translation system`}),`\n`,_jsx(_components.li,{children:`Responsive design that works on all screen sizes`}),`\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":"Helper Components","description":"Reusable UI components for common functionality","icon":"puzzle-piece","href":"/utilities/components"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Paywall Components","slug":"paywall-components","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"subdomain":"launchit","siteName":"LaunchIt","title":"Helper Components - LaunchIt","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-01-07T05:47:39.745Z","originalFileLocation":"utilities/components.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=\"Reusable UI components for common functionality\">\u003cmeta data-mint-head name=\"application-name\" content=\"LaunchIt\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/launchit/DR_Y2MQ8eClFgq5X/_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/launchit/DR_Y2MQ8eClFgq5X/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/launchit/DR_Y2MQ8eClFgq5X/_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/launchit/DR_Y2MQ8eClFgq5X/_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/launchit/DR_Y2MQ8eClFgq5X/_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/launchit/DR_Y2MQ8eClFgq5X/_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/launchit/DR_Y2MQ8eClFgq5X/_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/launchit/DR_Y2MQ8eClFgq5X/_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/launchit/DR_Y2MQ8eClFgq5X/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Helper Components - LaunchIt\">\u003cmeta data-mint-head property=\"og:description\" content=\"Reusable UI components for common functionality\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"LaunchIt\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.getlaunch.it/utilities/components\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://launchit.mintlify.app/_mintlify/api/og/v2?division=Utilities\u0026amp;title=Helper+Components\u0026amp;description=Reusable+UI+components+for+common+functionality\u0026amp;theme=7b79389a487e14b0646fac53\u0026amp;signature=0a39868628877538058e3d523a63f0e8025a48e075b00350a1431a4b725812a9\">\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=\"Helper Components - LaunchIt\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Reusable UI components for common functionality\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://launchit.mintlify.app/_mintlify/api/og/v2?division=Utilities\u0026amp;title=Helper+Components\u0026amp;description=Reusable+UI+components+for+common+functionality\u0026amp;theme=7b79389a487e14b0646fac53\u0026amp;signature=0a39868628877538058e3d523a63f0e8025a48e075b00350a1431a4b725812a9\">\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/launchit/DR_Y2MQ8eClFgq5X/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"LaunchIt\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#023146\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.getlaunch.it/utilities/components\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/utilities/components.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.getlaunch.it/#organization\",\"name\":\"LaunchIt\",\"url\":\"https://docs.getlaunch.it\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/launchit/Pu_3tCytCupS6A7V/logo/light.png?fit=max\u0026auto=format\u0026n=Pu_3tCytCupS6A7V\u0026q=85\u0026s=43c1a11fdec6e557744bc563da07aa4b\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.getlaunch.it#website\",\"name\":\"LaunchIt\",\"url\":\"https://docs.getlaunch.it\",\"publisher\":{\"@id\":\"https://docs.getlaunch.it/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.getlaunch.it/utilities/components#webpage\",\"url\":\"https://docs.getlaunch.it/utilities/components\",\"name\":\"Helper Components\",\"description\":\"Reusable UI components for common functionality\",\"dateModified\":\"2026-01-07T05:47:39.745Z\",\"isPartOf\":{\"@id\":\"https://docs.getlaunch.it#website\"},\"breadcrumb\":{\"@id\":\"https://docs.getlaunch.it/utilities/components#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.getlaunch.it/utilities/components#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Utilities\",\"item\":\"https://docs.getlaunch.it/utilities/helpers\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Helper Components\",\"item\":\"https://docs.getlaunch.it/utilities/components\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.getlaunch.it/utilities/components#article\",\"headline\":\"Helper Components\",\"name\":\"Helper Components\",\"description\":\"Reusable UI components for common functionality\",\"url\":\"https://docs.getlaunch.it/utilities/components\",\"mainEntityOfPage\":{\"@id\":\"https://docs.getlaunch.it/utilities/components#webpage\"},\"dateModified\":\"2026-01-07T05:47:39.745Z\",\"publisher\":{\"@id\":\"https://docs.getlaunch.it/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.getlaunch.it#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"LaunchIt\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"LaunchIt","nav":{"global":null,"groups":[{"group":"Get Started","pages":[{"title":"Introduction","icon":"book","href":"/introduction"},{"title":"Installation","icon":"download","href":"/installation"}]},{"group":"Initial Setup","pages":[{"title":"Basic","icon":"key","href":"/initial-setup/setup"},{"title":"Email","icon":"envelope","href":"/initial-setup/email"},{"title":"Supabase","icon":"database","href":"/initial-setup/supabase"},{"title":"Stripe","icon":"money-bill","href":"/initial-setup/stripe"},{"title":"Additional","icon":"ellipsis","href":"/initial-setup/additional"},{"title":"Configuration","icon":"sliders","href":"/initial-setup/configuration"}]},{"group":"Customization","pages":[{"title":"Internationalization (i18n)","icon":"language","href":"/essentials/i18n"},{"title":"i18n - Routing","icon":"route","href":"/essentials/i18n-routing"},{"title":"Styling","icon":"palette","href":"/essentials/styling"},{"title":"Cookies","icon":"cookie-bite","href":"/essentials/cookies"},{"title":"Code Quality","icon":"code-merge","href":"/essentials/code-quality"}]},{"group":"Utilities","pages":[{"title":"Helper Functions","description":"Essential utility functions for URL handling, logging, and purchase management","icon":"wrench","href":"/utilities/helpers"},{"title":"Helper Components","icon":"puzzle-piece","href":"/utilities/components"}]},{"group":"Legal","pages":[{"title":"Legal","description":"Generate a Terms of Service page","icon":"gavel","href":"/legal/legal"}]},{"group":"Marketing \u0026 Analytics","pages":[{"title":"Google Analytics","icon":"google","href":"/analytics/google-analytics"},{"title":"Google Tag Manager","icon":"google","href":"/analytics/google-tag-manager"},{"title":"Plausible","icon":"chart-mixed","href":"/analytics/plausible"},{"title":"PostHog","icon":"chart-scatter","href":"/analytics/posthog"}]},{"group":"SEO","pages":[{"title":"Sitemap \u0026 Robots","icon":"sitemap","href":"/seo/sitemap"},{"title":"Blog","icon":"newspaper","href":"/seo/blog"}]},{"group":"Deployment","pages":[{"title":"Deployment - Supabase","icon":"rocket","href":"/deployment/supabase"},{"title":"Deployment - App","icon":"rocket","href":"/deployment/app"}]}]},"basePath":"","title":"Helper Components - LaunchIt","buildId":"dpl_DeHjVRGfFnhYQwHnfC2pjeXXv8h9","deploymentId":"dpl_DeHjVRGfFnhYQwHnfC2pjeXXv8h9","dynamics":[],"chunks":[]}