Box UI Elements are pre-built UI components that allow developers to add
elements of the main Box web application into their own applications. They can
be used to navigate through, upload, preview, and select content stored on Box
and are available both as React components and framework-agnostic JavaScript
libraries.
Box offers several UI Elements to create common user experiences with files and
folders in an application.The available UI Elements are:
- Allow users to search and browse through files and folders. It also has a metadata query based view that supports items sorting, filtering, custom columns, and more.
- Allow users to open content stored in Box with a partner application using an embedded dropdown.
We no longer support the OpenWith UI element for any new customers as of December 21, 2021.
- Allow users to select files or folders from their Box account.
- Display interactive viewers for documents, images, audio, video, and more.
- Display a sidebar for file metadata and activity feed information.
- Allow users to upload files by selecting or using drag-and-drop.
UI Elements can be used in isolation or joined together to construct common user
flows with content, such as uploading and then viewing a file.
Last modified on September 4, 2026
Was this page helpful?
{"docsConfig":{"theme":"aspen","$schema":"https://mintlify.com/docs.json","name":"Box Dev Docs","description":"Box for Developers: guides, API reference, SDKs, and tutorials for building content management, Box AI, and enterprise integrations.","colors":{"primary":"#0061d5","light":"#f6fafd","dark":"#002947"},"logo":{"light":"https://mintcdn.com/box/lJLw9z7FWORNWMcq/logo/boxdev-light.png?fit=max\u0026auto=format\u0026n=lJLw9z7FWORNWMcq\u0026q=85\u0026s=a11710b698ff59d24426f9ecec6c7e9c","dark":"https://mintcdn.com/box/siVVIgx7pBuvW4ua/logo/boxdev-dark.svg?fit=max\u0026auto=format\u0026n=siVVIgx7pBuvW4ua\u0026q=85\u0026s=0e34af393abb1b8c024258d684bb7732"},"favicon":"https://mintcdn.com/box/T2hwpVFBJMA4eeDs/favicon.ico?fit=max\u0026auto=format\u0026n=T2hwpVFBJMA4eeDs\u0026q=85\u0026s=2a2efcc60e46eca7ee3ebbe650c47350","api":{"examples":{"languages":["curl","python","node","swift","java",".Net"],"autogenerate":false}},"seo":{"metatags":{"google-site-verification":"fuelbNhVR1kQluNBJjYt4K1Hj5HvJLhLnIq0o9CAY9E"}},"fonts":{"family":"Inter"},"contextual":{"options":[{"title":"Install Box Agent Skills","description":"Add Box plugins to your AI assistants","icon":"sparkles","href":"/ai/agent-skills"},"cursor","vscode","mcp","chatgpt","claude","perplexity","copy","view"],"display":"header"},"metadata":{"timestamp":true},"styling":{"latex":false},"navigation":{"languages":[{"language":"en","banner":{"content":"Join BoxWorks Dev Summit on Nov 5-6, San Francisco and dive into AI agents and unstructured content. [See agenda](https://boxworks.box.com/series/boxworks-2026-dev-summit/landing_page).","dismissible":true},"footer":{"socials":{"x":"https://x.com/box","github":"https://github.com/box-community","linkedin":"https://linkedin.com/company/box","youtube":"https://www.youtube.com/user/box","facebook":"https://www.facebook.com/box"},"links":[{"header":"Resources","items":[{"label":"Newsletter unsubscribe","href":"https://go.box.com/preferences.html"},{"label":"Terms of Use","href":"https://cloud.app.box.com/s/rmwxu64h1ipr41u49w3bbuvbsa29wku9"},{"label":"Privacy Policy","href":"https://www.box.com/en-gb/legal/privacypolicy?url_redirect=direct"},{"label":"Cookie Notification","href":"https://www.box.com/en-gb/legal/cookie-notification?url_redirect=direct"},{"label":"llms.txt","href":"https://developer.box.com/llms.txt"}]}]},"navbar":{"links":[{"href":"https://account.box.com/developers/console","label":"Log in","type":"button"}],"primary":{"type":"button","label":"Get started for free","href":"https://account.box.com/signup/developer"}},"href":""},{"language":"ja","banner":{"content":"Join live webinar on Sept 29: See how to give agents a computer and enterprise content to work on with Box and Daytona. [Register now](https://events.zoom.us/ev/Amkp36LSSk_TxOQbBytoLoHa_Ztg7quKlJv2u74NRvSZJtlnbG5L~AqO7fnFo-ePaTqEcPrKs4jSfhxq3pMVK52ut69Q2zfn9jOr70vx5DQVJaeNF1dDZE9_0N33jMcY1yE9LoHDL5Oamqg).","dismissible":true},"footer":{"socials":{"x":"https://x.com/box","github":"https://github.com/box-community","linkedin":"https://linkedin.com/company/box","youtube":"https://www.youtube.com/user/box","facebook":"https://www.facebook.com/box"},"links":[{"header":"リソース","items":[{"label":"ニュースレターの登録解除","href":"https://go.box.com/preferences.html"},{"label":"利用規約","href":"https://cloud.app.box.com/s/rmwxu64h1ipr41u49w3bbuvbsa29wku9"},{"label":"個人情報保護方針","href":"https://www.box.com/en-gb/legal/privacypolicy?url_redirect=direct"},{"label":"Cookieに関する通知","href":"https://www.box.com/en-gb/legal/cookie-notification?url_redirect=direct"},{"label":"llms.txt","href":"https://developer.box.com/llms.txt"}]}]},"navbar":{"links":[{"href":"https://account.box.com/developers/console","label":"ログイン","type":"button"}],"primary":{"type":"button","label":"今すぐ無料で開始","href":"https://account.box.com/signup/developer"}},"href":"ja"}]}},"deployment":{"deploymentMetadataValue":{"subdomain":"box","hasAudioNarration":false,"actualSubdomain":"box","customDomains":["developer.box.com"],"gitSource":{"type":"github","owner":"box","repo":"box-mintlify","deployBranch":"main","contentDirectory":"","isPrivate":true,"mountPath":"","label":""},"chroma":{"liveDeploymentHistoryId":"6ada2510a23ba420c330bb28","collectionId":"6d1989e3-75f1-4ca5-8941-b458e74180af","schemaVersion":"v3","latestBuiltDeploymentHistoryId":"6ada2510a23ba420c330bb28"},"feedback":{"thumbs":true,"issues":false},"entitlements":{"AI_CHAT":{"status":"ENABLED"},"REMOVE_BRANDING":{"status":"ENABLED"},"CONTEXTUAL_FEEDBACK":{"status":"ENABLED"},"CODE_SNIPPET_FEEDBACK":{"status":"ENABLED"},"WEB_MCP":{"status":"ENABLED"},"NARRATION":{"status":"ENABLED"}},"buildId":"6ada2510a23ba420c330bb28","clientVersion":"0.0.3966","searchFilterCounts":[{"language":"en","tag":"API reference","count":641},{"language":"ja","tag":"ホーム","count":368},{"language":"ja","tag":"APIリファレンス","count":339},{"language":"en","tag":"Home","count":302},{"language":"ja","tag":"AI","count":187},{"language":"en","tag":"AI","count":173},{"language":"ja","tag":"コラボレーション","count":81},{"language":"ja","tag":"ツール","count":76},{"language":"ja","tag":"開発ツール","count":76},{"language":"ja","tag":"メタデータと検索","count":67},{"language":"en","tag":"Tools","count":62},{"language":"en","tag":"Dev tools","count":62},{"language":"ja","tag":"コンテンツ","count":58},{"language":"en","tag":"Metadata \u0026 search","count":56},{"language":"en","tag":"Collaboration","count":50},{"language":"en","tag":"Content","count":49},{"language":"ja","tag":"メタデータ","count":49},{"language":"en","tag":"Supported AI models","count":46},{"language":"ja","tag":"サポートされているAIモデル","count":44},{"language":"en","tag":"Metadata","count":41}]},"assistantConfig":{"enableAskAiButton":false,"enableAskAiSearchBar":true},"hasChatPermissions":true,"hasWebMcpPermissions":true,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-v7-file-tree","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"pause-universal-search-reconcile","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"per-site-search-delta","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-private-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-nav-generations","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"byok-sep-25","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"vite-origin","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-agent-model-picker","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-updated-9-15","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"isAtlas":false,"googleFontsInlined":false},"customCss":[{"filePath":"styles.css","content":"a code{border-bottom-color:none!important}.prose :where(a code):not(:where([class~=\"not-prose\"], [class~=\"not-prose\"] *)){color:inherit;font-weight:inherit;text-decoration:none;text-decoration-color:rgb(var(--primary));text-underline-offset:0;text-decoration-thickness:1px}#consent_blackbar{position:relative;z-index:9999999!important}#sidebar,.left-0.right-0.sticky.sm\\:px-4.pb-4.sm\\:pb-6.bottom-0.pt-1.flex.flex-col.items-center.w-full.overflow-hidden.z-20{z-index:1}#footer>div,#sidebar-content{z-index:0}a.nav-anchor img[src$=\"/images/sidebar/box.svg\"]{background-color:transparent!important}#truste-consent-track{z-index:9999999!important;position:fixed!important}.dark #truste-consent-track{background-color:#151f26!important;border-color:#1a1a1a}.dark #truste-show-consent{background-color:#fff;color:#151f26}.dark #truste-consent-text{color:#fff}#truste-consent-content{max-width:1400px}.homepage_container .card img{max-height:200px}.homepage_container h1 span,.homepage_container h2 span{margin:auto}#navbar .max-w-8xl.mx-auto.relative button .ml-4.flex.text-sm.leading-6.whitespace-nowrap.min-w-0.space-x-3.overflow-hidden,header#header .eyebrow{display:none!important}.sidebar-group-header:has(+.sidebar-group>li:is(\n [id=\"/reference\"],\n [id=\"/ja/reference\"],\n [id=\"/ja/reference/v2025.0\"],\n [id=\"/ja/reference/v2026.0\"]\n))>.sidebar-title{display:none}footer div.flex.gap-4.flex-col.md\\:flex-row.md\\:items-center.md\\:gap-8.md\\:justify-center{flex-wrap:wrap}footer div.flex.gap-4.flex-col.md\\:flex-row.md\\:items-center.md\\:gap-8.md\\:justify-center a{white-space:nowrap;text-overflow:clip;overflow:visible;align-self:start;flex-shrink:0;cursor:pointer!important}#google-preferred-source-column{display:flex;flex-direction:column;align-items:flex-end;flex:0 0 auto;width:max-content;max-width:100%}#google-preferred-source{display:flex;justify-content:flex-end;width:auto;margin:0;padding-top:16px}.google-preferred-source-button{appearance:none;margin:0;padding:0;border:0;background:0 0;line-height:0;cursor:pointer}.google-preferred-source-badge{display:block;width:140px;max-width:100%;height:auto}.dark .google-preferred-source-badge--light,.google-preferred-source-badge--dark{display:none}.dark .google-preferred-source-badge--dark{display:block}.nav-logo{min-width:109px}.badge-guide,.badge-quickstart,.badge-tutorial,.dark .badge-guide,.dark .badge-quickstart,.dark .badge-tutorial{background-color:#1f2937;color:#fff}.badge-get{background-color:rgb(74 222 128/.2);color:#15803d}.dark .badge-get{color:#4ade80}.badge-post{background-color:rgb(96 165 250/.2);color:#1d4ed8}.dark .badge-post{color:#60a5fa}.badge-patch,.badge-put{background-color:rgb(250 204 21/.2);color:#a16207}.dark .badge-patch,.dark .badge-put{color:#facc15}.badge-delete{background-color:rgb(248 113 113/.2);color:#b91c1c}.dark .badge-delete{color:#f87171}.badge-api{background-color:#e3f2fd;color:#0d47a1}.dark .badge-api{background-color:#0d47a1;color:#bbdefb}.badge-documentation,.badge-reference,.dark .badge-documentation,.dark .badge-reference{background-color:#000;color:#fff}.badge-default{background-color:#f5f5f5;color:#424242}.badge-group{display:inline-flex;gap:.5rem;flex-wrap:wrap}.dark .badge-default{background-color:#424242;color:#e0e0e0}.update>div:first-child>div:nth-child(3){padding:0;order:4}.update>div:first-child>div:nth-child(3)>span{display:flex;padding:.25rem .75rem;align-items:center;border-radius:9999px;font-size:.875rem;line-height:1.25rem;color:#374151;background-color:#f3f4f6}.dark .update>div:first-child>div:nth-child(3)>span{color:#cecece;background-color:#161616}.update>div:first-child>div:nth-child(4){order:3}div#banner a{text-decoration:none!important;color:#fff;font-weight:600}nav ul #topbar-cta-button a span,nav ul .navbar-link a{border-radius:50px!important}nav ul #topbar-cta-button a span{background-color:#0061d5}#topbar-cta-button a:hover span{opacity:1!important;background-color:#146bd5}.dark #topbar-cta-button a:hover span{opacity:1!important;background-color:#0058c3}.signup-cta-button,.signup-cta-button:active,.signup-cta-button:focus,.signup-cta-button:hover{background-color:#0061d5;border-radius:50px!important;transition:background-color .2s!important;box-shadow:none!important;transform:none!important;border:0!important;border-bottom:none!important;text-decoration:none!important;outline:0!important}.signup-cta-button:hover{background-color:#146bd5!important;opacity:1!important}.dark .signup-cta-button:hover{background-color:#0058c3!important;opacity:1!important}.homepage-secondary-button,.homepage-secondary-button:active,.homepage-secondary-button:focus,.homepage-secondary-button:hover{border-radius:50px!important;border:1px solid #d1d5db!important;background-color:transparent!important;color:#1f2937!important;transition:background-color .2s!important;box-shadow:none!important;transform:none!important;text-decoration:none!important;outline:0!important}.homepage-secondary-button:hover{background-color:#f9fafb!important}.dark .homepage-secondary-button,.dark .homepage-secondary-button:active,.dark .homepage-secondary-button:focus{border-color:#4b5563!important;color:#e5e7eb!important}.dark .homepage-secondary-button:hover{background-color:#1f2937!important}.signup-cta-login,.signup-cta-login:active,.signup-cta-login:focus,.signup-cta-login:hover{text-decoration:none!important;border-bottom:none!important}#content-area h1,#content-area h2,#content-area h3,#content-area h4,#content-area h5,#content-area h6{font-weight:600!important}#content-area h1{font-size:32px!important}.dark img[src*=\"guides-box-ai-ai-models/claude.svg\"],.dark img[src*=\"guides-box-ai-ai-models/gemini.svg\"],.dark img[src*=\"guides-box-ai-ai-models/grok.svg\"],.dark img[src*=\"guides-box-ai-ai-models/meta.svg\"],.dark img[src*=\"guides-box-ai-ai-models/mistral.svg\"],.dark img[src*=\"guides-box-ai-ai-models/openai.svg\"]{filter:invert(1)}.homepage_h2{font-size:28px!important}.chat-assistant-floating-input{z-index:1!important}"}],"page":{"pagePath":"guides/embed/ui-elements","slug":"/guides/embed/ui-elements","pageMetadata":{"title":"UI Elements","sidebarTitle":"Overview","description":null,"href":"/guides/embed/ui-elements/index"},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];const Link=({href,children,className,...props})=>{const _components={a:`a`,..._provideComponents()};const localizedHref=localizeLink(href);return _jsx(_components.a,{href:localizedHref,className,...props,children})};function _createMdxContent(props){const _components={code:`code`,li:`li`,p:`p`,ul:`ul`,..._provideComponents(),...props.components},{Heading,Warning,_MdxComponentBoundary}=_components;if(!Heading)_missingMdxReference(`Heading`,true);if(!Warning)_missingMdxReference(`Warning`,true);if(!_MdxComponentBoundary)_missingMdxReference(`_MdxComponentBoundary`,true);return _jsxs(_Fragment,{children:[_jsx(_components.p,{children:`Box UI Elements are pre-built UI components that allow developers to add\nelements of the main Box web application into their own applications. They can\nbe used to navigate through, upload, preview, and select content stored on Box\nand are available both as React components and framework-agnostic JavaScript\nlibraries.`}),`\n`,_jsx(Heading,{level:`2`,id:`available-elements`,children:`Available Elements`}),`\n`,_jsx(_components.p,{children:`Box offers several UI Elements to create common user experiences with files and\nfolders in an application.`}),`\n`,_jsx(_components.p,{children:`The available UI Elements are:`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_MdxComponentBoundary,{name:`Link`,children:_jsx(Link,{href:`/guides/embed/ui-elements/explorer`,children:`Content Explorer`})}),` - Allow users to search and browse through files and folders. It also has a metadata query based view `,_jsx(_MdxComponentBoundary,{name:`Link`,children:_jsx(Link,{href:`/guides/embed/ui-elements/explorer-metadata-v2`,children:`variant`})}),` that supports items sorting, filtering, custom columns, and more.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_MdxComponentBoundary,{name:`Link`,children:_jsx(Link,{href:`/guides/embed/ui-elements/open-with`,children:`Content Open With`})}),` - Allow users to open content stored in Box with a partner application using an embedded dropdown.`]}),`\n`]}),`\n`,_jsx(Warning,{children:_jsxs(_components.p,{children:[`We no longer support the `,_jsx(_components.code,{children:`OpenWith`}),` UI element for any new customers as of December 21, 2021.`]})}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_MdxComponentBoundary,{name:`Link`,children:_jsx(Link,{href:`/guides/embed/ui-elements/picker`,children:`Content Picker`})}),` - Allow users to select files or folders from their Box account.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_MdxComponentBoundary,{name:`Link`,children:_jsx(Link,{href:`/guides/embed/ui-elements/preview`,children:`Content Preview`})}),` - Display interactive viewers for documents, images, audio, video, and more.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_MdxComponentBoundary,{name:`Link`,children:_jsx(Link,{href:`/guides/embed/ui-elements/sidebar`,children:`Content Sidebar`})}),` - Display a sidebar for file metadata and activity feed information.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_MdxComponentBoundary,{name:`Link`,children:_jsx(Link,{href:`/guides/embed/ui-elements/uploader`,children:`Content Uploader`})}),` - Allow users to upload files by selecting or using drag-and-drop.`]}),`\n`]}),`\n`,_jsx(_components.p,{children:`UI Elements can be used in isolation or joined together to construct common user\nflows with content, such as uploading and then viewing a file.`})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{Link,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":"UI Elements","sidebarTitle":"Overview","description":null,"href":"/guides/embed/ui-elements/index"}}},"mdxSourceWithNoJs":null,"noJsSplices":[[140,356,")=>null;function _cr"]]},"mdxExtracts":{"tableOfContents":[{"title":"Available Elements","slug":"available-elements","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":["/_mintlify/custom/box/523776d2eff70e58/scripts/cookie-banner.js","/_mintlify/custom/box/e597cec886c1778e/scripts/locale-links.js","/_mintlify/custom/box/37b2f846ed414abc/snippets/choose-choice-simple.js","/_mintlify/custom/box/78fc14bb599966cb/scripts/locale-footer-combined.js","/_mintlify/custom/box/9a429216167d598a/scripts/analitics.js","/_mintlify/custom/box/2f463a090bfcd0e8/snippets/boxIntl.js","/_mintlify/custom/box/d88c3906cf95ec86/snippets/translations.js","/_mintlify/custom/box/d67e74fc334b686a/scripts/preferred-source.js"],"subdomain":"box","siteName":"Box Dev Docs","title":"UI Elements - Box Dev Docs","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{"en":{"href":"/guides/embed/ui-elements/index","matchLevel":2},"ja":{"href":"/ja/guides/embed/ui-elements/index","matchLevel":1}}},"lastModified":"2026-10-22T08:24:12.463Z","gitLastModified":"2026-09-04T16:50:59.000Z","originalFileLocation":"guides/embed/ui-elements/index.mdx","locale":"en"},"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=\"application-name\" content=\"Box Dev Docs\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/box/ZCmC4_xrCUAVE-ZZ/_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/box/ZCmC4_xrCUAVE-ZZ/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/box/ZCmC4_xrCUAVE-ZZ/_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/box/ZCmC4_xrCUAVE-ZZ/_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/box/ZCmC4_xrCUAVE-ZZ/_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/box/ZCmC4_xrCUAVE-ZZ/_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/box/ZCmC4_xrCUAVE-ZZ/_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/box/ZCmC4_xrCUAVE-ZZ/_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/box/ZCmC4_xrCUAVE-ZZ/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"UI Elements - Box Dev Docs\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Box Dev Docs\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://developer.box.com/guides/embed/ui-elements\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://box.mintlify.app/_mintlify/api/og/v2?division=Documentation\u0026amp;title=UI+Elements\u0026amp;theme=7c006b8b877970d319badcf9\u0026amp;signature=0b020cb79a14a24e691ddff4c5184072c0b4a7c8aede188f275e278e507a2261\">\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=\"UI Elements - Box Dev Docs\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://box.mintlify.app/_mintlify/api/og/v2?division=Documentation\u0026amp;title=UI+Elements\u0026amp;theme=7c006b8b877970d319badcf9\u0026amp;signature=0b020cb79a14a24e691ddff4c5184072c0b4a7c8aede188f275e278e507a2261\">\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/box/ZCmC4_xrCUAVE-ZZ/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Box Dev Docs\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#0061d5\">\u003cmeta data-mint-head name=\"google-site-verification\" content=\"fuelbNhVR1kQluNBJjYt4K1Hj5HvJLhLnIq0o9CAY9E\">\u003clink data-mint-head rel=\"canonical\" href=\"https://developer.box.com/guides/embed/ui-elements\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/guides/embed/ui-elements.md\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"en\" href=\"https://developer.box.com/guides/embed/ui-elements\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"ja\" href=\"https://developer.box.com/ja/guides/embed/ui-elements\">\u003clink data-mint-head rel=\"alternate\" hreflang=\"x-default\" href=\"https://developer.box.com/guides/embed/ui-elements\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://developer.box.com/#organization\",\"name\":\"Box Dev Docs\",\"url\":\"https://developer.box.com\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/box/lJLw9z7FWORNWMcq/logo/boxdev-light.png?fit=max\u0026auto=format\u0026n=lJLw9z7FWORNWMcq\u0026q=85\u0026s=a11710b698ff59d24426f9ecec6c7e9c\"}},{\"@type\":\"WebSite\",\"@id\":\"https://developer.box.com#website\",\"name\":\"Box Dev Docs\",\"url\":\"https://developer.box.com\",\"publisher\":{\"@id\":\"https://developer.box.com/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://developer.box.com/guides/embed/ui-elements#webpage\",\"url\":\"https://developer.box.com/guides/embed/ui-elements\",\"name\":\"UI Elements\",\"dateModified\":\"2026-09-04T16:50:59.000Z\",\"isPartOf\":{\"@id\":\"https://developer.box.com#website\"},\"breadcrumb\":{\"@id\":\"https://developer.box.com/guides/embed/ui-elements#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://developer.box.com/guides/embed/ui-elements#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Dev tools\",\"item\":\"https://developer.box.com/sdks-and-tools\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Box UI Elements\",\"item\":\"https://developer.box.com/guides/embed/ui-elements/index\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"UI Elements\",\"item\":\"https://developer.box.com/guides/embed/ui-elements\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://developer.box.com/guides/embed/ui-elements#article\",\"headline\":\"UI Elements\",\"name\":\"UI Elements\",\"url\":\"https://developer.box.com/guides/embed/ui-elements\",\"mainEntityOfPage\":{\"@id\":\"https://developer.box.com/guides/embed/ui-elements#webpage\"},\"dateModified\":\"2026-09-04T16:50:59.000Z\",\"publisher\":{\"@id\":\"https://developer.box.com/#organization\"},\"isPartOf\":{\"@id\":\"https://developer.box.com#website\"}}]}\u003c/script>","siteName":"Box Dev Docs","nav":{"global":null,"languages":[{"language":"en","banner":{"content":"Join BoxWorks Dev Summit on Nov 5-6, San Francisco and dive into AI agents and unstructured content. [See agenda](https://boxworks.box.com/series/boxworks-2026-dev-summit/landing_page).","dismissible":true},"footer":{"socials":{"x":"https://x.com/box","github":"https://github.com/box-community","linkedin":"https://linkedin.com/company/box","youtube":"https://www.youtube.com/user/box","facebook":"https://www.facebook.com/box"},"links":[{"header":"Resources","items":[{"label":"Newsletter unsubscribe","href":"https://go.box.com/preferences.html"},{"label":"Terms of Use","href":"https://cloud.app.box.com/s/rmwxu64h1ipr41u49w3bbuvbsa29wku9"},{"label":"Privacy Policy","href":"https://www.box.com/en-gb/legal/privacypolicy?url_redirect=direct"},{"label":"Cookie Notification","href":"https://www.box.com/en-gb/legal/cookie-notification?url_redirect=direct"},{"label":"llms.txt","href":"https://developer.box.com/llms.txt"}]}]},"navbar":{"links":[{"href":"https://account.box.com/developers/console","label":"Log in","type":"button"}],"primary":{"type":"button","label":"Get started for free","href":"https://account.box.com/signup/developer"}},"tabs":[{"tab":"Home","pages":[{"title":"Home","href":""}]},{"tab":"AI","pages":[{"title":"AI","href":"/ai"}]},{"tab":"API reference","pages":[{"title":"API reference","href":"/reference"}]},{"tab":"Tools","pages":[{"group":"Dev tools","pages":[{"title":"Tools","sidebarTitle":"Tools","href":"/sdks-and-tools"},{"group":"SDKs","root":{"title":"Box SDKs","href":"/guides/tooling/sdks/index"},"pages":[{"title":"Box SDK versioning strategy","href":"/guides/tooling/sdks/sdk-versioning"},{"title":"Install .NET SDK","sidebarTitle":".NET SDK","href":"/guides/tooling/sdks/dotnet"},{"title":"Box Java SDK","sidebarTitle":"Java SDK","href":"/guides/tooling/sdks/java"},{"title":"Install Python SDK","sidebarTitle":"Python SDK","href":"/guides/tooling/sdks/python"},{"title":"Install Node SDK","sidebarTitle":"Node SDK","href":"/guides/tooling/sdks/node"},{"title":"Install Salesforce SDK","sidebarTitle":"Salesforce SDK","href":"/guides/tooling/sdks/salesforce"},{"group":"Deprecated","root":{"title":"Deprecated Box Next Gen TypeScript SDK","sidebarTitle":"Box Next Gen TypeScript SDK","href":"/guides/tooling/sdks/typescript-gen"},"pages":[{"title":"Deprecated Box Next Gen Python SDK","sidebarTitle":"Box Next Gen Python SDK","href":"/guides/tooling/sdks/python-gen"},{"title":"Deprecated Box Next Gen .NET SDK","sidebarTitle":"Box Next Gen .NET SDK","href":"/guides/tooling/sdks/dotnet-gen"},{"title":"Deprecated Box Next Gen Java SDK","sidebarTitle":"Box Next Gen Java SDK","href":"/guides/tooling/sdks/java-gen"},{"title":"Deprecated Box Next Gen Swift SDK","sidebarTitle":"Box Next Gen Swift SDK","href":"/guides/tooling/sdks/swift-gen"}]}]},{"title":"The `box` npm package","href":"/guides/tooling/box-npm-package"},{"group":"CLI","root":{"title":"Box CLI","sidebarTitle":"Overview","href":"/guides/cli/index"},"pages":[{"title":"Login for Headless Environments","sidebarTitle":"Headless Login","href":"/guides/cli/headless-login"},{"group":"Using the Box CLI","root":{"title":"Building Commands and Help Feature","sidebarTitle":"Building Commands and Help Feature","href":"/guides/cli/quick-start/build-commands-help"},"pages":[{"title":"Using Options","sidebarTitle":"Using Options","href":"/guides/cli/quick-start/using-options"},{"title":"Using Bulk Commands","sidebarTitle":"Using Bulk Commands","href":"/guides/cli/quick-start/using-bulk-commands"}]},{"group":"CLI sample scripts","root":{"title":"CLI sample scripts","href":"/guides/cli/scripts/index"},"pages":[{"title":"Using PowerShell Scripts with the Box CLI","href":"/guides/cli/scripts/powershell-script-templates"},{"title":"Update user zones","href":"/guides/cli/scripts/user-zones-mass-update"},{"title":"Report inactive users","href":"/guides/cli/scripts/report-inactive-users"},{"title":"Manage groups and collaborations","href":"/guides/cli/scripts/manage-groups-collaborations"},{"title":"Extract metadata","href":"/guides/cli/scripts/metadata-extraction"},{"title":"Deprovision users and archive folders","href":"/guides/cli/scripts/deprovision-users"},{"title":"Manage Slack integration folder mappings","href":"/guides/cli/scripts/slack-integration-mappings"}]},{"group":"Box CLI with JWT Authentication","root":{"title":"Box CLI with JWT Authentication","href":"/guides/cli/cli-with-jwt-authentication/jwt-cli"},"pages":[]}]},{"title":"Box Mount","sidebarTitle":"Box Mount","description":"Mount a Box folder into an agent runtime as a POSIX filesystem, kept in two-way sync, with Box permissions and governance applied to every operation.","tag":"Preview","href":"/guides/box-mount"},{"group":"Box UI Elements","root":{"title":"UI Elements","sidebarTitle":"Overview","href":"/guides/embed/ui-elements/index"},"pages":[{"title":"Installation","description":null,"href":"/guides/embed/ui-elements/installation"},{"title":"Browser Support","description":null,"href":"/guides/embed/ui-elements/browser"},{"group":"Content Explorer","root":{"title":"Content Explorer","href":"/guides/embed/ui-elements/explorer"},"pages":[{"title":"Content Explorer – metadata view v2","description":null,"href":"/guides/embed/ui-elements/explorer-metadata-v2"},{"title":"Content Explorer - metadata view v1","description":null,"href":"/guides/embed/ui-elements/explorer-metadata-v1"}]},{"title":"Content Open With","description":null,"href":"/guides/embed/ui-elements/open-with"},{"title":"Content Picker","description":null,"href":"/guides/embed/ui-elements/picker"},{"title":"Content Preview","description":null,"href":"/guides/embed/ui-elements/preview"},{"title":"Content Sidebar","description":null,"href":"/guides/embed/ui-elements/sidebar"},{"title":"Content Uploader","description":null,"href":"/guides/embed/ui-elements/uploader"},{"title":"Annotations","description":null,"href":"/guides/embed/ui-elements/annotations"},{"title":"Customize Logo","description":null,"href":"/guides/embed/ui-elements/logo"},{"title":"Theming \u0026 styling for Box UI Elements","description":null,"href":"/guides/embed/ui-elements/theming-styling"},{"title":"UI Elements design tokens","description":null,"href":"/guides/embed/ui-elements/ui-elements-design-tokens"},{"title":"Customize Access","description":null,"href":"/guides/embed/ui-elements/access"},{"title":"Dedicated Scopes","description":null,"href":"/guides/embed/ui-elements/scopes"},{"title":"Preview - Viewers \u0026 Events","description":null,"href":"/guides/embed/ui-elements/viewers-and-events"},{"title":"Box Edit Custom Domains","description":null,"href":"/guides/embed/ui-elements/custom-domains"}]},{"group":"Salesforce Developer Toolkit","root":{"title":"Salesforce Developer Toolkit","href":"/guides/tooling/salesforce-toolkit/index"},"pages":[{"title":"Methods and Operations","href":"/guides/tooling/salesforce-toolkit/methods"},{"title":"Code Samples","href":"/guides/tooling/salesforce-toolkit/samples"},{"title":"Experience Cloud Toolkit Global Methods","href":"/guides/tooling/salesforce-toolkit/experience-cloud-toolkit/experience-cloud-toolkit-global-methods"},{"group":"Flow Actions","root":{"title":"Flow Actions","href":"/guides/tooling/salesforce-toolkit/flow-actions"},"pages":[{"title":"Push File to Box","href":"/guides/tooling/salesforce-toolkit/flow-actions/push-file-to-box"}]},{"title":"UI Elements in Salesforce","href":"/guides/tooling/salesforce-toolkit/ui-elements"},{"title":"Box for Agentforce Extension package","href":"/guides/tooling/salesforce-toolkit/box-agentforce-package"},{"title":"Wiring the Box file picker to a custom invocable","href":"/guides/tooling/salesforce-toolkit/wiring-the-box-file-picker-to-a-custom-invocable"},{"title":"Box Doc Gen Toolkit","href":"/guides/tooling/salesforce-toolkit/doc-gen-toolkit"}]},{"group":"Postman Collection","root":{"title":"Postman Collection","sidebarTitle":"Overview","href":"/guides/tooling/postman/index"},"pages":[{"title":"Refresh an Access Token","href":"/guides/tooling/postman/refresh"}]},{"group":"Mobile","pages":[{"title":"Deep Linking","href":"/guides/mobile/mobile-deep-linking"},{"title":"Android SDK Installation","sidebarTitle":"Android","href":"/guides/mobile/android/install"},{"group":"iOS","root":{"title":"iOS SDK","sidebarTitle":"Overview","href":"/guides/mobile/ios/quick-start/index"},"pages":[{"title":"Create an iOS App","sidebarTitle":"1. Create an iOS App","href":"/guides/mobile/ios/quick-start/create-ios-app"},{"title":"Install the iOS SDK","sidebarTitle":"2. Install the iOS SDK","href":"/guides/mobile/ios/quick-start/install-ios-sdk"},{"title":"Configure a platform app","sidebarTitle":"3. Configure a platform app","href":"/guides/mobile/ios/quick-start/configure-box-app"},{"title":"Make an API call","sidebarTitle":"4. Make an API call","href":"/guides/mobile/ios/quick-start/make-api-call"},{"title":"iOS quick start: next steps","sidebarTitle":"Next steps","href":"/guides/mobile/ios/quick-start/next-steps"}]}]},{"title":"Box Embed","href":"/guides/embed/box-embed"},{"group":"Box View","root":{"title":"Box View","sidebarTitle":"Overview","href":"/guides/embed/box-view/index"},"pages":[{"title":"Setup","href":"/guides/embed/box-view/setup"},{"title":"Create File Preview","href":"/guides/embed/box-view/create-preview"},{"title":"Upload Files","href":"/guides/embed/box-view/upload-file"},{"title":"Box View best practices","sidebarTitle":"Best practices","href":"/guides/embed/box-view/best-practices"},{"title":"FAQ","href":"/guides/embed/box-view/faq"}]}]}]},{"tab":"Tutorials","pages":[{"title":"Tutorials","href":"/tutorials"}]},{"tab":"Changelog","pages":[{"title":"Changelog","href":"/changelog/2026"}]}],"global":{"anchors":[{"anchor":"Box","icon":"https://mintlify.s3.us-west-1.amazonaws.com/box/images/sidebar/box.svg","href":"https://www.box.com/home"},{"anchor":"Community","icon":"book-open-cover","href":"https://community.box.com/box-platform-5"},{"anchor":"Developer Blog","icon":"newspaper","href":"https://blog.box.com/developer"},{"anchor":"Box SDKs","icon":"code","href":"https://github.com/box/sdks"},{"anchor":"Box Docs","icon":"file-lines","href":"https://docs.box.com"}]}},{"language":"ja","banner":{"content":"Join live webinar on Sept 29: See how to give agents a computer and enterprise content to work on with Box and Daytona. [Register now](https://events.zoom.us/ev/Amkp36LSSk_TxOQbBytoLoHa_Ztg7quKlJv2u74NRvSZJtlnbG5L~AqO7fnFo-ePaTqEcPrKs4jSfhxq3pMVK52ut69Q2zfn9jOr70vx5DQVJaeNF1dDZE9_0N33jMcY1yE9LoHDL5Oamqg).","dismissible":true},"footer":{"socials":{"x":"https://x.com/box","github":"https://github.com/box-community","linkedin":"https://linkedin.com/company/box","youtube":"https://www.youtube.com/user/box","facebook":"https://www.facebook.com/box"},"links":[{"header":"リソース","items":[{"label":"ニュースレターの登録解除","href":"https://go.box.com/preferences.html"},{"label":"利用規約","href":"https://cloud.app.box.com/s/rmwxu64h1ipr41u49w3bbuvbsa29wku9"},{"label":"個人情報保護方針","href":"https://www.box.com/en-gb/legal/privacypolicy?url_redirect=direct"},{"label":"Cookieに関する通知","href":"https://www.box.com/en-gb/legal/cookie-notification?url_redirect=direct"},{"label":"llms.txt","href":"https://developer.box.com/llms.txt"}]}]},"navbar":{"links":[{"href":"https://account.box.com/developers/console","label":"ログイン","type":"button"}],"primary":{"type":"button","label":"今すぐ無料で開始","href":"https://account.box.com/signup/developer"}},"pages":[{"title":"ja","href":"/ja/guides/embed/ui-elements"}]}]},"title":"UI Elements - Box Dev Docs","buildId":"dpl_cadrRc5H9XQiJQbDFN5mcYRs2PAj","deploymentId":"dpl_cadrRc5H9XQiJQbDFN5mcYRs2PAj","dynamics":["10e4515597"],"chunks":["BannerMarkdown-Og7hgu7u.js","dist-BaREnp3o.js","lib--scc4DXi.js","lib-B8HbPgcC.js","clsx-CefdjKz2.js","html-void-elements-mCSPHezU.js","katex-YMM-FMeD.js","marked.esm-CZWythHk.js"]}