{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"Metabind","description":"Interactive UI for AI agents. Metabind generates and hosts the MCP server your agent calls, so it answers with your UI components in Claude, ChatGPT, every MCP host, and natively in your own iOS, Android, and web apps.","colors":{"primary":"#2D63B0","light":"#2D63B0","dark":"#1871EF"},"logo":{"light":"https://mintcdn.com/yapstudios/xYhmasz4cNXh66jZ/images/metabind-glyph-light.svg?fit=max\u0026auto=format\u0026n=xYhmasz4cNXh66jZ\u0026q=85\u0026s=2339ea2f59ccb981c5e92d7fe4898f18","dark":"https://mintcdn.com/yapstudios/xYhmasz4cNXh66jZ/images/metabind-glyph-dark.svg?fit=max\u0026auto=format\u0026n=xYhmasz4cNXh66jZ\u0026q=85\u0026s=4d16639fe8677e21844e686d13799104"},"favicon":"https://mintcdn.com/yapstudios/FlEOV_oIYxLzJ6Ey/images/favicon/metabind-favicon-32x32.png?fit=max\u0026auto=format\u0026n=FlEOV_oIYxLzJ6Ey\u0026q=85\u0026s=18b3a5cef08b7486f2e6cdcdcac9cb07","navbar":{"links":[{"href":"mailto:support@metabind.ai","label":"Support"}],"primary":{"type":"button","label":"Metabind","href":"https://metabind.ai"}},"seo":{"metatags":{"canonical":"https://docs.metabind.ai","og:site_name":"Metabind Documentation","og:type":"website","twitter:card":"summary_large_image"},"indexing":"all"},"integrations":{"ga4":{"measurementId":"G-2QLKBYX358"}},"contextual":{"options":["copy","view","chatgpt","claude","perplexity","mcp","cursor","vscode"],"display":"header"},"styling":{"latex":false},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"yapstudios","hasAudioNarration":false,"actualSubdomain":"yapstudios","customDomains":["docs.metabind.ai"],"gitSource":{"type":"github","owner":"metabindai","repo":"metabind-cms","deployBranch":"develop","contentDirectory":"docs","isPrivate":true,"mountPath":"","label":""},"entitlements":{},"buildId":"6ad775bb7cab0ec526251e82","clientVersion":"0.0.4111","searchFilterCounts":[{"language":"default","tag":"REST API","count":131},{"language":"default","tag":"BindJS","count":94},{"language":"default","tag":"Content","count":69},{"language":"default","tag":"Guides","count":41},{"language":"default","tag":"Components","count":23},{"language":"default","tag":"Modifiers","count":21},{"language":"default","tag":"Types","count":14},{"language":"default","tag":"Modifiers — iOS Extensions","count":13},{"language":"default","tag":"Hooks and Globals","count":12},{"language":"default","tag":"Content Types","count":12}]},"assistantConfig":{"enableAskAiButton":false,"enableStarterQuestions":false,"enableAskAiSearchBar":true},"basePath":"","hasChatPermissions":false,"hasWebMcpPermissions":false,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-rbac-roles","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":"rbac-expansion","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":"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":"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":"editor-metadata","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},{"name":"turbopuffer-serve","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"live-agents","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"googleFontsInlined":false},"customCss":[],"page":{"pagePath":"bindjs/styles/Material","slug":"/bindjs/styles/Material","pageMetadata":{"title":"Material","description":"A translucent blur effect similar to frosted glass, used for backgrounds that blend with content behind them.","href":"/bindjs/styles/Material"},"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: \"A translucent blur effect similar to frosted glass, used for backgrounds that blend with content behind them.\"\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];const PlatformStatuses=({statuses})=>{const{Card,Columns}=_provideComponents()||{};if(!Card)_missingMdxReference(`Card`,true);if(!Columns)_missingMdxReference(`Columns`,true);const StatusBadge=({status,label})=>{const styles={green:{backgroundColor:`#dcfce7`,color:`#166534`},orange:{backgroundColor:`#fed7aa`,color:`#9a3412`},red:{backgroundColor:`#fecaca`,color:`#991b1b`},gray:{backgroundColor:`#f3f4f6`,color:`#4b5563`}};const baseStyle={display:`inline-flex`,alignItems:`center`,padding:`0.125rem 0.625rem`,borderRadius:`9999px`,fontSize:`0.875rem`,fontWeight:`500`};const colorStyle=styles[status]||styles.green;return _jsx(`span`,{style:{...baseStyle,...colorStyle},children:label||status})};const STATUS_CONFIG={supported:{label:`Supported`,color:`green`},partial:{label:`Partial`,color:`orange`},\"not-implemented\":{label:`Not Implemented`,color:`gray`}};const renderCard=(platform,value)=>{if(!value)return null;const{status,note}=typeof value===`string`?{status:value}:value;const config=STATUS_CONFIG[status];if(!config)return null;const titleMap={ios:`SwiftUI`,android:`Jetpack Compose`,web:`Web`};return _jsxs(Card,{title:titleMap[platform]||platform,children:[_jsx(StatusBadge,{status:config.color,label:config.label}),note\u0026\u0026_jsx(`div`,{style:{marginTop:`0.5rem`,fontSize:`0.875rem`,color:`#6b7280`},children:note})]},platform)};if(statuses==null){return null}return _jsx(Columns,{cols:`3`,children:Object.entries(statuses).map(([platform,value])=>renderCard(platform,value))})};const ComposeJS=({code,name,height})=>{let encodedCode=``;if(code){try{encodedCode=btoa(code)}catch(e){console.error(`Failed to encode code`,e)}}if(!encodedCode){return null}return _jsx(`iframe`,{src:`https://www.metabind.ai/embed?code=${encodeURIComponent(encodedCode)}\u0026name=${encodeURIComponent(name??`Example`)}`,loading:`lazy`,style:{width:`100%`,height:height||`350px`,border:`1px solid #e5e7eb`,borderRadius:`var(--rounded-2xl,1rem)`,overflow:`hidden`},title:`BindJS Preview`})};const previewCode=`ZStack([\n LinearGradient({\n colors: [Color(\"blue\"), Color(\"purple\")]\n })\n .frame({ width: 240, height: 140 }),\n Text(\"Over a blurred background\")\n .padding(16)\n .background(Material(\"thin\"))\n .cornerRadius(12)\n])\n`;function _createMdxContent(props){const _components={code:`code`,p:`p`,pre:`pre`,span:`span`,..._provideComponents(),...props.components},{CodeBlock,Expandable,Heading,ParamField,_MdxComponentBoundary}=_components;if(!CodeBlock)_missingMdxReference(`CodeBlock`,true);if(!Expandable)_missingMdxReference(`Expandable`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!ParamField)_missingMdxReference(`ParamField`,true);if(!_MdxComponentBoundary)_missingMdxReference(`_MdxComponentBoundary`,true);return _jsxs(_Fragment,{children:[_jsx(_MdxComponentBoundary,{name:`ComposeJS`,children:_jsx(ComposeJS,{code:previewCode,name:`Material`,height:`220px`})}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`1`,language:`typescript`,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:`typescript`,children:_jsxs(_components.code,{language:`typescript`,numberOfLines:`1`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`Material`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`props`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`?:`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` MaterialProps`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`): `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`Material`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`;`})]}),`\n`]})})}),`\n`,_jsxs(ParamField,{path:`props`,type:`MaterialProps`,optional:true,id:`param-props`,children:[_jsx(_components.p,{children:`Material configuration. Can be a material type string or a configuration object.`}),_jsxs(Expandable,{title:`Material type strings`,children:[_jsx(ParamField,{path:`ultraThin`,type:`string`,id:`param-ultra-thin`,children:_jsx(_components.p,{children:`Most transparent material. Barely visible blur.`})}),_jsx(ParamField,{path:`thin`,type:`string`,id:`param-thin`,children:_jsx(_components.p,{children:`Subtle blur effect.`})}),_jsx(ParamField,{path:`regular`,type:`string`,id:`param-regular`,children:_jsx(_components.p,{children:`Balanced blur effect. This is the default on web.`})}),_jsx(ParamField,{path:`thick`,type:`string`,id:`param-thick`,children:_jsx(_components.p,{children:`More prominent blur effect.`})}),_jsx(ParamField,{path:`bar`,type:`string`,id:`param-bar`,children:_jsx(_components.p,{children:`Material for toolbar and navigation bar backgrounds.`})}),_jsx(ParamField,{path:`chrome`,type:`string`,id:`param-chrome`,children:_jsx(_components.p,{children:`Material for menus and popups.`})})]}),_jsxs(Expandable,{title:`Configuration object`,children:[_jsx(ParamField,{path:`type`,type:`MaterialType`,required:true,id:`param-type`,children:_jsx(_components.p,{children:`The material type string.`})}),_jsx(ParamField,{path:`opacity`,type:`number`,optional:true,id:`param-opacity`,children:_jsx(_components.p,{children:`Custom opacity for the material effect.`})}),_jsx(ParamField,{path:`blurRadius`,type:`number`,optional:true,id:`param-blur-radius`,children:_jsx(_components.p,{children:`Custom blur radius for the material effect.`})})]})]}),`\n`,_jsx(Heading,{level:`2`,id:`support`,children:`Support`}),`\n`,_jsx(_MdxComponentBoundary,{name:`PlatformStatuses`,children:_jsx(PlatformStatuses,{statuses:{ios:{status:`partial`,note:`bar, chrome, the configuration object, and Material() with no argument draw nothing`},android:`not-implemented`,web:{status:`partial`,note:`The configuration object is ignored when Material is a view or background, and opacity is never applied`}}})}),`\n`,_jsx(Heading,{level:`2`,id:`usage`,children:`Usage`}),`\n`,_jsx(Heading,{level:`3`,id:`as-a-standalone-view`,children:`As a standalone view`}),`\n`,_jsxs(_components.p,{children:[_jsx(_components.code,{children:`Material`}),` can be used directly as a view that fills its frame with a blur effect:`]}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`2`,language:`typescript`,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:`typescript`,children:_jsxs(_components.code,{language:`typescript`,numberOfLines:`2`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`Material`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`\"thin\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`)`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` .`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`frame`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`({ `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`width:`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:` 200`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`height:`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:` 200`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` })`})]}),`\n`]})})}),`\n`,_jsx(Heading,{level:`3`,id:`as-a-background`,children:`As a background`}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`4`,language:`typescript`,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:`typescript`,children:_jsxs(_components.code,{language:`typescript`,numberOfLines:`4`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`Text`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`\"Over blurred background\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`)`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` .`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`padding`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:`16`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`)`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` .`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`background`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`Material`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`\"thin\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`))`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` .`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`cornerRadius`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:`12`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`)`})]}),`\n`]})})}),`\n`,_jsx(Heading,{level:`3`,id:`material-types-comparison`,children:`Material types comparison`}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`6`,language:`typescript`,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:`typescript`,children:_jsxs(_components.code,{language:`typescript`,numberOfLines:`6`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`VStack`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`({ `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`spacing:`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:` 16`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` }, [`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:` Text`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`\"Ultra Thin\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`).`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`padding`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:`12`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`).`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`background`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`Material`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`\"ultraThin\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`)),`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:` Text`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`\"Thin\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`).`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`padding`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:`12`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`).`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`background`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`Material`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`\"thin\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`)),`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:` Text`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`\"Regular\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`).`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`padding`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:`12`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`).`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`background`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`Material`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`\"regular\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`)),`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:` Text`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`\"Thick\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`).`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`padding`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:`12`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`).`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`background`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`Material`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`\"thick\"`}),_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`]})})}),`\n`,_jsx(Heading,{level:`3`,id:`custom-configuration`,children:`Custom configuration`}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`5`,language:`typescript`,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:`typescript`,children:_jsxs(_components.code,{language:`typescript`,numberOfLines:`5`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`Material`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`({`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` type:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` \"regular\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` opacity:`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:` 0.8`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` blurRadius:`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:` 20`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`})`})}),`\n`]})})}),`\n`,_jsx(Heading,{level:`3`,id:`as-a-foreground-style`,children:`As a foreground style`}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`3`,language:`typescript`,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:`typescript`,children:_jsxs(_components.code,{language:`typescript`,numberOfLines:`3`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`Text`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`\"Frosted Text\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`)`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` .`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`font`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`\"largeTitle\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`)`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` .`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`foregroundStyle`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`Material`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`\"thin\"`}),_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{PlatformStatuses,ComposeJS,previewCode,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":"Material","description":"A translucent blur effect similar to frosted glass, used for backgrounds that blend with content behind them.","href":"/bindjs/styles/Material"}}},"mdxSourceWithNoJs":null,"noJsSplices":[[152,2383,")=>null;const ComposeJS=()=>null;const previewCode=undefined"]]},"mdxExtracts":{"tableOfContents":[{"title":"Support","slug":"support","depth":2,"children":[]},{"title":"Usage","slug":"usage","depth":2,"children":[{"title":"As a standalone view","slug":"as-a-standalone-view","depth":3,"children":[]},{"title":"As a background","slug":"as-a-background","depth":3,"children":[]},{"title":"Material types comparison","slug":"material-types-comparison","depth":3,"children":[]},{"title":"Custom configuration","slug":"custom-configuration","depth":3,"children":[]},{"title":"As a foreground style","slug":"as-a-foreground-style","depth":3,"children":[]}]}],"codeExamples":{}},"jsLinks":[],"subdomain":"yapstudios","siteName":"Metabind","title":"Material - Metabind","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-10-20T14:08:12.047Z","originalFileLocation":"bindjs/styles/Material.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=\"A translucent blur effect similar to frosted glass, used for backgrounds that blend with content behind them.\">\u003cmeta data-mint-head name=\"application-name\" content=\"Metabind\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/yapstudios/yVgw2tB-5z_EyYje/_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/yapstudios/yVgw2tB-5z_EyYje/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/yapstudios/yVgw2tB-5z_EyYje/_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/yapstudios/yVgw2tB-5z_EyYje/_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/yapstudios/yVgw2tB-5z_EyYje/_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/yapstudios/yVgw2tB-5z_EyYje/_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/yapstudios/yVgw2tB-5z_EyYje/_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/yapstudios/yVgw2tB-5z_EyYje/_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/yapstudios/yVgw2tB-5z_EyYje/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Material - Metabind\">\u003cmeta data-mint-head property=\"og:description\" content=\"A translucent blur effect similar to frosted glass, used for backgrounds that blend with content behind them.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Metabind Documentation\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.metabind.ai/bindjs/styles/Material\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://yapstudios.mintlify.site/_mintlify/api/og/v2?division=Styles\u0026amp;title=Material\u0026amp;description=A+translucent+blur+effect+similar+to+frosted+glass%2C+used+for+backgrounds+that+blend+with+content+behind+them.\u0026amp;theme=e54a6ecf5875019e63523f71\u0026amp;signature=014484a8084897ad3564792d67ff620c34e2e5ee9a439c7d6dac49b5b56acdc7\">\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=\"Material - Metabind\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"A translucent blur effect similar to frosted glass, used for backgrounds that blend with content behind them.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://yapstudios.mintlify.site/_mintlify/api/og/v2?division=Styles\u0026amp;title=Material\u0026amp;description=A+translucent+blur+effect+similar+to+frosted+glass%2C+used+for+backgrounds+that+blend+with+content+behind+them.\u0026amp;theme=e54a6ecf5875019e63523f71\u0026amp;signature=014484a8084897ad3564792d67ff620c34e2e5ee9a439c7d6dac49b5b56acdc7\">\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/yapstudios/yVgw2tB-5z_EyYje/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Metabind\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#2D63B0\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.metabind.ai/bindjs/styles/Material\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/bindjs/styles/Material.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.metabind.ai/#organization\",\"name\":\"Metabind\",\"url\":\"https://docs.metabind.ai\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/yapstudios/xYhmasz4cNXh66jZ/images/metabind-glyph-light.svg?fit=max\u0026auto=format\u0026n=xYhmasz4cNXh66jZ\u0026q=85\u0026s=2339ea2f59ccb981c5e92d7fe4898f18\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.metabind.ai#website\",\"name\":\"Metabind\",\"url\":\"https://docs.metabind.ai\",\"publisher\":{\"@id\":\"https://docs.metabind.ai/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.metabind.ai/bindjs/styles/Material#webpage\",\"url\":\"https://docs.metabind.ai/bindjs/styles/Material\",\"name\":\"Material\",\"description\":\"A translucent blur effect similar to frosted glass, used for backgrounds that blend with content behind them.\",\"dateModified\":\"2026-10-20T14:08:12.047Z\",\"isPartOf\":{\"@id\":\"https://docs.metabind.ai#website\"},\"breadcrumb\":{\"@id\":\"https://docs.metabind.ai/bindjs/styles/Material#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.metabind.ai/bindjs/styles/Material#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Styles\",\"item\":\"https://docs.metabind.ai/bindjs/styles/Color\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Material\",\"item\":\"https://docs.metabind.ai/bindjs/styles/Material\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.metabind.ai/bindjs/styles/Material#article\",\"headline\":\"Material\",\"name\":\"Material\",\"description\":\"A translucent blur effect similar to frosted glass, used for backgrounds that blend with content behind them.\",\"url\":\"https://docs.metabind.ai/bindjs/styles/Material\",\"mainEntityOfPage\":{\"@id\":\"https://docs.metabind.ai/bindjs/styles/Material#webpage\"},\"dateModified\":\"2026-10-20T14:08:12.047Z\",\"publisher\":{\"@id\":\"https://docs.metabind.ai/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.metabind.ai#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Metabind\",\"publisher\":{\"@type\":\"Organization\",\"name\":\"Metabind\"},\"provider\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","agentPointerHref":"/bindjs/styles/Material.md","siteName":"Metabind","nav":{"global":null,"tabs":[{"tab":"Guides","pages":[{"title":"Guides","href":"/guides/getting-started/overview"}]},{"tab":"BindJS","groups":[{"group":"Introduction","pages":[{"title":"What is BindJS","href":"/bindjs/introduction"},{"title":"Quickstart","href":"/bindjs/quickstart"}]},{"group":"Authoring","pages":[{"title":"Components and bodies","href":"/bindjs/authoring/components"},{"title":"Properties","href":"/bindjs/authoring/properties"},{"title":"Composition and slots","href":"/bindjs/authoring/composition"},{"title":"State and environment","href":"/bindjs/authoring/state"},{"title":"Hooks","href":"/bindjs/authoring/hooks"},{"title":"Modifiers","href":"/bindjs/authoring/modifiers"},{"title":"Talking to the MCP host","href":"/bindjs/authoring/mcp-host"}]},{"group":"Components","pages":[{"title":"Layout — Stacks","href":"/bindjs/components/layout-stacks"},{"title":"GeometryReader","href":"/bindjs/components/GeometryReader"},{"title":"Scrolling and lists","href":"/bindjs/components/scrolling-and-lists"},{"title":"Empty states and spacers","href":"/bindjs/components/empty-states-and-spacers"},{"title":"Text","href":"/bindjs/components/Text"},{"title":"Markdown","href":"/bindjs/components/Markdown"},{"title":"Text input","href":"/bindjs/components/text-input"},{"title":"Controls","href":"/bindjs/components/controls"},{"title":"Media","href":"/bindjs/components/media"},{"title":"Shapes","href":"/bindjs/components/shapes"},{"title":"CustomFont","href":"/bindjs/components/CustomFont"},{"title":"NavigationLink","href":"/bindjs/components/NavigationLink"},{"title":"Placeholder","href":"/bindjs/components/Placeholder"}]},{"group":"Components — iOS Extensions","pages":[{"title":"Layout — iOS extensions","href":"/bindjs/components/ios-layout"},{"title":"ContentUnavailableView","href":"/bindjs/components/ContentUnavailableView"},{"title":"NavigationStack","href":"/bindjs/components/NavigationStack"},{"title":"ToolbarItem","href":"/bindjs/components/ToolbarItem"},{"title":"ToolbarItemGroup","href":"/bindjs/components/ToolbarItemGroup"}]},{"group":"Components — Web Extensions","pages":[{"title":"Shader","href":"/bindjs/components/Shader"}]},{"group":"Modifiers","pages":[{"title":"Identity and lifecycle","href":"/bindjs/modifiers/identity-and-lifecycle"},{"title":"Layout — Frame and padding","href":"/bindjs/modifiers/layout-frame-and-padding"},{"title":"Layout — Sizing","href":"/bindjs/modifiers/layout-sizing"},{"title":"Transforms","href":"/bindjs/modifiers/transforms"},{"title":"Appearance — Color and style","href":"/bindjs/modifiers/appearance-color-and-style"},{"title":"Appearance — Effects","href":"/bindjs/modifiers/appearance-effects"},{"title":"Appearance — Type size and color scheme","href":"/bindjs/modifiers/appearance-type-size-and-color-scheme"},{"title":"Typography","href":"/bindjs/modifiers/typography"},{"title":"overlay","href":"/bindjs/modifiers/overlay"},{"title":"Clipping and masking","href":"/bindjs/modifiers/clipping-and-masking"},{"title":"ignoresSafeArea","href":"/bindjs/modifiers/ignoresSafeArea"},{"title":"Visibility and interaction","href":"/bindjs/modifiers/visibility-and-interaction"},{"title":"Gestures","href":"/bindjs/modifiers/gestures"},{"title":"Visual effects","href":"/bindjs/modifiers/visual-effects"},{"title":"contextMenu","href":"/bindjs/modifiers/contextMenu"},{"title":"Controls","href":"/bindjs/modifiers/controls"},{"title":"Text input","href":"/bindjs/modifiers/text-input"},{"title":"onChange","href":"/bindjs/modifiers/onChange"},{"title":"Accessibility","href":"/bindjs/modifiers/accessibility"},{"title":"transition","href":"/bindjs/modifiers/transition"},{"title":"environment","href":"/bindjs/modifiers/environment"}]},{"group":"Modifiers — iOS Extensions","pages":[{"title":"Presentation","href":"/bindjs/modifiers/presentation"},{"title":"Navigation chrome","href":"/bindjs/modifiers/navigation-chrome"},{"title":"Toolbar","href":"/bindjs/modifiers/toolbar"},{"title":"List chrome","href":"/bindjs/modifiers/list-chrome"},{"title":"Scroll chrome","href":"/bindjs/modifiers/scroll-chrome"},{"title":"Grid cells","href":"/bindjs/modifiers/grid-cells"},{"title":"safeAreaInset","href":"/bindjs/modifiers/safeAreaInset"},{"title":"contentShape","href":"/bindjs/modifiers/contentShape"},{"title":"glassEffect","href":"/bindjs/modifiers/glassEffect"},{"title":"sensoryFeedback","href":"/bindjs/modifiers/sensoryFeedback"},{"title":"Accessibility refinements","href":"/bindjs/modifiers/accessibility-refinements"},{"title":"Text refinements","href":"/bindjs/modifiers/text-refinements"},{"title":"previewName","href":"/bindjs/modifiers/previewName"}]},{"group":"Hooks and Globals","pages":[{"title":"defineComponent","href":"/bindjs/functions/defineComponent"},{"title":"defineButtonStyle","href":"/bindjs/functions/defineButtonStyle"},{"title":"useState","href":"/bindjs/functions/useState"},{"title":"useStore","href":"/bindjs/functions/useStore"},{"title":"useEnvironment","href":"/bindjs/functions/useEnvironment"},{"title":"useNavigate","href":"/bindjs/functions/useNavigate"},{"title":"useAction","href":"/bindjs/functions/useAction"},{"title":"getComponentData","href":"/bindjs/functions/getComponentData"},{"title":"OpenURLAction","href":"/bindjs/functions/OpenURLAction"},{"title":"withAnimation","href":"/bindjs/functions/withAnimation"},{"title":"animations","href":"/bindjs/functions/animations"},{"title":"Detent","href":"/bindjs/functions/Detent"}]},{"group":"Styles","pages":[{"title":"Color","description":"A color value that can be used as a standalone view or as a style for fills, foregrounds, and backgrounds.","href":"/bindjs/styles/Color"},{"title":"Material","href":"/bindjs/styles/Material"},{"title":"LinearGradient","description":"A gradient that transitions between colors along a straight line between two points.","href":"/bindjs/styles/LinearGradient"},{"title":"AngularGradient","href":"/bindjs/styles/AngularGradient"},{"title":"RadialGradient","href":"/bindjs/styles/RadialGradient"},{"title":"EllipticalGradient","href":"/bindjs/styles/EllipticalGradient"}]},{"group":"Types","pages":[{"title":"AccessibilityTraits","href":"/bindjs/types/AccessibilityTraits"},{"title":"Alignment","href":"/bindjs/types/Alignment"},{"title":"Axis","href":"/bindjs/types/Axis"},{"title":"BlendMode","href":"/bindjs/types/BlendMode"},{"title":"DynamicTypeSize","href":"/bindjs/types/DynamicTypeSize"},{"title":"Edge","href":"/bindjs/types/Edge"},{"title":"EdgeSet","href":"/bindjs/types/EdgeSet"},{"title":"FontDesign","href":"/bindjs/types/FontDesign"},{"title":"FontWeight","href":"/bindjs/types/FontWeight"},{"title":"FontWidth","href":"/bindjs/types/FontWidth"},{"title":"PickerStyle","href":"/bindjs/types/PickerStyle"},{"title":"TextStyle","href":"/bindjs/types/TextStyle"},{"title":"ToolbarItemPlacement","href":"/bindjs/types/ToolbarItemPlacement"},{"title":"UnitPoint","href":"/bindjs/types/UnitPoint"}]}]},{"tab":"CLI","pages":[{"title":"CLI","href":"/cli/overview"}]},{"tab":"REST API","pages":[{"title":"REST API","href":"/rest/introduction"}]},{"tab":"Content","pages":[{"title":"Content","href":"/content/overview"}]}]},"basePath":"","title":"Material - Metabind","buildId":"dpl_DqYu5MPb49gWBBbUGgpHQUmCHY3P","deploymentId":"dpl_DqYu5MPb49gWBBbUGgpHQUmCHY3P","dynamics":[],"chunks":[]}