palantir · ggdouglas · Jan 15, 2025 · Jan 16, 2025 · Jan 16, 2025 · Jan 16, 2025
diff --git a/packages/demo-app/package.json b/packages/demo-app/package.json
@@ -23,6 +23,7 @@
         "@blueprintjs/icons": "workspace:^",
         "@blueprintjs/select": "workspace:^",
         "@blueprintjs/table": "workspace:^",
+        "@codesandbox/sandpack-react": "^2.19.10",
         "classnames": "^2.3.1",
         "lodash": "^4.17.21",
         "normalize.css": "^8.0.1",

diff --git a/packages/demo-app/src/examples/Examples.tsx b/packages/demo-app/src/examples/Examples.tsx
@@ -1,17 +1,5 @@
-/*
- * Copyright 2021 Palantir Technologies, Inc. All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
+/* !
+ * (c) Copyright 2024 Palantir Technologies Inc. All rights reserved.
  */
 
 import classNames from "classnames";
@@ -36,6 +24,7 @@ import { InputExample } from "./InputExample";
 import { MenuExample } from "./MenuExample";
 import { NonIdealStateExample } from "./NonIdealStateExample";
 import { PopoverExample } from "./PopoverExample";
+import { SandpackExample } from "./SandpackExample";
 import { SliderExample } from "./SliderExample";
 import { SpinnerExample } from "./SpinnerExample";
 import { SwitchExample } from "./SwitchExample";
@@ -52,7 +41,6 @@ export const Examples: React.FC = () => {
     return (
         <div className="examples-root">
             <ExamplesContainer />
-            <ExamplesContainer isDark={true} />
         </div>
     );
 };
