{"docsConfig":{"theme":"aspen","$schema":"https://mintlify.com/docs.json","name":"FLEX Theme","description":"FLEX Theme for Filament 5: a visual theme editor, Global Search, keyboard shortcuts, announcements and floating panels.","colors":{"primary":"#5B49D6","light":"#A89AFF","dark":"#4935B5"},"logo":{"light":"https://mintcdn.com/flex/zLBYbWBAaOMIxHbJ/docs/assets/logo-light.svg?fit=max\u0026auto=format\u0026n=zLBYbWBAaOMIxHbJ\u0026q=85\u0026s=2547735ffbc9accd583cb884caeb8429","dark":"https://mintcdn.com/flex/zLBYbWBAaOMIxHbJ/docs/assets/logo-dark.svg?fit=max\u0026auto=format\u0026n=zLBYbWBAaOMIxHbJ\u0026q=85\u0026s=cbf1ee5c45ef3dce8d8138003be3c083","href":"/docs/index"},"favicon":"https://mintcdn.com/flex/zLBYbWBAaOMIxHbJ/docs/assets/flex-mark.svg?fit=max\u0026auto=format\u0026n=zLBYbWBAaOMIxHbJ\u0026q=85\u0026s=1198aa68ef32e3e2599421b47bb47032","appearance":{"default":"system","strict":false},"background":{"color":{"light":"#FFFFFF","dark":"#101018"}},"navbar":{"links":[{"href":"https://github.com/janczakb/filament-flex-theme","label":"GitHub"}],"primary":{"type":"button","label":"Buy now","href":"https://shop.bjanczak.com/checkout/buy/2fa1e181-74d4-4889-994c-d066dcfc88b3"}},"footer":{"socials":{"github":"https://github.com/janczakb/filament-flex-theme"}},"seo":{"metatags":{"og:site_name":"FLEX Theme","og:locale":"en_US","canonical":"https://flex-theme.bjanczak.com"},"organization":{"name":"FLEX Theme","url":"https://flex-theme.bjanczak.com/"},"indexing":"navigable","trailingSlash":false},"fonts":{"family":"Inter"},"icons":{"library":"lucide"},"styling":{"eyebrows":"breadcrumbs","codeblocks":{"theme":{"light":"github-light","dark":"github-dark"}},"latex":false},"integrations":{"ga4":{"measurementId":"G-DXL95NDK97"}},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"flex","hasAudioNarration":false,"actualSubdomain":"flex","customDomains":["flex-theme.bjanczak.com"],"gitSource":{"type":"github","owner":"janczakb","repo":"filament-flex-theme","deployBranch":"main","contentDirectory":"","isPrivate":false,"mountPath":"","label":"","_id":"6ada36ab7588e31a4b6e0432"},"chroma":{"latestBuiltDeploymentHistoryId":"6aded9c03eac266f8e602094","collectionId":"559a4385-4196-41aa-8392-1d483a012b74","liveDeploymentHistoryId":"6aded9c03eac266f8e602094","schemaVersion":"v3"},"entitlements":{},"buildId":"6adedd67432a36e633917769","clientVersion":"0.0.3966","searchFilterCounts":[{"language":"default","tag":"Global Search","count":18},{"language":"default","tag":"Announcements","count":10},{"language":"default","tag":"Theme Settings","count":9},{"language":"default","tag":"Discover and act","count":5},{"language":"default","tag":"Customize and operate","count":5},{"language":"default","tag":"Extend search","count":5},{"language":"default","tag":"Design your panel","count":5},{"language":"default","tag":"Get started","count":3},{"language":"default","tag":"Start here","count":3},{"language":"default","tag":"Keyboard \u0026 Tables","count":3}]},"assistantConfig":{"enableAskAiButton":false,"enableStarterQuestions":false,"enableContextualStarterQuestions":false,"enableAskAiSearchBar":true},"hasChatPermissions":false,"hasWebMcpPermissions":false,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-v7-file-tree","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"pause-universal-search-reconcile","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"per-site-search-delta","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-private-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-nav-generations","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"byok-sep-25","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"vite-origin","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-agent-model-picker","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-updated-9-15","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"isAtlas":false,"googleFontsInlined":false},"customCss":[{"filePath":"docs/flex-home.css","href":"/_mintlify/custom/flex/dfe6581db7526446/docs/flex-home.css"}],"page":{"pagePath":"docs","slug":"/docs","pageMetadata":{"title":"Filament 5 Theme \u0026 Visual Panel Editor","description":"Give your Filament 5 admin panel a new look with FLEX Theme. Visual theme settings, Global Search, keyboard shortcuts and more. Buy once, with a year of updates.","canonical":"https://flex-theme.bjanczak.com/docs","og:title":"FLEX Theme — Filament 5 Theme \u0026 Visual Editor","og:description":"Your colors. Your type. Your workflow. Meet the Filament 5 theme with a visual editor, Global Search and keyboard controls. One-time payment.","og:image":"https://flex-theme.bjanczak.com/docs/assets/home/social-preview.png","og:image:alt":"FLEX Theme for Filament 5 with a real campaign dashboard","twitter:image":"https://flex-theme.bjanczak.com/docs/assets/home/social-preview.png","twitter:image:alt":"FLEX Theme for Filament 5 with a real campaign dashboard","mode":"custom","href":"/docs/index"},"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: \"Give your Filament 5 admin panel a new look with FLEX Theme. Visual theme settings, Global Search, keyboard shortcuts and more. Buy once, with a year of updates.\"\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 FlexHome=()=>{const _components={a:`a`,..._provideComponents()};const root=useRef(null);const laptopSection=useRef(null);const laptopFrame=useRef(null);const[laptopStatus,setLaptopStatus]=useState(`loading`);const[laptop3dEnabled,setLaptop3dEnabled]=useState(false);const[laptopScreen,setLaptopScreen]=useState(0);const[laptopEnding,setLaptopEnding]=useState(false);const[laptopMobile,setLaptopMobile]=useState(false);const[laptopMobileScreen,setLaptopMobileScreen]=useState(0);const laptopTouch=useRef(null);const film=useRef(null);const[filmOpen,setFilmOpen]=useState(false);const[appearance,setAppearance]=useState(`tide`);const[seenAppearances,setSeenAppearances]=useState([`tide`]);const[layout,setLayout]=useState(`sidebar`);const[seenLayouts,setSeenLayouts]=useState([`sidebar`]);const[copied,setCopied]=useState(false);const[integrationTab,setIntegrationTab]=useState(`php`);const[settingsIndex,setSettingsIndex]=useState(0);const settingsViewport=useRef(null);const settingsTouch=useRef(null);const assets=`/docs/assets/home/`;const docs=`/docs/`;const filmUrl=`https://www.youtube.com/watch?v=POkDG3aMmgw`;const checkout=`https://shop.bjanczak.com/checkout/buy/2fa1e181-74d4-4889-994c-d066dcfc88b3`;const homepage=`https://flex-theme.bjanczak.com/docs`;const licensePlans=[{name:`Single`,price:49,description:`One project. One-time payment. All FLEX features and one year of free updates.`},{name:`Unlimited`,price:139,description:`Unlimited projects. One-time payment. All FLEX features and one year of free updates.`}];const productSchema={\"@context\":`https://schema.org`,\"@type\":[`SoftwareApplication`,`Product`],\"@id\":homepage+`#flex-theme`,name:`FLEX Theme`,description:`A customizable Filament 5 admin panel theme with a visual theme editor, Global Search, keyboard shortcuts, announcements and floating panels.`,url:homepage,image:`https://flex-theme.bjanczak.com/docs/assets/home/social-preview.png`,applicationCategory:`DeveloperApplication`,operatingSystem:`Platform independent`,softwareRequirements:`PHP 8.3 or later and Filament 5`,brand:{\"@type\":`Brand`,name:`FLEX Theme`},mainEntityOfPage:homepage,featureList:[`Visual theme editor`,`Light and dark modes`,`Colors, typography and branding`,`Classic and Inset panel layouts`,`Global Search with authorized resource actions`,`Configurable keyboard shortcuts and table navigation`,`Announcement bars with schedules and rotation`,`Floating panels and expandable bottom sheets`,`Field groups`,`Per-panel settings and PHP configuration`],offers:licensePlans.map(plan=>({\"@type\":`Offer`,name:plan.name,description:plan.description,price:plan.price,priceCurrency:`USD`,url:checkout}))};const laptopDocument=`\u003c!doctype html>\n\u003chtml lang=\"en\">\u003chead>\u003cmeta charset=\"utf-8\">\u003cmeta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\u003ctitle>FLEX Theme scroll presentation\u003c/title>\u003cstyle>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent}canvas{display:block;width:100%;height:100%}\u003c/style>\u003c/head>\u003cbody>\u003ccanvas id=\"flex-laptop-canvas\" aria-label=\"MacBook Air showing six real FLEX interfaces\">\u003c/canvas>\u003cscript>(() => {\n const reportError = () => parent.postMessage({ type: 'flex-laptop-error' }, parent.location.origin);\n const load = (url) => {\n const script = document.createElement('script');\n script.src = url;\n script.onerror = reportError;\n document.body.appendChild(script);\n };\n const findRuntime = () => Array.from(parent.document.scripts).find(script => {\n if (!script.src) return false;\n return new URL(script.src).pathname.endsWith('/snippets/laptop-runtime.js');\n });\n const existing = findRuntime();\n if (existing) { load(existing.src); return; }\n const hostname = parent.location.hostname;\n if (hostname === 'localhost' || hostname === '127.0.0.1') {\n load(new URL('/snippets/laptop-runtime.js', parent.location.href).href);\n return;\n }\n const observer = new MutationObserver(() => {\n const runtime = findRuntime();\n if (!runtime) return;\n observer.disconnect();\n load(runtime.src);\n });\n observer.observe(parent.document.documentElement, { childList: true, subtree: true });\n addEventListener('pagehide', () => observer.disconnect(), { once: true });\n})();\u003c\\/script>\u003c/body>\u003c/html>\n`;const Arrow=({diagonal=false})=>_jsx(`svg`,{viewBox:`0 0 24 24`,fill:`none`,\"aria-hidden\":`true`,children:_jsx(`path`,{d:diagonal?`M6 18 18 6M6 6h12v12`:`M4 12h16m-6-6 6 6-6 6`,stroke:`currentColor`,strokeWidth:`1.6`,strokeLinecap:`round`,strokeLinejoin:`round`})});const LayoutIcon=({variant})=>variant===`sidebar`?_jsx(`svg`,{className:`fl-native-layout-icon`,\"aria-hidden\":`true`,focusable:`false`,xmlns:`http://www.w3.org/2000/svg`,width:`36`,height:`24`,viewBox:`0 0 36 24`,fill:`none`,children:_jsxs(`g`,{stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`,children:[_jsx(`rect`,{x:`0.75`,y:`0.75`,width:`34.5`,height:`22.5`,rx:`4.5`,fill:`none`}),_jsx(`g`,{fill:`currentColor`,children:_jsx(`rect`,{x:`3.75`,y:`3.75`,width:`6`,height:`16.5`,rx:`1.5`})})]})}):variant===`topbar`?_jsx(`svg`,{className:`fl-native-layout-icon`,\"aria-hidden\":`true`,focusable:`false`,xmlns:`http://www.w3.org/2000/svg`,width:`36`,height:`24`,viewBox:`0 0 36 24`,fill:`none`,children:_jsxs(`g`,{stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`,children:[_jsx(`rect`,{x:`0.75`,y:`0.75`,width:`34.5`,height:`22.5`,rx:`4.5`,fill:`none`}),_jsx(`g`,{fill:`currentColor`,children:_jsx(`rect`,{x:`3.75`,y:`3.75`,width:`28.5`,height:`4.5`,rx:`1.5`})})]})}):_jsx(`svg`,{className:`fl-native-layout-icon`,\"aria-hidden\":`true`,focusable:`false`,xmlns:`http://www.w3.org/2000/svg`,width:`36`,height:`24`,viewBox:`0 0 36 24`,fill:`none`,children:_jsxs(`g`,{stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`,children:[_jsx(`rect`,{x:`0.75`,y:`0.75`,width:`34.5`,height:`22.5`,rx:`4.5`,fill:`none`}),_jsxs(`g`,{fill:`currentColor`,children:[_jsx(`rect`,{x:`3.75`,y:`3.75`,width:`28.5`,height:`4.5`,rx:`1.5`}),_jsx(`rect`,{x:`3.75`,y:`11.25`,width:`6`,height:`9`,rx:`1.5`})]})]})});const appearances=[{id:`tide`,name:`Tide`,font:`Manrope`,shape:`Rounded corners`},{id:`baltic`,name:`Baltic`,font:`Space Grotesk`,shape:`Square corners`},{id:`ember`,name:`Ember`,font:`Lora`,shape:`Soft corners`}];const settingsSlides=[{id:`appearance`,name:`Appearance`,height:729,title:`Set the tone.`,description:`Accent and base tint. Your own typeface. Independent corners for panels and form fields. Light, dark, or both.`,features:[`Accent \u0026 base tint`,`Fonts \u0026 corner styles`,`Light \u0026 dark modes`],href:`theme-settings/appearance`},{id:`colors`,name:`Colors`,height:723,title:`A palette with purpose.`,description:`Define your semantic colors once. Preview the same components in light and dark, side by side.`,features:[`Semantic colors`,`Light \u0026 dark previews`,`Consistent component colors`],href:`theme-settings/colors`},{id:`brand`,name:`Brand`,height:688,title:`Make yourself at home.`,description:`Give every panel its own name, logo and favicon. Choose separate assets for dark mode and a compact sidebar.`,features:[`Panel name \u0026 logos`,`Compact sidebar identity`,`Favicon`],href:`theme-settings/brand`},{id:`layout`,name:`Layout`,height:1473,title:`Give your workspace structure.`,description:`Classic or Inset. Sidebar, topbar, or both. Set content width, spacing and the way navigation behaves.`,features:[`Classic \u0026 Inset`,`Three navigation layouts`,`Widths, spacing \u0026 sidebar`],href:`theme-settings/layout`},{id:`details`,name:`Details`,height:414,title:`Refine the finishing touches.`,description:`Set the text scale, tune transitions and choose how your panel moves between light and dark.`,features:[`Text size`,`Interface transitions`,`Appearance transitions`],href:`theme-settings/details`},{id:`search`,name:`Search`,height:1007,title:`Find your own flow.`,description:`Choose category navigation, window size and search behavior. Configure recent results, favorites and large result sets.`,features:[`Categories \u0026 window size`,`Recents \u0026 favorites`,`Result limits \u0026 virtualization`],href:`global-search/configuration`},{id:`keyboard`,name:`Keyboard`,height:1038,title:`Keep your hands on the keys.`,description:`Record shortcuts for search, navigation and tables. Check every binding in the built-in reference.`,features:[`Record your shortcuts`,`Table \u0026 navigation controls`,`Built-in shortcut reference`],href:`workspace/table-shortcuts`}];const selectSettings=index=>{setSettingsIndex((index+settingsSlides.length)%settingsSlides.length);settingsViewport.current?.scrollTo({top:0,behavior:`instant`})};const selectAppearance=id=>{setSeenAppearances(previous=>previous.includes(id)?previous:[...previous,id]);setAppearance(id)};const selectLayout=id=>{setSeenLayouts(previous=>previous.includes(id)?previous:[...previous,id]);setLayout(id)};useEffect(()=>{if(!copied)return;const timer=window.setTimeout(()=>setCopied(false),2400);return()=>window.clearTimeout(timer)},[copied]);useEffect(()=>{const node=root.current;if(!node||typeof window.IntersectionObserver!==`function`||window.matchMedia(`(prefers-reduced-motion: reduce)`).matches)return;const observer=new IntersectionObserver(entries=>entries.forEach(entry=>{if(entry.isIntersecting){entry.target.classList.add(`fl-in-view`);observer.unobserve(entry.target)}}),{threshold:.12});node.querySelectorAll(`[data-reveal]`).forEach(el=>observer.observe(el));node.classList.add(`fl-motion-ready`);const stage=node.querySelector(`.fl-hero-stage`);let frame=null;const update=()=>{frame=null;if(!stage)return;const bounds=stage.getBoundingClientRect();const progress=Math.max(0,Math.min(1,(window.innerHeight-bounds.top)/window.innerHeight));stage.style.setProperty(`--fl-progress`,progress.toFixed(4))};const scroll=()=>{if(frame===null)frame=requestAnimationFrame(update)};window.addEventListener(`scroll`,scroll,{passive:true});window.addEventListener(`resize`,scroll,{passive:true});update();return()=>{observer.disconnect();window.removeEventListener(`scroll`,scroll);window.removeEventListener(`resize`,scroll);if(frame!==null)cancelAnimationFrame(frame)}},[]);useEffect(()=>{const section=laptopSection.current;if(!section)return;const reduced=window.matchMedia(`(prefers-reduced-motion: reduce)`);const compact=window.matchMedia(`(max-width: 700px)`);let frame=null;const update=()=>{frame=null;const bounds=section.getBoundingClientRect();const distance=Math.max(1,section.offsetHeight-window.innerHeight);setLaptopMobile(compact.matches);setLaptop3dEnabled(!reduced.matches\u0026\u0026!navigator.connection?.saveData);const progress=compact.matches?.075+.66*laptopMobileScreen/5:reduced.matches?0:Math.max(0,Math.min(1,-bounds.top/distance));const position=Math.max(0,Math.min(1,(progress-.075)/.66))*5;const index=Math.min(5,Math.floor(position)+(position%1>.86?1:0));setLaptopScreen(previous=>previous===index?previous:index);setLaptopEnding(progress>.875);section.style.setProperty(`--laptop-progress`,progress.toFixed(5));section.dataset.releasing=bounds.bottom\u003cwindow.innerHeight?`true`:`false`;section.dataset.leaving=progress>.84?`true`:`false`;root.current?.classList.toggle(`fl-over-laptop`,bounds.bottom>88\u0026\u0026bounds.top\u003c=88);laptopFrame.current?.contentWindow?.postMessage({type:`flex-laptop-progress`,progress,active:bounds.bottom>0\u0026\u0026bounds.top\u003cwindow.innerHeight},window.location.origin)};const schedule=()=>{if(frame===null)frame=requestAnimationFrame(update)};const receive=event=>{if(event.origin!==window.location.origin||event.source!==laptopFrame.current?.contentWindow)return;if(event.data?.type===`flex-laptop-ready`){setLaptopStatus(`ready`);schedule()}if(event.data?.type===`flex-laptop-error`)setLaptopStatus(`error`)};window.addEventListener(`scroll`,schedule,{passive:true});window.addEventListener(`resize`,schedule,{passive:true});window.addEventListener(`message`,receive);reduced.addEventListener(`change`,schedule);compact.addEventListener(`change`,schedule);schedule();return()=>{window.removeEventListener(`scroll`,schedule);window.removeEventListener(`resize`,schedule);window.removeEventListener(`message`,receive);reduced.removeEventListener(`change`,schedule);compact.removeEventListener(`change`,schedule);if(frame!==null)cancelAnimationFrame(frame)}},[laptopMobileScreen]);const openFilm=event=>{event?.preventDefault();setFilmOpen(true);film.current?.showModal()};const closeFilm=()=>{film.current?.close();setFilmOpen(false)};const copyInstall=async()=>{try{await navigator.clipboard.writeText(`composer require flex/theme:^0.1`);setCopied(true)}catch(_){setCopied(false)}};return _jsxs(`main`,{id:`flex-home`,className:`fl-home not-prose`,ref:root,children:[laptop3dEnabled\u0026\u0026_jsx(`link`,{rel:`preload`,href:typeof window!==`undefined`\u0026\u0026[`localhost`,`127.0.0.1`].includes(window.location.hostname)?`/docs/assets/laptop/macbook-air-web.glb.txt`:`/docs/assets/laptop/macbook-air-web-3ed3ede8716f.gltf.json`,as:`fetch`,crossOrigin:`anonymous`}),_jsx(`script`,{id:`fl-product-schema`,type:`application/ld+json`,children:JSON.stringify(productSchema).replace(/\u003c/g,`\\\\u003c`)}),_jsx(`a`,{href:`#fl-main`,className:`fl-skip`,children:`Skip to content`}),_jsxs(`nav`,{className:`fl-nav`,\"aria-label\":`FLEX Theme`,children:[_jsxs(_components.a,{className:`fl-brand`,href:docs+`index`,\"aria-label\":`FLEX Theme home`,children:[_jsx(`img`,{src:assets+`wordmark.svg`,width:`100`,height:`30`,alt:`FLEX`}),_jsx(`span`,{children:`Theme`})]}),_jsxs(`div`,{className:`fl-nav-links`,children:[_jsx(`a`,{href:`#fl-design`,children:`Design`}),_jsx(`a`,{href:`#fl-workflow`,children:`Experience`}),_jsx(`a`,{href:`#fl-pricing`,children:`Pricing`}),_jsxs(_components.a,{href:docs+`theme-settings/overview`,children:[`Documentation `,_jsx(Arrow,{diagonal:true})]})]}),_jsxs(`div`,{className:`fl-nav-actions`,children:[_jsx(_components.a,{className:`fl-nav-start`,href:docs+`theme-settings/overview#installation`,children:`Start building`}),_jsxs(_components.a,{className:`fl-nav-cta`,href:checkout,children:[`Buy now `,_jsx(Arrow,{})]})]})]}),_jsx(`section`,{id:`fl-main`,className:`fl-hero`,\"aria-labelledby\":`fl-hero-title`,children:_jsx(`section`,{className:`fl-laptop-scroll`,ref:laptopSection,\"data-status\":laptop3dEnabled?laptopStatus:`static`,\"aria-label\":laptopMobile?`Explore six real FLEX Theme screens`:`Explore six sides of FLEX Theme by scrolling`,children:_jsxs(`div`,{className:`fl-laptop-pin`,onTouchStart:event=>{laptopTouch.current=[event.touches[0].clientX,event.touches[0].clientY]},onTouchEnd:event=>{if(!laptopMobile||!laptopTouch.current)return;const dx=event.changedTouches[0].clientX-laptopTouch.current[0];const dy=event.changedTouches[0].clientY-laptopTouch.current[1];if(Math.abs(dx)>40\u0026\u0026Math.abs(dx)>Math.abs(dy)*1.3)setLaptopMobileScreen(previous=>(previous+(dx\u003c0?1:5))%6);laptopTouch.current=null},children:[_jsxs(`div`,{className:`fl-laptop-atmosphere`,\"aria-hidden\":`true`,children:[_jsx(`span`,{className:`fl-laptop-halo`}),_jsx(`span`,{className:`fl-laptop-arc fl-laptop-arc-left`}),_jsx(`span`,{className:`fl-laptop-arc fl-laptop-arc-right`}),_jsx(`span`,{className:`fl-laptop-glass fl-laptop-glass-left`,children:_jsx(`span`,{})}),_jsx(`span`,{className:`fl-laptop-glass fl-laptop-glass-right`,children:_jsx(`span`,{})}),_jsx(`span`,{className:`fl-laptop-light-sweep`})]}),_jsxs(`div`,{className:`fl-laptop-heading`,children:[_jsx(`p`,{className:`fl-laptop-kicker`,children:`Your panel.`}),_jsxs(`h1`,{id:`fl-hero-title`,children:[_jsx(`span`,{className:`fl-sr-only`,children:`FLEX Theme for Filament 5. `}),`Reimagined.`]})]}),_jsxs(`div`,{className:`fl-laptop-closing`,\"aria-hidden\":laptopEnding?undefined:true,children:[_jsxs(`h2`,{children:[_jsx(`span`,{className:`fl-laptop-closing-line fl-laptop-closing-first`,children:_jsx(`span`,{children:`Less code.`})}),_jsx(`span`,{className:`fl-laptop-closing-line fl-laptop-closing-second`,children:_jsx(`span`,{children:`More character.`})})]}),_jsxs(_components.a,{className:`fl-button fl-button-primary`,href:docs+`theme-settings/overview`,tabIndex:laptopEnding?0:-1,children:[`Explore FLEX Theme `,_jsx(Arrow,{})]})]}),_jsxs(`div`,{className:`fl-laptop-world`,children:[_jsxs(`div`,{className:`fl-laptop-fallback`,role:`img`,\"aria-label\":`FLEX Theme in Safari on macOS`,children:[_jsxs(`picture`,{children:[_jsx(`source`,{media:`(max-width: 1023px)`,srcSet:`/docs/assets/laptop/screens/`+(laptopScreen===1?`02-overview-desktop`:`01-campaigns-desktop`)+`.webp`}),_jsx(`img`,{className:`fl-laptop-desktop`,src:`/docs/assets/laptop/screens/`+(laptopScreen===1?`02-overview-desktop`:`01-campaigns-desktop`)+`-retina.webp`,width:`2056`,height:`1329`,alt:``,fetchPriority:`high`,decoding:`async`})]}),laptopScreen>1\u0026\u0026_jsx(`img`,{className:`fl-laptop-safari-client`,src:`/docs/assets/laptop/screens/`+[``,``,`03-brief`,`04-appearance`,`05-keyboard`,`06-search`][laptopScreen]+`-safari.webp`,width:`2025`,height:`1123`,alt:``})]}),laptop3dEnabled\u0026\u0026_jsx(`iframe`,{ref:laptopFrame,srcDoc:laptopDocument,title:`Interactive 3D laptop displaying real FLEX Theme screens`,loading:`eager`,tabIndex:-1})]}),_jsxs(`div`,{className:`fl-laptop-footer`,children:[_jsxs(`div`,{className:`fl-laptop-current`,\"aria-live\":`polite`,\"aria-atomic\":`true`,children:[_jsxs(`span`,{className:`fl-laptop-count`,children:[`0`,laptopScreen+1,_jsx(`span`,{children:` / 06`})]}),_jsx(`span`,{className:`fl-laptop-view`,children:[`Campaigns`,`Workspace overview`,`Campaign brief`,`Appearance`,`Keyboard shortcuts`,`Global search`][laptopScreen]})]}),_jsxs(`div`,{className:`fl-laptop-mobile-controls`,children:[_jsx(`button`,{onClick:()=>setLaptopMobileScreen(previous=>(previous+5)%6),\"aria-label\":`Previous laptop screen`,children:_jsx(Arrow,{})}),_jsx(`button`,{onClick:()=>setLaptopMobileScreen(previous=>(previous+1)%6),\"aria-label\":`Next laptop screen`,children:_jsx(Arrow,{})})]}),_jsx(`a`,{className:`fl-laptop-advance`,href:`#fl-after-laptop`,\"aria-label\":`Skip the presentation and explore FLEX Theme`,children:_jsx(`svg`,{viewBox:`0 0 24 24`,fill:`none`,\"aria-hidden\":`true`,children:_jsx(`path`,{d:`M12 4v16m-6-6 6 6 6-6`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`})})}),_jsxs(_components.a,{className:`fl-laptop-film`,href:filmUrl,onClick:openFilm,children:[`Watch the film `,_jsx(`span`,{children:`↗`})]})]})]})})}),_jsx(`section`,{id:`fl-after-laptop`,className:`fl-intro-story fl-container`,\"aria-labelledby\":`fl-story-title`,children:_jsxs(`div`,{className:`fl-story-surface`,children:[_jsxs(`div`,{className:`fl-story-copy`,\"data-reveal\":true,children:[_jsx(`p`,{className:`fl-eyebrow`,children:`FLEX THEME FOR FILAMENT 5`}),_jsxs(`h2`,{id:`fl-story-title`,children:[`Same Filament.`,_jsx(`br`,{}),_jsx(`span`,{children:`A whole new feel.`})]}),_jsx(`p`,{children:`A visual theme editor, Global Search and keyboard controls for your Filament admin panel. Built on the components you already know.`}),_jsxs(`a`,{className:`fl-text-link`,href:`#fl-design`,children:[`Make it your own `,_jsx(Arrow,{})]})]}),_jsxs(`div`,{className:`fl-story-details`,\"data-reveal\":true,children:[_jsxs(`div`,{children:[_jsx(`span`,{className:`fl-story-index`,children:`01`}),_jsxs(`div`,{children:[_jsx(`h3`,{children:`Native at heart.`}),_jsx(`p`,{children:`Real Filament components. One consistent design language.`})]})]}),_jsxs(`div`,{children:[_jsx(`span`,{className:`fl-story-index`,children:`02`}),_jsxs(`div`,{children:[_jsx(`h3`,{children:`Your signature, throughout.`}),_jsx(`p`,{children:`Colors, type, corners and layouts. All in the theme editor.`})]})]}),_jsxs(`div`,{children:[_jsx(`span`,{className:`fl-story-index`,children:`03`}),_jsxs(`div`,{children:[_jsx(`h3`,{children:`Keep your flow.`}),_jsx(`p`,{children:`Global Search, shortcuts and floating panels. Work stays within reach.`})]})]})]})]})}),_jsxs(`section`,{id:`fl-design`,className:`fl-design fl-container`,\"aria-labelledby\":`fl-design-title`,children:[_jsxs(`div`,{className:`fl-section-heading`,\"data-reveal\":true,children:[_jsxs(`div`,{children:[_jsx(`p`,{className:`fl-eyebrow`,children:`01 / MAKE IT YOURS`}),_jsxs(`h2`,{id:`fl-design-title`,children:[`Your app.`,_jsx(`br`,{}),_jsx(`span`,{children:`Your signature.`})]})]}),_jsxs(`p`,{children:[`A color. A typeface. A softer corner.`,_jsx(`br`,{}),`Change the look. Keep the foundations.`,_jsx(`br`,{}),_jsxs(_components.a,{className:`fl-text-link`,href:docs+`theme-settings/appearance`,children:[`Explore Appearance `,_jsx(Arrow,{})]})]})]}),_jsxs(`div`,{className:`fl-appearance-slider`,\"data-reveal\":true,role:`region`,\"aria-roledescription\":`carousel`,\"aria-label\":`Real FLEX appearances`,children:[_jsx(`div`,{className:`fl-real-panel-images`,children:appearances.map(item=>_jsx(`img`,{className:appearance===item.id?`fl-panel-visible`:``,src:seenAppearances.includes(item.id)?assets+`appearance-`+item.id+`.webp`:undefined,width:`1600`,height:`1100`,alt:appearance===item.id?`Real FLEX Campaign brief with `+item.name+` colors and `+item.font+` typography`:``,\"aria-hidden\":appearance!==item.id,loading:`lazy`,decoding:`async`},item.id))}),_jsxs(`div`,{className:`fl-slider-toolbar`,children:[_jsxs(`div`,{className:`fl-slide-caption`,\"aria-live\":`polite`,children:[_jsxs(`span`,{className:`fl-slide-number`,children:[`0`,appearances.findIndex(item=>item.id===appearance)+1,_jsx(`span`,{children:` / 03`})]}),_jsxs(`div`,{children:[_jsx(`strong`,{children:appearances.find(item=>item.id===appearance).name}),_jsxs(`span`,{children:[appearances.find(item=>item.id===appearance).font,` · `,appearances.find(item=>item.id===appearance).shape]})]})]}),_jsxs(`div`,{className:`fl-slider-navigation`,children:[_jsx(`div`,{className:`fl-slider-progress`,children:appearances.map(item=>_jsx(`button`,{\"aria-label\":`Show `+item.name+` appearance`,\"aria-pressed\":appearance===item.id,onClick:()=>selectAppearance(item.id),children:_jsx(`span`,{})},item.id))}),_jsxs(`div`,{className:`fl-slider-arrows`,children:[_jsx(`button`,{\"aria-label\":`Previous appearance`,onClick:()=>selectAppearance(appearances[(appearances.findIndex(item=>item.id===appearance)+2)%3].id),children:_jsx(Arrow,{})}),_jsx(`button`,{\"aria-label\":`Next appearance`,onClick:()=>selectAppearance(appearances[(appearances.findIndex(item=>item.id===appearance)+1)%3].id),children:_jsx(Arrow,{})})]})]})]})]})]}),_jsx(`section`,{id:`fl-workflow`,className:`fl-search-section`,\"aria-labelledby\":`fl-search-title`,children:_jsxs(`div`,{className:`fl-container fl-search-grid`,children:[_jsxs(`div`,{className:`fl-search-copy`,\"data-reveal\":true,children:[_jsx(`p`,{className:`fl-eyebrow`,children:`02 / LESS LOOKING. MORE DOING.`}),_jsxs(`h2`,{id:`fl-search-title`,children:[`Find it.`,_jsx(`br`,{}),`Act on it.`,_jsx(`br`,{}),_jsx(`em`,{children:`Keep moving.`})]}),_jsx(`p`,{children:`Search people, pages and resources from one place. Open a record, edit it in a modal, or run an authorized action without losing your context.`}),_jsxs(_components.a,{className:`fl-text-link`,href:docs+`global-search/overview`,children:[`Go inside Global Search `,_jsx(Arrow,{})]})]}),_jsxs(`figure`,{className:`fl-search-art fl-real-search`,\"data-reveal\":true,children:[_jsx(`img`,{src:assets+`search.webp`,width:`1724`,height:`1240`,alt:`The real FLEX Global Search modal in dark mode with Discover, Users, Recent and Favorites navigation`,loading:`lazy`,decoding:`async`}),_jsx(`figcaption`,{children:`Everything in reach. Nothing out of place.`})]})]})}),_jsxs(`section`,{className:`fl-features fl-container`,\"aria-labelledby\":`fl-features-title`,children:[_jsxs(`div`,{className:`fl-section-heading`,\"data-reveal\":true,children:[_jsxs(`div`,{children:[_jsx(`p`,{className:`fl-eyebrow`,children:`03 / FORMS, PANELS \u0026 NOTIFICATIONS`}),_jsxs(`h2`,{id:`fl-features-title`,children:[`Small details.`,_jsx(`br`,{}),`Better everyday work.`]})]}),_jsxs(`p`,{children:[`Keep forms clear. Give tasks room.`,_jsx(`br`,{}),`Let updates stay out of the way.`]})]}),_jsxs(`div`,{className:`fl-feature-grid`,children:[_jsxs(_components.a,{className:`fl-feature fl-feature-sheet`,\"data-reveal\":true,href:docs+`components/bottom-sheet`,children:[_jsxs(`div`,{className:`fl-feature-copy`,children:[_jsx(`span`,{className:`fl-feature-number`,children:`01`}),_jsxs(`h3`,{children:[`More room.`,_jsx(`br`,{}),`One smooth move.`]}),_jsx(`p`,{children:`Floating side panels and expandable bottom sheets. Keep the task in focus and the page within reach.`}),_jsx(`span`,{className:`fl-feature-arrow`,children:_jsx(Arrow,{diagonal:true})})]}),_jsx(`img`,{src:assets+`bottom-sheet.webp`,width:`1920`,height:`1080`,alt:`A detached, rounded bottom sheet in FLEX Theme dark mode`,loading:`lazy`,decoding:`async`})]}),_jsxs(_components.a,{className:`fl-feature fl-feature-groups`,\"data-reveal\":true,href:docs+`components/field-groups`,children:[_jsxs(`div`,{className:`fl-feature-copy`,children:[_jsx(`span`,{className:`fl-feature-number`,children:`02`}),_jsxs(`h3`,{children:[`Clear labels.`,_jsx(`br`,{}),`A better flow.`]}),_jsx(`p`,{children:`Field groups pair labels and descriptions with native form controls. Settings that are easier to scan, and easier to use.`}),_jsx(`span`,{className:`fl-feature-arrow`,children:_jsx(Arrow,{diagonal:true})})]}),_jsx(`img`,{src:assets+`field-groups.webp`,width:`1330`,height:`836`,alt:`Workspace overview and Field groups with a switch and a provider select`,loading:`lazy`,decoding:`async`})]}),_jsxs(`article`,{className:`fl-feature fl-feature-notifications`,\"data-reveal\":true,children:[_jsxs(`div`,{className:`fl-feature-copy`,children:[_jsx(`span`,{className:`fl-feature-number`,children:`03`}),_jsxs(`h3`,{children:[`Stay informed.`,_jsx(`br`,{}),`Stay in your flow.`]}),_jsx(`p`,{children:`Stacked notifications expand when you need them and step aside when you don’t.`})]}),_jsxs(`picture`,{className:`fl-notification-preview`,children:[_jsx(`source`,{media:`(prefers-reduced-motion: reduce)`,srcSet:assets+`notification-stack-poster.webp`}),_jsx(`img`,{src:assets+`notification-stack-motion.webp`,width:`1160`,height:`650`,alt:`Close-up of real FLEX notifications in the panel’s upper-right corner, expanding and collapsing as a stack`,loading:`lazy`,decoding:`async`})]})]})]})]}),_jsx(`section`,{className:`fl-workflow-story fl-container`,\"aria-labelledby\":`fl-keys-title`,children:_jsxs(`div`,{className:`fl-keys-story`,\"data-reveal\":true,children:[_jsxs(`div`,{className:`fl-keys-copy`,children:[_jsx(`p`,{className:`fl-eyebrow`,children:`LESS REACHING. MORE DOING.`}),_jsxs(`h2`,{id:`fl-keys-title`,children:[`Your keyboard.`,_jsx(`br`,{}),_jsx(`span`,{children:`A faster workflow.`})]}),_jsx(`p`,{children:`Move through records. Select rows. Open filters. Assign the shortcuts that work for you — and keep your hands on the keyboard.`}),_jsxs(`div`,{className:`fl-key-examples`,\"aria-label\":`Default table shortcuts`,children:[_jsxs(`span`,{children:[_jsxs(`span`,{className:`fl-native-keycaps`,children:[_jsx(`kbd`,{children:`J`}),_jsx(`kbd`,{children:`K`})]}),` Navigate`]}),_jsxs(`span`,{children:[_jsx(`span`,{className:`fl-native-keycaps`,children:_jsx(`kbd`,{children:`A`})}),` Select`]}),_jsxs(`span`,{children:[_jsx(`span`,{className:`fl-native-keycaps`,children:_jsx(`kbd`,{children:`F`})}),` Filter`]})]}),_jsxs(_components.a,{className:`fl-text-link`,href:docs+`workspace/table-shortcuts`,children:[`Explore table shortcuts `,_jsx(Arrow,{})]}),_jsxs(`p`,{className:`fl-recovery-note`,children:[`A change of mind? Undo supported actions when recovery is configured. `,_jsx(_components.a,{href:docs+`workspace/recovery`,children:`See how recovery works.`})]})]}),_jsx(`div`,{className:`fl-keys-image`,children:_jsxs(`picture`,{children:[_jsx(`source`,{media:`(prefers-reduced-motion: reduce)`,srcSet:assets+`table-keyboard-poster.webp`}),_jsx(`img`,{src:assets+`table-keyboard-native.webp`,width:`2200`,height:`1205`,alt:`Real FLEX campaign table: J and K move between rows, A selects and deselects records`,loading:`lazy`,decoding:`async`})]})})]})}),_jsxs(`section`,{id:`fl-announcements`,className:`fl-announcements-showcase fl-container`,\"aria-labelledby\":`fl-announcements-title`,children:[_jsxs(`div`,{className:`fl-section-heading`,\"data-reveal\":true,children:[_jsxs(`div`,{children:[_jsx(`p`,{className:`fl-eyebrow`,children:`YOUR NEWS. PART OF THE EXPERIENCE.`}),_jsxs(`h2`,{id:`fl-announcements-title`,children:[`A little space.`,_jsx(`br`,{}),_jsx(`span`,{children:`A message that matters.`})]})]}),_jsxs(`p`,{children:[`Reach the whole panel or a single page.`,_jsx(`br`,{}),`Rotate your news. Schedule your launch.`,_jsx(`br`,{}),`Count down to what’s next.`]})]}),_jsx(`div`,{className:`fl-announcements-examples`,\"data-reveal\":true,children:[[`rotation`,`Keep the conversation moving.`,`Rotating messages with links, playback controls and dismissal.`],[`colors`,`The right tone for every message.`,`Individual colors, icons and actions. Separate light and dark palettes.`],[`countdown`,`Build up to the moment.`,`Count down to a launch, event or deadline, right inside your panel.`]].map(([id,title,description],index)=>_jsxs(`figure`,{className:`fl-announcement-example fl-announcement-example-`+id,children:[_jsxs(`figcaption`,{children:[_jsxs(`span`,{children:[`0`,index+1]}),_jsxs(`div`,{children:[_jsx(`h3`,{children:title}),_jsx(`p`,{children:description})]})]}),_jsx(`img`,{src:assets+`announcement-`+id+`.webp`,width:`898`,height:`72`,loading:`lazy`,decoding:`async`,alt:`Real FLEX announcement: `+title})]},id))}),_jsxs(`div`,{className:`fl-announcements-footer`,children:[_jsxs(`p`,{children:[`Global or inline. Scheduled or live.`,_jsx(`br`,{}),`Configured in PHP. Styled by FLEX.`]}),_jsxs(_components.a,{className:`fl-text-link`,href:docs+`announcements/overview`,children:[`Explore announcements `,_jsx(Arrow,{})]})]})]}),_jsxs(`section`,{id:`fl-theme-editor`,className:`fl-settings-showcase fl-container`,\"aria-labelledby\":`fl-settings-title`,children:[_jsxs(`div`,{className:`fl-section-heading`,\"data-reveal\":true,children:[_jsxs(`div`,{children:[_jsx(`p`,{className:`fl-eyebrow`,children:`THE THEME EDITOR`}),_jsxs(`h2`,{id:`fl-settings-title`,children:[`One editor.`,_jsx(`br`,{}),_jsx(`span`,{children:`Every side of your theme.`})]})]}),_jsxs(`p`,{children:[`From the first color to the last shortcut.`,_jsx(`br`,{}),`Explore seven tabs for your panel’s`,_jsx(`br`,{}),`appearance, identity and workflow.`]})]}),_jsxs(`div`,{className:`fl-settings-presentation`,\"data-reveal\":true,children:[_jsx(`div`,{className:`fl-settings-tabs`,role:`tablist`,\"aria-label\":`Explore Theme Settings`,children:settingsSlides.map((slide,index)=>_jsxs(`button`,{id:`fl-settings-tab-`+slide.id,type:`button`,role:`tab`,\"aria-selected\":settingsIndex===index,\"aria-controls\":`fl-settings-slide`,onClick:()=>selectSettings(index),onKeyDown:event=>{if(event.key===`ArrowRight`||event.key===`ArrowLeft`){event.preventDefault();const next=(settingsIndex+(event.key===`ArrowRight`?1:6))%7;selectSettings(next);event.currentTarget.parentElement.children[next]?.focus()}},children:[_jsx(`img`,{src:`/docs/assets/settings/`+slide.id+`-icon.svg`,width:`20`,height:`20`,alt:``}),slide.name]},slide.id))}),_jsxs(`div`,{id:`fl-settings-slide`,role:`tabpanel`,\"aria-labelledby\":`fl-settings-tab-`+settingsSlides[settingsIndex].id,className:`fl-settings-slide`,children:[_jsxs(`div`,{className:`fl-settings-caption`,\"aria-live\":`polite`,children:[_jsxs(`div`,{children:[_jsxs(`span`,{className:`fl-settings-counter`,children:[`0`,settingsIndex+1,` / 07`]}),_jsx(`h3`,{children:settingsSlides[settingsIndex].title}),_jsx(`p`,{children:settingsSlides[settingsIndex].description})]}),_jsxs(`div`,{className:`fl-settings-arrows`,children:[_jsx(`button`,{type:`button`,\"aria-label\":`Previous settings tab`,onClick:()=>selectSettings(settingsIndex-1),children:_jsx(Arrow,{})}),_jsx(`button`,{type:`button`,\"aria-label\":`Next settings tab`,onClick:()=>selectSettings(settingsIndex+1),children:_jsx(Arrow,{})})]})]}),_jsx(`div`,{className:`fl-settings-screen`,ref:settingsViewport,tabIndex:`0`,\"aria-label\":settingsSlides[settingsIndex].name+` settings screenshot. Scroll to view all settings.`,onTouchStart:event=>{settingsTouch.current={x:event.touches[0].clientX,y:event.touches[0].clientY}},onTouchEnd:event=>{const start=settingsTouch.current;if(!start)return;const dx=event.changedTouches[0].clientX-start.x,dy=event.changedTouches[0].clientY-start.y;if(Math.abs(dx)>60\u0026\u0026Math.abs(dx)>Math.abs(dy)*1.5)selectSettings(settingsIndex+(dx\u003c0?1:-1));settingsTouch.current=null},children:_jsx(`img`,{src:`/docs/assets/settings/`+settingsSlides[settingsIndex].id+`.webp`,width:`1152`,height:settingsSlides[settingsIndex].height,alt:`Actual FLEX Theme Settings — `+settingsSlides[settingsIndex].name+` tab with all its controls`,loading:`lazy`,decoding:`async`},settingsSlides[settingsIndex].id)}),_jsxs(`div`,{className:`fl-settings-bottom`,children:[_jsxs(`span`,{children:[`Real panel. Real settings. `,_jsx(`span`,{className:`fl-settings-scroll-note`,children:`Scroll the preview to see more.`})]}),_jsxs(_components.a,{href:docs+settingsSlides[settingsIndex].href,children:[`Explore `,settingsSlides[settingsIndex].name,` `,_jsx(Arrow,{diagonal:true})]})]})]})]})]}),_jsx(`section`,{className:`fl-layout-section`,\"aria-labelledby\":`fl-layout-title`,children:_jsxs(`div`,{className:`fl-container`,children:[_jsxs(`div`,{className:`fl-layout-heading`,\"data-reveal\":true,children:[_jsx(`p`,{className:`fl-eyebrow`,children:`04 / A SPACE THAT WORKS FOR YOU`}),_jsxs(`h2`,{id:`fl-layout-title`,children:[`A different point of view.`,_jsx(`br`,{}),_jsx(`span`,{children:`The same attention to detail.`})]}),_jsx(`p`,{children:`Sidebar, topbar or a little of both. Give your workspace the structure it needs.`}),_jsx(`div`,{className:`fl-layout-options`,\"aria-label\":`Preview navigation layouts`,children:[[`sidebar`,`Sidebar`],[`topbar`,`Topbar`],[`combined`,`Sidebar + topbar`]].map(([value,label])=>_jsxs(`button`,{\"aria-pressed\":layout===value,onClick:()=>selectLayout(value),children:[_jsx(LayoutIcon,{variant:value}),label]},value))})]}),_jsx(`div`,{className:`fl-layout-image`,\"data-reveal\":true,children:[`sidebar`,`topbar`,`combined`].map(item=>_jsx(`img`,{className:layout===item?`fl-layout-active`:``,src:seenLayouts.includes(item)?assets+`layout-`+item+`.webp`:undefined,width:`2200`,height:`1238`,alt:item===layout?`FLEX dashboard using `+(item===`combined`?`sidebar and topbar`:item)+` navigation`:``,\"aria-hidden\":layout!==item,loading:`lazy`,decoding:`async`},item))}),_jsxs(_components.a,{className:`fl-text-link fl-layout-link`,href:docs+`theme-settings/layout`,children:[`Explore every layout option `,_jsx(Arrow,{})]})]})}),_jsx(`section`,{id:`fl-integration`,className:`fl-integration`,\"aria-labelledby\":`fl-integration-title`,children:_jsxs(`div`,{className:`fl-container`,children:[_jsxs(`div`,{className:`fl-integration-heading`,\"data-reveal\":true,children:[_jsx(`p`,{className:`fl-eyebrow`,children:`FLEX THEME. NATIVE FILAMENT.`}),_jsxs(`h2`,{id:`fl-integration-title`,children:[`Keep your logic.`,_jsx(`br`,{}),_jsx(`span`,{children:`Change the experience.`})]}),_jsx(`p`,{children:`Keep the forms, tables, actions and permissions your app already relies on. Add FLEX, then shape your colors, typography, branding and layouts in one visual editor.`})]}),_jsxs(`div`,{className:`fl-integration-workbench`,\"data-reveal\":true,children:[_jsxs(`div`,{className:`fl-integration-guide`,children:[_jsx(`span`,{className:`fl-integration-label`,children:`A FAMILIAR STARTING POINT`}),_jsxs(`h3`,{children:[`Your panel.`,_jsx(`br`,{}),`Your codebase.`]}),_jsx(`p`,{children:`Register the plugin in your Panel Provider and add FLEX to your native theme build. The installation guide covers licensing, assets and permissions.`}),_jsxs(_components.a,{className:`fl-button fl-integration-cta`,href:docs+`theme-settings/overview#installation`,children:[`Read the installation guide `,_jsx(Arrow,{})]}),_jsxs(_components.a,{className:`fl-integration-secondary`,href:docs+`theme-settings/panels-permissions`,children:[`Multiple panels \u0026 permissions `,_jsx(Arrow,{diagonal:true})]})]}),_jsxs(`div`,{className:`fl-integration-editor`,children:[_jsx(`div`,{className:`fl-integration-files`,role:`tablist`,\"aria-label\":`FLEX integration examples`,children:[[`php`,`Panel Provider`],[`css`,`Theme CSS`]].map(([id,label])=>_jsxs(`button`,{id:`fl-code-tab-`+id,type:`button`,role:`tab`,\"aria-selected\":integrationTab===id,\"aria-controls\":`fl-code-example`,tabIndex:integrationTab===id?0:-1,onClick:()=>setIntegrationTab(id),onKeyDown:event=>{if(event.key===`ArrowLeft`||event.key===`ArrowRight`){event.preventDefault();setIntegrationTab(id===`php`?`css`:`php`);event.currentTarget.parentElement.children[id===`php`?1:0]?.focus()}},children:[_jsx(`span`,{className:`fl-file-type fl-file-type-`+id,\"aria-hidden\":`true`,children:id===`php`?`PHP`:`CSS`}),label]},id))}),_jsxs(`div`,{id:`fl-code-example`,role:`tabpanel`,\"aria-labelledby\":`fl-code-tab-`+integrationTab,tabIndex:`0`,className:`fl-integration-code`,children:[_jsx(`p`,{className:`fl-integration-filename`,children:integrationTab===`php`?`AdminPanelProvider.php`:`theme.css`}),integrationTab===`php`?_jsx(`pre`,{children:_jsxs(`code`,{children:[_jsx(`span`,{className:`fl-syntax-keyword`,children:`use`}),` `,_jsx(`span`,{className:`fl-syntax-class`,children:`Flex\\\\Theme\\\\FlexThemePlugin`}),`;`,`\n\n`,_jsx(`span`,{className:`fl-syntax-keyword`,children:`return`}),` `,_jsx(`span`,{className:`fl-syntax-variable`,children:`$panel`}),`\n`,` ->`,_jsx(`span`,{className:`fl-syntax-function`,children:`plugin`}),`(`,_jsx(`span`,{className:`fl-syntax-class`,children:`FlexThemePlugin`}),`::`,_jsx(`span`,{className:`fl-syntax-function`,children:`make`}),`())`,`\n`,` ->`,_jsx(`span`,{className:`fl-syntax-function`,children:`viteTheme`}),`(`,`\n`,` `,_jsx(`span`,{className:`fl-syntax-string`,children:`'resources/css/filament/admin/theme.css'`}),`\n`,` );`]})}):_jsx(`pre`,{children:_jsxs(`code`,{children:[_jsx(`span`,{className:`fl-syntax-comment`,children:`/* Keep the native theme imports, then add: */`}),`\n\n`,_jsx(`span`,{className:`fl-syntax-keyword`,children:`@import`}),` `,_jsx(`span`,{className:`fl-syntax-string`,children:`'../../../../vendor/flex/theme/resources/css/theme.css'`}),`;`,`\n`,_jsx(`span`,{className:`fl-syntax-keyword`,children:`@source`}),` `,_jsx(`span`,{className:`fl-syntax-string`,children:`'../../../../vendor/flex/theme/src/**/*.php'`}),`;`,`\n`,_jsx(`span`,{className:`fl-syntax-keyword`,children:`@source`}),` `,_jsx(`span`,{className:`fl-syntax-string`,children:`'../../../../vendor/flex/theme/resources/views/**/*.blade.php'`}),`;`]})})]}),_jsxs(`div`,{className:`fl-integration-install`,children:[_jsxs(`div`,{children:[_jsx(`span`,{children:`AFTER LICENSE SETUP`}),_jsx(`code`,{children:`composer require flex/theme:^0.1`})]}),_jsxs(`button`,{type:`button`,onClick:copyInstall,\"aria-label\":`Copy Composer installation command`,children:[_jsx(`svg`,{viewBox:`0 0 24 24`,fill:`none`,\"aria-hidden\":`true`,children:copied?_jsx(`path`,{d:`m5 12 4 4L19 6`}):_jsxs(_Fragment,{children:[_jsx(`rect`,{x:`8`,y:`8`,width:`12`,height:`12`,rx:`3`}),_jsx(`path`,{d:`M15 4H7a3 3 0 0 0-3 3v8`})]})}),_jsx(`span`,{className:`fl-sr-only`,children:copied?`Copied`:`Copy`})]}),_jsx(`span`,{className:`fl-sr-only`,role:`status`,children:copied?`Installation command copied.`:``})]})]})]}),_jsxs(`div`,{className:`fl-integration-principles`,\"data-reveal\":true,children:[_jsxs(`p`,{children:[_jsx(`span`,{children:`01`}),_jsx(`strong`,{children:`Native components.`}),` Keep the foundations you know.`]}),_jsxs(`p`,{children:[_jsx(`span`,{children:`02`}),_jsx(`strong`,{children:`Visual settings.`}),` Make the design your own.`]}),_jsxs(`p`,{children:[_jsx(`span`,{children:`03`}),_jsx(`strong`,{children:`PHP control.`}),` Set the rules for each panel.`]})]})]})}),_jsxs(`section`,{id:`fl-pricing`,className:`fl-pricing fl-container`,\"aria-labelledby\":`fl-pricing-title`,children:[_jsxs(`div`,{className:`fl-pricing-heading`,\"data-reveal\":true,children:[_jsx(`p`,{className:`fl-eyebrow`,children:`MAKE YOUR NEXT PANEL A FLEX PANEL.`}),_jsxs(`h2`,{id:`fl-pricing-title`,children:[`Buy once.`,_jsx(`br`,{}),_jsx(`span`,{children:`Make it yours.`})]}),_jsxs(`p`,{children:[`Single or Unlimited. No subscription.`,_jsx(`br`,{}),`A full year of free updates with either license.`]})]}),_jsxs(`div`,{className:`fl-pricing-grid`,\"data-reveal\":true,children:[_jsxs(`article`,{className:`fl-price-card fl-price-single`,\"aria-labelledby\":`fl-single-title`,children:[_jsxs(`div`,{className:`fl-price-top`,children:[_jsx(`span`,{className:`fl-price-label`,children:`FOCUS ON WHAT’S NEXT`}),_jsx(`span`,{className:`fl-license-symbol`,\"aria-hidden\":`true`,children:`01`})]}),_jsx(`h3`,{id:`fl-single-title`,children:`Single`}),_jsx(`p`,{className:`fl-price-description`,children:`One project. Make it unmistakably yours.`}),_jsxs(`p`,{className:`fl-price`,children:[_jsx(`span`,{className:`fl-price-currency`,children:`$`}),licensePlans[0].price,_jsx(`span`,{className:`fl-price-unit`,children:`USD`})]}),_jsxs(`p`,{className:`fl-price-payment`,children:[_jsx(`strong`,{children:`One-time payment.`}),` No subscription.`]}),_jsxs(_components.a,{className:`fl-price-cta`,href:checkout,children:[`Get Single `,_jsx(Arrow,{})]}),_jsxs(`div`,{className:`fl-price-includes`,children:[_jsx(`span`,{children:`THE COMPLETE FLEX EXPERIENCE`}),_jsxs(`p`,{children:[`All FLEX features.`,_jsx(`br`,{}),_jsx(`strong`,{children:`All updates free for one year.`})]})]})]}),_jsxs(`article`,{className:`fl-price-card fl-price-unlimited`,\"aria-labelledby\":`fl-unlimited-title`,children:[_jsxs(`div`,{className:`fl-price-top`,children:[_jsx(`span`,{className:`fl-price-label`,children:`KEEP THE POSSIBILITIES OPEN`}),_jsx(`span`,{className:`fl-license-symbol`,\"aria-hidden\":`true`,children:`∞`})]}),_jsx(`h3`,{id:`fl-unlimited-title`,children:`Unlimited`}),_jsx(`p`,{className:`fl-price-description`,children:`Your next project. And the one after that.`}),_jsxs(`p`,{className:`fl-price`,children:[_jsx(`span`,{className:`fl-price-currency`,children:`$`}),licensePlans[1].price,_jsx(`span`,{className:`fl-price-unit`,children:`USD`})]}),_jsxs(`p`,{className:`fl-price-payment`,children:[_jsx(`strong`,{children:`One-time payment.`}),` No subscription.`]}),_jsxs(_components.a,{className:`fl-price-cta`,href:checkout,children:[`Get Unlimited `,_jsx(Arrow,{})]}),_jsxs(`div`,{className:`fl-price-includes`,children:[_jsx(`span`,{children:`THE COMPLETE FLEX EXPERIENCE`}),_jsxs(`p`,{children:[`All FLEX features. Unlimited projects.`,_jsx(`br`,{}),_jsx(`strong`,{children:`All updates free for one year.`})]})]})]})]}),_jsxs(`p`,{className:`fl-pricing-note`,children:[`One payment. One year of updates included. Prices in USD. `,_jsxs(_components.a,{href:docs+`theme-settings/overview`,children:[`Explore the documentation `,_jsx(Arrow,{diagonal:true})]})]})]}),_jsxs(`section`,{className:`fl-faq fl-container`,\"aria-labelledby\":`fl-faq-title`,children:[_jsxs(`div`,{\"data-reveal\":true,children:[_jsx(`p`,{className:`fl-eyebrow`,children:`A FEW THINGS WORTH KNOWING`}),_jsx(`h2`,{id:`fl-faq-title`,children:`Before you build.`})]}),_jsxs(`div`,{className:`fl-faq-items`,\"data-reveal\":true,children:[_jsxs(`details`,{children:[_jsxs(`summary`,{children:[`What is FLEX Theme?`,_jsx(`span`,{\"aria-hidden\":`true`,children:`+`})]}),_jsx(`p`,{children:`FLEX Theme is a design and workflow toolkit for Filament 5. It combines a configurable admin panel theme with Global Search, keyboard navigation, announcements, Field groups and floating panels.`})]}),_jsxs(`details`,{children:[_jsxs(`summary`,{children:[`Can I customize my Filament panel without writing CSS?`,_jsx(`span`,{\"aria-hidden\":`true`,children:`+`})]}),_jsxs(`p`,{children:[`Yes. Theme Settings lets you change colors, typography, corner styles, branding and layouts visually. Register FLEX in your Panel Provider first. Announcements and advanced integrations are configured in PHP. `,_jsx(_components.a,{href:docs+`theme-settings/overview`,children:`Explore Theme Settings.`})]})]}),_jsxs(`details`,{children:[_jsxs(`summary`,{children:[`Does FLEX support keyboard navigation in tables?`,_jsx(`span`,{\"aria-hidden\":`true`,children:`+`})]}),_jsxs(`p`,{children:[`Yes. Navigate rendered records, select rows, open filters and move between pages. Record your own shortcuts in Theme Settings. Supported actions can also offer Undo when you configure recovery. `,_jsx(_components.a,{href:docs+`workspace/table-shortcuts`,children:`See table controls.`})]})]}),_jsxs(`details`,{children:[_jsxs(`summary`,{children:[`Can different panels have different settings?`,_jsx(`span`,{\"aria-hidden\":`true`,children:`+`})]}),_jsxs(`p`,{children:[`Yes. Each panel can have its own branding and saved configuration. PHP can enforce settings, hide individual tabs or disable the settings page. Your application’s permissions control who can make changes. `,_jsx(_components.a,{href:docs+`theme-settings/panels-permissions`,children:`Read about panels and permissions.`})]})]}),_jsxs(`details`,{children:[_jsxs(`summary`,{children:[`Is FLEX Theme a subscription?`,_jsx(`span`,{\"aria-hidden\":`true`,children:`+`})]}),_jsx(`p`,{children:`No. Single and Unlimited are one-time purchases. Both include every update released during the first year, at no extra cost.`})]}),_jsxs(`details`,{children:[_jsxs(`summary`,{children:[`Which Filament and PHP versions do I need?`,_jsx(`span`,{\"aria-hidden\":`true`,children:`+`})]}),_jsxs(`p`,{children:[`FLEX Theme is built for Filament 5 and PHP 8.3 or later. The installation guide covers the native theme build, package registration and license setup. `,_jsx(_components.a,{href:docs+`theme-settings/overview#installation`,children:`Read the installation guide.`})]})]})]})]}),_jsxs(`section`,{className:`fl-docs-section fl-container`,\"aria-labelledby\":`fl-docs-title`,\"data-reveal\":true,children:[_jsxs(`div`,{className:`fl-docs-heading`,children:[_jsxs(`div`,{children:[_jsx(`p`,{className:`fl-eyebrow`,children:`THE DOCUMENTATION`}),_jsx(`h2`,{id:`fl-docs-title`,children:`Get into the details.`})]}),_jsx(`span`,{children:`Everything you need to make it yours.`})]}),_jsx(`div`,{className:`fl-doc-links`,children:[[`01`,`Theme Settings`,`Appearance, colors, brand and panel configuration.`,`theme-settings/overview`],[`02`,`Global Search`,`Resources, categories, commands and native actions.`,`global-search/overview`],[`03`,`Announcements`,`Timely messages, rotation and live updates.`,`announcements/overview`],[`04`,`Components`,`Field groups, floating panels and bottom sheets.`,`components/field-groups`],[`05`,`Keyboard \u0026 Tables`,`Shortcuts, selection and eligible undo actions.`,`workspace/table-shortcuts`],[`06`,`PHP \u0026 Permissions`,`Multiple panels, access and code-owned settings.`,`theme-settings/panels-permissions`]].map(([number,title,description,href])=>_jsxs(_components.a,{href:docs+href,children:[_jsx(`span`,{children:number}),_jsxs(`div`,{children:[_jsx(`h3`,{children:title}),_jsx(`p`,{children:description})]}),_jsx(Arrow,{diagonal:true})]},number))})]}),_jsx(`footer`,{className:`fl-footer`,children:_jsxs(`div`,{className:`fl-container`,children:[_jsxs(`div`,{className:`fl-footer-top`,children:[_jsxs(_components.a,{className:`fl-brand`,href:docs+`index`,\"aria-label\":`FLEX Theme home`,children:[_jsx(`img`,{src:assets+`wordmark.svg`,width:`100`,height:`30`,alt:`FLEX`}),_jsx(`span`,{children:`Theme`})]}),_jsxs(`p`,{children:[`Your panel.`,_jsx(`br`,{}),_jsx(`em`,{children:`Reimagined.`})]}),_jsxs(_components.a,{className:`fl-footer-film`,href:filmUrl,onClick:openFilm,children:[`Watch the film `,_jsx(`span`,{children:`▶`})]})]}),_jsxs(`div`,{className:`fl-footer-bottom`,children:[_jsx(`span`,{children:`FLEX Theme · Built for Filament 5`}),_jsx(_components.a,{href:docs+`theme-settings/overview`,children:`Documentation`}),_jsxs(`a`,{href:`https://github.com/janczakb/filament-flex-theme`,children:[`GitHub `,_jsx(Arrow,{diagonal:true})]}),_jsx(`a`,{href:`#fl-main`,children:`Back to top ↑`})]})]})}),_jsxs(`dialog`,{className:`fl-film-dialog`,ref:film,\"aria-label\":`Meet FLEX Theme — product film`,onClick:event=>{if(event.target===event.currentTarget)closeFilm()},onClose:()=>setFilmOpen(false),children:[_jsxs(`div`,{className:`fl-film-header`,children:[_jsx(`span`,{children:`Meet FLEX Theme`}),_jsx(`button`,{type:`button`,className:`fl-film-close`,onClick:closeFilm,\"aria-label\":`Close film`,children:_jsx(`svg`,{viewBox:`0 0 24 24`,fill:`none`,\"aria-hidden\":`true`,children:_jsx(`path`,{d:`m6 6 12 12M18 6 6 18`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`})})})]}),filmOpen\u0026\u0026_jsx(`iframe`,{src:`https://www.youtube-nocookie.com/embed/POkDG3aMmgw?autoplay=1\u0026rel=0`,title:`FLEX Theme for Filament — product film`,allow:`accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share`,allowFullScreen:true,referrerPolicy:`strict-origin-when-cross-origin`}),_jsx(_components.a,{className:`fl-film-youtube`,href:filmUrl,target:`_blank`,rel:`noopener noreferrer`,children:`Watch on YouTube ↗`})]})]})};function _createMdxContent(props){const{_MdxComponentBoundary}={..._provideComponents(),...props.components};if(!_MdxComponentBoundary)_missingMdxReference(`_MdxComponentBoundary`,true);return _jsx(_MdxComponentBoundary,{name:`FlexHome`,children:_jsx(FlexHome,{})})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{FlexHome,default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"codeStyling":{"theme":{"light":"github-light","dark":"github-dark"}},"config":{},"pageMetadata":{"title":"Filament 5 Theme \u0026 Visual Panel Editor","description":"Give your Filament 5 admin panel a new look with FLEX Theme. Visual theme settings, Global Search, keyboard shortcuts and more. Buy once, with a year of updates.","canonical":"https://flex-theme.bjanczak.com/docs","og:title":"FLEX Theme — Filament 5 Theme \u0026 Visual Editor","og:description":"Your colors. Your type. Your workflow. Meet the Filament 5 theme with a visual editor, Global Search and keyboard controls. One-time payment.","og:image":"https://flex-theme.bjanczak.com/docs/assets/home/social-preview.png","og:image:alt":"FLEX Theme for Filament 5 with a real campaign dashboard","twitter:image":"https://flex-theme.bjanczak.com/docs/assets/home/social-preview.png","twitter:image:alt":"FLEX Theme for Filament 5 with a real campaign dashboard","mode":"custom","href":"/docs/index"}}},"mdxSourceWithNoJs":null,"noJsSplices":[[19,69,"jsx:_jsx}=arguments["],[147,49273,"null;function _creat"]]},"mdxExtracts":{"tableOfContents":[],"codeExamples":{}},"jsLinks":["/_mintlify/custom/flex/836fa310f92e66d3/snippets/laptop-runtime.js"],"subdomain":"flex","siteName":"FLEX Theme","title":"FLEX Theme — Filament 5 Theme \u0026 Visual Editor","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-10-26T04:56:15.600Z","originalFileLocation":"docs/index.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=\"Give your Filament 5 admin panel a new look with FLEX Theme. Visual theme settings, Global Search, keyboard shortcuts and more. Buy once, with a year of updates.\">\u003cmeta data-mint-head name=\"application-name\" content=\"FLEX Theme\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/flex/2UB-BcRFA89lBnAk/_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/flex/2UB-BcRFA89lBnAk/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/flex/2UB-BcRFA89lBnAk/_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/flex/2UB-BcRFA89lBnAk/_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/flex/2UB-BcRFA89lBnAk/_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/flex/2UB-BcRFA89lBnAk/_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/flex/2UB-BcRFA89lBnAk/_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/flex/2UB-BcRFA89lBnAk/_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/flex/2UB-BcRFA89lBnAk/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"FLEX Theme — Filament 5 Theme \u0026amp; Visual Editor\">\u003cmeta data-mint-head property=\"og:description\" content=\"Your colors. Your type. Your workflow. Meet the Filament 5 theme with a visual editor, Global Search and keyboard controls. One-time payment.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"FLEX Theme\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://flex-theme.bjanczak.com/docs\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://flex-theme.bjanczak.com/docs/assets/home/social-preview.png\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"FLEX Theme — Filament 5 Theme \u0026amp; Visual Editor\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Your colors. Your type. Your workflow. Meet the Filament 5 theme with a visual editor, Global Search and keyboard controls. One-time payment.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://flex-theme.bjanczak.com/docs/assets/home/social-preview.png\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/flex/2UB-BcRFA89lBnAk/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"FLEX Theme\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#5B49D6\">\u003cmeta data-mint-head name=\"og:locale\" content=\"en_US\">\u003clink data-mint-head rel=\"canonical\" href=\"https://flex-theme.bjanczak.com/docs\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/docs.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://flex-theme.bjanczak.com/#organization\",\"name\":\"FLEX Theme\",\"url\":\"https://flex-theme.bjanczak.com/\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/flex/zLBYbWBAaOMIxHbJ/docs/assets/logo-light.svg?fit=max\u0026auto=format\u0026n=zLBYbWBAaOMIxHbJ\u0026q=85\u0026s=2547735ffbc9accd583cb884caeb8429\"}},{\"@type\":\"WebSite\",\"@id\":\"https://flex-theme.bjanczak.com#website\",\"name\":\"FLEX Theme\",\"url\":\"https://flex-theme.bjanczak.com\",\"publisher\":{\"@id\":\"https://flex-theme.bjanczak.com/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://flex-theme.bjanczak.com/docs#webpage\",\"url\":\"https://flex-theme.bjanczak.com/docs\",\"name\":\"Filament 5 Theme \u0026 Visual Panel Editor\",\"description\":\"Give your Filament 5 admin panel a new look with FLEX Theme. Visual theme settings, Global Search, keyboard shortcuts and more. Buy once, with a year of updates.\",\"dateModified\":\"2026-10-26T04:56:15.600Z\",\"isPartOf\":{\"@id\":\"https://flex-theme.bjanczak.com#website\"}},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://flex-theme.bjanczak.com/docs#article\",\"headline\":\"Filament 5 Theme \u0026 Visual Panel Editor\",\"name\":\"Filament 5 Theme \u0026 Visual Panel Editor\",\"description\":\"Give your Filament 5 admin panel a new look with FLEX Theme. Visual theme settings, Global Search, keyboard shortcuts and more. Buy once, with a year of updates.\",\"url\":\"https://flex-theme.bjanczak.com/docs\",\"mainEntityOfPage\":{\"@id\":\"https://flex-theme.bjanczak.com/docs#webpage\"},\"image\":\"https://flex-theme.bjanczak.com/docs/assets/home/social-preview.png\",\"dateModified\":\"2026-10-26T04:56:15.600Z\",\"publisher\":{\"@id\":\"https://flex-theme.bjanczak.com/#organization\"},\"isPartOf\":{\"@id\":\"https://flex-theme.bjanczak.com#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"FLEX Theme\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"FLEX Theme","nav":{"global":null,"tabs":[{"tab":"Home","pages":[{"title":"Filament 5 Theme \u0026 Visual Panel Editor","mode":"custom","href":"/docs"}]},{"tab":"Theme Settings","pages":[{"title":"Theme Settings","href":"/docs/theme-settings/overview"}]},{"tab":"Global Search","pages":[{"title":"Global Search","href":"/docs/global-search/overview"}]},{"tab":"Announcements","pages":[{"title":"Announcements","href":"/docs/announcements/overview"}]},{"tab":"Components","pages":[{"title":"Components","href":"/docs/components/field-groups"}]},{"tab":"Keyboard \u0026 Tables","pages":[{"title":"Keyboard \u0026 Tables","href":"/docs/workspace/keyboard"}]}]},"title":"FLEX Theme — Filament 5 Theme \u0026 Visual Editor","buildId":"dpl_cadrRc5H9XQiJQbDFN5mcYRs2PAj","deploymentId":"dpl_cadrRc5H9XQiJQbDFN5mcYRs2PAj","dynamics":[],"chunks":[]}