elastic · weronikaolejniczak · Mar 18, 2026 · Mar 18, 2026 · Mar 18, 2026 · Mar 18, 2026
@@ -73,6 +73,7 @@ export const DemoActionsBar = ({
       </EuiButton>
       {extraActions.map((ActionComponent) => (
         <ActionComponent
+          key={ActionComponent.displayName ?? ActionComponent.name}
           sources={sources}
           extraFiles={extraFiles}
           activeSource={activeSource}

@@ -69,7 +69,24 @@ export type Options = {
 const processTsxSource = (source: string) => {
   // jsxImportSource pragma is needed in CodeSandbox as it doesn't seem
   // to support that setting via tsconfig.json
-  return `/** @jsxImportSource @emotion/react */\n${source}`;
+  let processed = `/** @jsxImportSource @emotion/react */\n${source}`;
+
+  // Inject `@elastic/charts` CSS for demos that use the charts library,
+  // since CodeSandbox doesn't load it globally unlike the docs site
+  if (source.includes('@elastic/charts')) {
+    // Match the closing line of the @elastic/charts import (handles both
+    // single-line and multi-line imports, and both quote styles)
+    processed = processed.replace(
+      /^(.*from ['"]@elastic\/charts['"];)$/m,
+      [
+        '$1',
+        "import '@elastic/charts/dist/theme_only_light.css';",
+        "import '@elastic/charts/dist/theme_only_dark.css';",
+      ].join('\n')
+    );
+  }
+
+  return processed;
 };
 
 export const createOpenInCodeSandboxAction =

@@ -4,110 +4,174 @@ import { EuiSelect, useEuiTheme } from '@elastic/eui';
 
 import { Demo } from '@elastic/eui-docusaurus-theme/components';
 
+// @ts-ignore - webpack url-loader
+import pageNotFoundDarkUrl from '!url-loader!../../../../static/images/empty_prompt/pageNotFound--dark.png';
+// @ts-ignore - webpack url-loader
+import pageNotFoundLightUrl from '!url-loader!../../../../static/images/empty_prompt/pageNotFound--light.png';
+// @ts-ignore - webpack url-loader
+import accessDeniedDarkUrl from '!url-loader!../../../../static/images/empty_prompt/accessDenied--dark.png';
+// @ts-ignore - webpack url-loader
+import accessDeniedLightUrl from '!url-loader!../../../../static/images/empty_prompt/accessDenied--light.png';
+
 const types: Array<{
   value: string;
   text: string;
-  code: (colorMode: 'DARK' | 'LIGHT') => string;
+  code: string;
+  scope: Record<string, unknown>;
+  extraFiles: Record<string, string>;
 }> = [
   {
     value: 'errorPages',
     text: 'Page not found',
-    code: (colorMode) => `<EuiEmptyPrompt
-  color="subdued"
-  icon={
-    <EuiImage
-      size="fullWidth"
-      src="${
-        colorMode === 'DARK'
-          ? '/images/empty_prompt/pageNotFound--dark.png'
-          : '/images/empty_prompt/pageNotFound--light.png'
-      }"
-      alt="An outer space illustration. In the background is a large moon and two planets. In the foreground is an astronaut floating in space and the numbers '404'."
+    scope: {
+      pageNotFoundDark: pageNotFoundDarkUrl,
+      pageNotFoundLight: pageNotFoundLightUrl,
+    },
+    extraFiles: {
+      'pageNotFound--dark.ts': `export default "${pageNotFoundDarkUrl}";`,
+      'pageNotFound--light.ts': `export default "${pageNotFoundLightUrl}";`,
+    },
+    code: `import React from 'react';
+import {
+  EuiEmptyPrompt,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiImage,
+  useEuiTheme,
+} from '@elastic/eui';
+import pageNotFoundDark from './pageNotFound--dark';
+import pageNotFoundLight from './pageNotFound--light';
+
+export default () => {
+  const { colorMode } = useEuiTheme();
+  return (
+    <EuiEmptyPrompt
+      color="subdued"
+      icon={
+        <EuiImage
+          size="fullWidth"
+          src={colorMode === 'DARK' ? pageNotFoundDark : pageNotFoundLight}
+          alt="An outer space illustration. In the background is a large moon and two planets. In the foreground is an astronaut floating in space and the numbers '404'."
+        />
+      }
+      title={<h2>Page not found</h2>}
+      layout="vertical"
+      body={
+        <p>
+          We can&apos;t find the page you&apos;re looking for. It might have
+          been removed, renamed, or it didn&apos;t exist in the first place.
+        </p>
+      }
+      actions={[
+        <EuiButton color="primary" fill>
+          Home
+        </EuiButton>,
+        <EuiButtonEmpty iconType="chevronSingleLeft" flush="both">
+          Go back
+        </EuiButtonEmpty>,
+      ]}
     />
-  }
-  title={<h2>Page not found</h2>}
-  layout="vertical"
-  body={
-    <p>
-      We can&apos;t find the page you&apos;re looking for. It might have
-      been removed, renamed, or it didn&apos;t exist in the first place.
-    </p>
-  }
-  actions={[
-    <EuiButton color="primary" fill>
-      Home
-    </EuiButton>,
-    <EuiButtonEmpty iconType="chevronSingleLeft" flush="both">
-      Go back
-    </EuiButtonEmpty>,
-  ]}
-/>`,
+  );
+};`,
   },
   {
     value: 'noPrivileges',
     text: 'No permission',
-    code: (colorMode) => `<EuiEmptyPrompt
-  color="subdued"
-  icon={
-    <EuiImage
-      size="fullWidth"
-      src="${
-        colorMode === 'DARK'
-          ? '/images/empty_prompt/accessDenied--dark.png'
-          : '/images/empty_prompt/accessDenied--light.png'
-      }"
-      alt=""
+    scope: {
+      accessDeniedDark: accessDeniedDarkUrl,
+      accessDeniedLight: accessDeniedLightUrl,
+    },
+    extraFiles: {
+      'accessDenied--dark.ts': `export default "${accessDeniedDarkUrl}";`,
+      'accessDenied--light.ts': `export default "${accessDeniedLightUrl}";`,
+    },
+    code: `import React from 'react';
+import {
+  EuiEmptyPrompt,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiImage,
+  useEuiTheme,
+} from '@elastic/eui';
+import accessDeniedDark from './accessDenied--dark';
+import accessDeniedLight from './accessDenied--light';
+
+export default () => {
+  const { colorMode } = useEuiTheme();
+  return (
+    <EuiEmptyPrompt
+      color="subdued"
+      icon={
+        <EuiImage
+          size="fullWidth"
+          src={colorMode === 'DARK' ? accessDeniedDark : accessDeniedLight}
+          alt=""
+        />
+      }
+      title={<h2>Access denied</h2>}
+      layout="vertical"
+      body={
+        <p>
+          Sorry to rain on your parade, but you don't have permissions to access
+          this page.
+        </p>
+      }
+      actions={[
+        <EuiButton color="primary" fill>
+          Home
+        </EuiButton>,
+        <EuiButtonEmpty iconType="chevronSingleLeft" flush="both">
+          Go back
+        </EuiButtonEmpty>,
+      ]}
     />
-  }
-  title={<h2>Access denied</h2>}
-  layout="vertical"
-  body={
-    <p>
-      Sorry to rain on your parade, but you don't have permissions to access
-      this page.
-    </p>
-  }
-  actions={[
-    <EuiButton color="primary" fill>
-      Home
-    </EuiButton>,
-    <EuiButtonEmpty iconType="chevronSingleLeft" flush="both">
-      Go back
-    </EuiButtonEmpty>,
-  ]}
-/>`,
+  );
+};`,
   },
   {
     value: 'licenseUpgrade',
     text: 'License upgrade',
-    code: () => `<EuiEmptyPrompt
-  color="subdued"
-  iconType="logoKibana"
-  title={<h2>Do more with Kibana!</h2>}
-  layout="vertical"
-  hasBorder
-  body={
-    <p>
-      Start a free trial or upgrade your license to use anomaly detection.
-    </p>
-  }
-  actions={[
-    <EuiButton color="primary" fill>
-      Upgrade
-    </EuiButton>,
-    <EuiButtonEmpty>Start a free trial</EuiButtonEmpty>,
-  ]}
-  footer={
-    <>
-      <EuiTitle size="xxs">
-        <h3>Want to learn more?</h3>
-      </EuiTitle>
-      <EuiLink href="#" target="_blank">
-        Read the docs
-      </EuiLink>
-    </>
-  }
-/>`,
+    scope: {},
+    extraFiles: {},
+    code: `import React from 'react';
+import {
+  EuiEmptyPrompt,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiTitle,
+  EuiLink,
+} from '@elastic/eui';
+
+export default () => (
+  <EuiEmptyPrompt
+    color="subdued"
+    iconType="logoKibana"
+    title={<h2>Do more with Kibana!</h2>}
+    layout="vertical"
+    hasBorder
+    body={
+      <p>
+        Start a free trial or upgrade your license to use anomaly detection.
+      </p>
+    }
+    actions={[
+      <EuiButton color="primary" fill>
+        Upgrade
+      </EuiButton>,
+      <EuiButtonEmpty>Start a free trial</EuiButtonEmpty>,
+    ]}
+    footer={
+      <>
+        <EuiTitle size="xxs">
+          <h3>Want to learn more?</h3>
+        </EuiTitle>
+        <EuiLink href="#" target="_blank">
+          Read the docs
+        </EuiLink>
+      </>
+    }
+  />
+);`,
   },
 ];
 
@@ -136,8 +200,12 @@ export default () => {
         aria-label="Empty prompt examples"
       />
 
-      <Demo key={`${selectedType.value}--${colorMode}`}>
-        {selectedType.code(colorMode)}
+      <Demo
+        key={`${selectedType.value}--${colorMode}`}
+        scope={selectedType.scope}
+        extraFiles={selectedType.extraFiles}
+      >
+        {selectedType.code}
       </Demo>
     </>
   );

@@ -4,7 +4,8 @@ keywords: [EuiEmptyPrompt]
 
 # Empty prompt
 
-import useBaseUrl from '@docusaurus/useBaseUrl';
+import illustrationUrl from '!url-loader!../../../../static/images/empty_prompt/illustration.svg';
+import illustrationSource from '!raw-loader!../../../../static/images/empty_prompt/illustration.svg';
 
 The **EuiEmptyPrompt** is the building block to create an empty state. You can use it as a placeholder for any type of empty content. They are especially helpful for replacing entire pages or parts of a product that contain no content.
 
@@ -173,7 +174,7 @@ You can supply a `layout` of either `"horizontal"` or `"vertical"` with the defa
 
 When you have longer body text with multiple calls to action, you can use the `horizontal` layout. This layout works best when you can provide a larger graphic like an illustration as the `icon`. For consistency, we recommend providing the illustration using a [EuiImage](../image.mdx) with `size="fullWidth"`.
 
-<Demo scope={{ useBaseUrl }}>
+<Demo scope={{ illustration: illustrationUrl }} extraFiles={{ 'illustration.svg': illustrationSource }}>
   ```tsx
   import React from 'react';
   import {
@@ -183,12 +184,13 @@ When you have longer body text with multiple calls to action, you can use the `h
     EuiLink,
     EuiImage,
   } from '@elastic/eui';
+  import illustration from './illustration.svg';
 
   export default () => {
     return (
       <>
         <EuiEmptyPrompt
-          icon={<EuiImage size="fullWidth" src={useBaseUrl('/images/empty_prompt/illustration.svg')} alt="" />}
+          icon={<EuiImage size="fullWidth" src={illustration} alt="" />}
           title={<h2>Create your first visualization</h2>}
           layout="horizontal"
           color="plain"
@@ -240,7 +242,7 @@ When using a **EuiEmptyPrompt** in a [EuiPageTemplate](../../templates/page-temp
 
 The following example shows the usage of the [EuiPageTemplate.EmptyPrompt](../../templates/page-template/index.mdx#empty-pages-or-content) namespaced component.
 
-<Demo scope={{ useBaseUrl }}>
+<Demo scope={{ illustration: illustrationUrl }} extraFiles={{ 'illustration.svg': illustrationSource }}>
   ```tsx
   import React from 'react';
   import {
@@ -250,12 +252,13 @@ The following example shows the usage of the [EuiPageTemplate.EmptyPrompt](../..
     EuiLink,
     EuiImage,
   } from '@elastic/eui';
+  import illustration from './illustration.svg';
 
   export default () => (
     <EuiPageTemplate minHeight="0">
       <EuiPageTemplate.EmptyPrompt
         title={<h2>Create your first visualization</h2>}
-        icon={<EuiImage size="fullWidth" src={useBaseUrl('/images/empty_prompt/illustration.svg')} alt="" />}
+        icon={<EuiImage size="fullWidth" src={illustration} alt="" />}
         color="plain"
         layout="horizontal"
         body={
@@ -298,6 +301,7 @@ You can then tie multiple types of empty states together to create a seamless lo
 )}>
   ```tsx
   import React, { useState, useEffect } from 'react';
+  import { css } from '@emotion/react';
   import {
     EuiPageTemplate,
     EuiLoadingLogo,