@@ -63,6 +51,7 @@ const ExamplesContainer: React.FC<{ isDark?: boolean }> = ({ isDark = false }) =
     const className = isDark ? Classes.DARK : undefined;
     return (
         <div className={classNames("examples-container", className)}>
+            <SandpackExample />
             <BreadcrumbExample />
             <ButtonExample />
             <ButtonGroupExample />

diff --git a/packages/demo-app/src/examples/SandpackExample.tsx b/packages/demo-app/src/examples/SandpackExample.tsx
@@ -0,0 +1,21 @@
+/* !
+ * (c) Copyright 2025 Palantir Technologies Inc. All rights reserved.
+ */
+
+import { Sandpack } from "@codesandbox/sandpack-react";
+import * as React from "react";
+
+const app = `import { Button } from "@blueprintjs/core";
+import "@blueprintjs/core/lib/css/blueprint.css";
+
+export default function App() {
+    return <Button intent="primary">Hello Sandpack</Button>;
+}`;
+
+const dependencies = {
+    "@blueprintjs/core": "^5.16.1",
+};
+
+export const SandpackExample = () => {
+    return <Sandpack template="react-ts" files={{ "/App.tsx": app }} customSetup={{ dependencies }} />;
+};
diff --git a/packages/demo-app/src/styles/_examples.scss b/packages/demo-app/src/styles/_examples.scss
@@ -20,6 +20,7 @@ $dark-intent-danger-text: $red5;
   background-color: $light-gray2;
   display: flex;
   flex-direction: column;
+  gap: 10px;
   padding: 10px;
   width: 100%;
 

diff --git a/packages/docs-app/src/examples/core-examples/buttonExamples.tsx b/packages/docs-app/src/examples/core-examples/buttonExamples.tsx
@@ -2,184 +2,190 @@
  * (c) Copyright 2024 Palantir Technologies Inc. All rights reserved.
  */
 
-import dedent from "dedent";
 import * as React from "react";
 
-import { AnchorButton, Button, Icon, Tooltip } from "@blueprintjs/core";
 import { CodeExample, type ExampleProps } from "@blueprintjs/docs-theme";
 
 export const ButtonBasicExample: React.FC<ExampleProps> = props => {
-    const code = `<Button text="Click Me" />`;
+    const code = `import { Button } from '@blueprintjs/core';
+
+export default function App() {
     return (
-        <CodeExample code={code} {...props}>
-            <Button text="Click Me" />
-        </CodeExample>
+        <Button text="Click Me" />
     );
+}`;
+    return <CodeExample code={code} {...props} />;
 };
 
 export const ButtonIntentExample: React.FC<ExampleProps> = props => {
-    const code = dedent`
-        <Button text="Primary" intent="primary" />
-        <Button text="Success" intent="success" />
-        <Button text="Warning" intent="warning" />
-        <Button text="Danger" intent="danger" />`;
+    const code = `import { Button } from '@blueprintjs/core';
+
+export default function App() {
     return (
-        <CodeExample code={code} {...props}>
+        <>
             <Button text="Primary" intent="primary" />
             <Button text="Success" intent="success" />
             <Button text="Warning" intent="warning" />
             <Button text="Danger" intent="danger" />
-        </CodeExample>
+        </>
     );
+}`;
+    return <CodeExample code={code} {...props} />;
 };
 
 export const ButtonMinimalExample: React.FC<ExampleProps> = props => {
-    const code = dedent`
-        <Button text="Minimal" minimal={true} />
-        <Button text="Primary" minimal={true} intent="primary" />
-        <Button text="Disabled" minimal={true} disabled={true} />`;
+    const code = `import { Button } from '@blueprintjs/core';
+
+export default function App() {
     return (
-        <CodeExample code={code} {...props}>
+        <>
             <Button text="Minimal" minimal={true} />
             <Button text="Primary" minimal={true} intent="primary" />
             <Button text="Disabled" minimal={true} disabled={true} />
-        </CodeExample>
+        </>
     );
+}`;
+    return <CodeExample code={code} {...props} />;
 };
 
 export const ButtonOutlinedExample: React.FC<ExampleProps> = props => {
-    const code = dedent`
-        <Button text="Outlined" outlined={true} />
-        <Button text="Primary" outlined={true} intent="primary" />
-        <Button text="Disabled" minimal={true} disabled={true} />`;
+    const code = `import { Button } from '@blueprintjs/core';
+
+export default function App() {
     return (
-        <CodeExample code={code} {...props}>
+        <>
             <Button text="Outlined" outlined={true} />
             <Button text="Primary" outlined={true} intent="primary" />
             <Button text="Disabled" minimal={true} disabled={true} />
-        </CodeExample>
+        </>
     );
+}`;
+    return <CodeExample code={code} {...props} />;
 };
 
 export const ButtonSizeExample: React.FC<ExampleProps> = props => {
-    const code = dedent`
-        <Button text="Small" small={true} />
-        <Button text="Default" />
-        <Button text="Large" large={true} />`;
+    const code = `import { Button } from '@blueprintjs/core';
+
+export default function App() {
     return (
-        <CodeExample code={code} {...props}>
+        <>
             <Button text="Small" small={true} />
             <Button text="Default" />
             <Button text="Large" large={true} />
-        </CodeExample>
+        </>
     );
+}`;
+    return <CodeExample code={code} {...props} />;
 };
 
 export const ButtonFillExample: React.FC<ExampleProps> = props => {
-    const code = `<Button text="Full Width Button" fill={true} />`;
+    const code = `import { Button } from '@blueprintjs/core'
+
+export default function App() {
     return (
-        <CodeExample code={code} {...props}>
-            <Button text="Full Width Button" fill={true} />
-        </CodeExample>
+        <Button text="Full Width Button" fill={true} />
     );
+}`;
+    return <CodeExample code={code} {...props} />;
 };
 
 export const ButtonAlignTextExample: React.FC<ExampleProps> = props => {
-    const code = dedent`
-        <Button text="Left Aligned" alignText="left" icon="align-left" rightIcon="caret-down" />
-        <Button text="Center Aligned" alignText="center" icon="align-center" rightIcon="caret-down" />
-        <Button text="Right Aligned" alignText="right" icon="align-right" rightIcon="caret-down" />`;
+    const code = `import { Button } from '@blueprintjs/core';
+
+export default function App() {
     return (
-        <CodeExample code={code} {...props}>
+        <>
             <Button text="Left Aligned" alignText="left" icon="align-left" rightIcon="caret-down" />
             <Button text="Center Aligned" alignText="center" icon="align-center" rightIcon="caret-down" />
             <Button text="Right Aligned" alignText="right" icon="align-right" rightIcon="caret-down" />
-        </CodeExample>
+        </>
     );
+}`;
+    return <CodeExample code={code} {...props} />;
 };
 
 export const ButtonEllipsizeTextExample: React.FC<ExampleProps> = props => {
-    const code = `<Button text="This is a very long button label that will be truncated" ellipsizeText={true} />`;
+    const code = `import { Button } from '@blueprintjs/core';
+
+export default function App() {
     return (
-        <CodeExample code={code} {...props}>
-            <Button text="This is a very long button label that will be truncated" ellipsizeText={true} />
-        </CodeExample>
+        <Button text="This is a very long button label that will be truncated" ellipsizeText={true} />
     );
+}`;
+    return <CodeExample code={code} {...props} />;
 };
 
 export const ButtonIconWithTextExample: React.FC<ExampleProps> = props => {
-    const code = dedent`
-        <Button icon="refresh" intent="danger" text="Reset" />
-        <Button icon="user" rightIcon="caret-down" text="Profile settings" />
-        <Button rightIcon="arrow-right" intent="success" text="Next step" />
-        <Button>
-            <Icon icon="document" /> Upload... <Icon icon="small-cross" />
-        </Button>`;
+    const code = `import { Button, Icon } from '@blueprintjs/core';
+
+export default function App() {
     return (
-        <CodeExample code={code} {...props}>
+        <>
             <Button icon="refresh" intent="danger" text="Reset" />
             <Button icon="user" rightIcon="caret-down" text="Profile settings" />
             <Button rightIcon="arrow-right" intent="success" text="Next step" />
             <Button>
                 <Icon icon="document" /> Upload... <Icon icon="small-cross" />
             </Button>
-        </CodeExample>
+        </>
     );
+}`;
+    return <CodeExample code={code} {...props} />;
 };
 
 export const ButtonIconExample: React.FC<ExampleProps> = props => {
-    const code = dedent`
-        <Button icon="edit" aria-label="edit" />
-        <Button icon="share" outlined={true} aria-label="share" />
-        <Button icon="filter" intent="primary" minimal={true} aria-label="filter" />
-        <Button icon="add" intent="success" aria-label="add" />
-        <Button icon="trash" disabled={true} intent="danger" aria-label="delete" />`;
+    const code = `import { Button } from '@blueprintjs/core';
+
+export default function App() {
     return (
-        <CodeExample code={code} {...props}>
+        <>
             <Button icon="edit" aria-label="edit" />
             <Button icon="share" outlined={true} aria-label="share" />
             <Button icon="filter" intent="primary" minimal={true} aria-label="filter" />
             <Button icon="add" intent="success" aria-label="add" />
             <Button icon="trash" disabled={true} intent="danger" aria-label="delete" />
-        </CodeExample>
+        </>
     );
+}`;
+    return <CodeExample code={code} {...props} />;
 };
 
 export const ButtonStatesExample: React.FC<ExampleProps> = props => {
-    const code = dedent`
-        <Button text="Default" />
-        <Button text="Active" active={true} />
-        <Button text="Disabled" disabled={true} />
-        <Button text="Loading..." loading={true} />`;
+    const code = `import { Button } from '@blueprintjs/core';
+
+export default function App() {
     return (
-        <CodeExample code={code} {...props}>
+        <>
             <Button text="Default" />
             <Button text="Active" active={true} />
             <Button text="Disabled" disabled={true} />
             <Button text="Loading..." loading={true} />
-        </CodeExample>
+        </>
     );
+}`;
+    return <CodeExample code={code} {...props} />;
 };
 
 export const ButtonAnchorButtonExample: React.FC<ExampleProps> = props => {
-    const code = `<AnchorButton href="https://blueprintjs.com" rightIcon="share" text="Link" />`;
+    const code = `import { AnchorButton } from '@blueprintjs/core';
+
+export default function App() {
     return (
-        <CodeExample code={code} {...props}>
-            <AnchorButton href="https://blueprintjs.com" rightIcon="share" text="Link" />
-        </CodeExample>
+        <AnchorButton href="https://blueprintjs.com" rightIcon="share" text="Link" />
     );
+}`;
+    return <CodeExample code={code} {...props} />;
 };
 
 export const ButtonDisabledButtonTooltipExample: React.FC<ExampleProps> = props => {
-    const code = dedent`
+    const code = `import { AnchorButton, Tooltip } from '@blueprintjs/core';
+
+export default function App() {
+    return (
         <Tooltip content="This button is disabled">
             <AnchorButton text="Disabled" disabled={true} />
-        </Tooltip>`;
-    return (
-        <CodeExample code={code} {...props}>
-            <Tooltip content="This button is disabled">
-                <AnchorButton text="Disabled" disabled={true} />
-            </Tooltip>
-        </CodeExample>
+        </Tooltip>
     );
+}`;
+    return <CodeExample code={code} {...props} />;
 };
diff --git a/packages/docs-theme/package.json b/packages/docs-theme/package.json
@@ -38,6 +38,7 @@
         "@blueprintjs/colors": "workspace:^",
         "@blueprintjs/core": "workspace:^",
         "@blueprintjs/select": "workspace:^",
+        "@codesandbox/sandpack-react": "^2.19.10",
         "@documentalist/client": "^5.0.0",
         "classnames": "^2.3.1",
         "fuzzaldrin-plus": "^0.6.0",