diff --git a/packages/batch-actions/.env b/packages/batch-actions/.env
new file mode 100644
index 0000000..3e32829
--- /dev/null
+++ b/packages/batch-actions/.env
@@ -0,0 +1,2 @@
+VITE_CODE_SANDBOX_URL_ROOT=https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/packages
+VITE_STACK_BLITZ_URL_ROOT=https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/packages
\ No newline at end of file
diff --git a/packages/batch-actions/src/BatchActions.tsx b/packages/batch-actions/src/BatchActions.tsx
index 84996cf..60e35d0 100644
--- a/packages/batch-actions/src/BatchActions.tsx
+++ b/packages/batch-actions/src/BatchActions.tsx
@@ -35,6 +35,9 @@ import {
 } from '@tanstack/match-sorter-utils'
 
 import { makeData } from './makeData';
+import { ExampleLink } from './ExampleLink';
+import { Launch } from '@carbon/react/icons'
+import * as packageJson from '../package.json'
 
 type Resource = {
   id: string
@@ -174,6 +177,10 @@ export const BatchActions = () => {
     <TableContainer
       title="Batch actions, global filter"
       className="basic-table tanstack-example"
+      description={<span className='flex'>
+        <ExampleLink url={`${import.meta.env.VITE_CODE_SANDBOX_URL_ROOT}/${packageJson.name}`} icon={Launch} label="Code sandbox" />
+        <ExampleLink url={`${import.meta.env.VITE_STACK_BLITZ_URL_ROOT}/${packageJson.name}`} icon={Launch} label="StackBlitz" />
+      </span>}
       style={{
         width: table.getCenterTotalSize(),
       }}
diff --git a/packages/batch-actions/src/ExampleLink.tsx b/packages/batch-actions/src/ExampleLink.tsx
new file mode 100644
index 0000000..b721e60
--- /dev/null
+++ b/packages/batch-actions/src/ExampleLink.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const ExampleLink = ({ icon, label, url }) => {
+  const Icon = icon;
+  return <a className='example--link' href={url} target='_blank'>
+    {icon && <Icon className="example--link__icon" />}
+    {label}
+  </a>
+}
\ No newline at end of file
diff --git a/packages/batch-actions/src/index.scss b/packages/batch-actions/src/index.scss
index da16da6..f8f9347 100644
--- a/packages/batch-actions/src/index.scss
+++ b/packages/batch-actions/src/index.scss
@@ -1,8 +1,21 @@
 @use '@carbon/react' with ($font-path: '@ibm/plex');
+@use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
 @use './App.scss';
 
 body {
   margin: 0;
   padding: 0;
+}
+
+.example--link {
+  @include type.type-style('label-01');
+
+  display: flex;
+  align-items: center;
+  margin-right: 0.5rem;
+}
+
+.example--link__icon {
+  margin-right: 0.25rem;
 }
\ No newline at end of file
diff --git a/packages/batch-actions/tsconfig.app.json b/packages/batch-actions/tsconfig.app.json
index 4abf194..a68cf5e 100644
--- a/packages/batch-actions/tsconfig.app.json
+++ b/packages/batch-actions/tsconfig.app.json
@@ -21,7 +21,8 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
 
-    "types": [ "./src/customTypings.d.ts" ]
+    "types": [ "./src/customTypings.d.ts" ],
+    "resolveJsonModule": true
   },
   "include": ["./src"]
 }
diff --git a/packages/customizeColumns/.env b/packages/customizeColumns/.env
new file mode 100644
index 0000000..3e32829
--- /dev/null
+++ b/packages/customizeColumns/.env
@@ -0,0 +1,2 @@
+VITE_CODE_SANDBOX_URL_ROOT=https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/packages
+VITE_STACK_BLITZ_URL_ROOT=https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/packages
\ No newline at end of file
diff --git a/packages/customizeColumns/src/CustomizeColumns.tsx b/packages/customizeColumns/src/CustomizeColumns.tsx
index cc9a7be..29d0e5f 100644
--- a/packages/customizeColumns/src/CustomizeColumns.tsx
+++ b/packages/customizeColumns/src/CustomizeColumns.tsx
@@ -25,6 +25,9 @@ import { TearsheetNarrow } from '@carbon/ibm-products';
 import { Sortable } from './drag-drop/Sortable';
 import { restrictToParentElement, restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import { verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { ExampleLink } from './ExampleLink';
+import { Launch } from '@carbon/react/icons'
+import * as packageJson from '../package.json'
 
 type Resource = {
   id: string
@@ -91,6 +94,10 @@ export const CustomizeColumns = () => {
       <TableContainer
         title="Customize column order"
         className="basic-table tanstack-example"
+        description={<span className='flex'>
+          <ExampleLink url={`${import.meta.env.VITE_CODE_SANDBOX_URL_ROOT}/${packageJson.name}`} icon={Launch} label="Code sandbox" />
+          <ExampleLink url={`${import.meta.env.VITE_STACK_BLITZ_URL_ROOT}/${packageJson.name}`} icon={Launch} label="StackBlitz" />
+        </span>}
         style={{
           width: table.getCenterTotalSize(),
         }}
diff --git a/packages/customizeColumns/src/ExampleLink.tsx b/packages/customizeColumns/src/ExampleLink.tsx
new file mode 100644
index 0000000..b721e60
--- /dev/null
+++ b/packages/customizeColumns/src/ExampleLink.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const ExampleLink = ({ icon, label, url }) => {
+  const Icon = icon;
+  return <a className='example--link' href={url} target='_blank'>
+    {icon && <Icon className="example--link__icon" />}
+    {label}
+  </a>
+}
\ No newline at end of file
diff --git a/packages/customizeColumns/src/index.scss b/packages/customizeColumns/src/index.scss
index da16da6..f8f9347 100644
--- a/packages/customizeColumns/src/index.scss
+++ b/packages/customizeColumns/src/index.scss
@@ -1,8 +1,21 @@
 @use '@carbon/react' with ($font-path: '@ibm/plex');
+@use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
 @use './App.scss';
 
 body {
   margin: 0;
   padding: 0;
+}
+
+.example--link {
+  @include type.type-style('label-01');
+
+  display: flex;
+  align-items: center;
+  margin-right: 0.5rem;
+}
+
+.example--link__icon {
+  margin-right: 0.25rem;
 }
\ No newline at end of file
diff --git a/packages/customizeColumns/tsconfig.app.json b/packages/customizeColumns/tsconfig.app.json
index 4abf194..a68cf5e 100644
--- a/packages/customizeColumns/tsconfig.app.json
+++ b/packages/customizeColumns/tsconfig.app.json
@@ -21,7 +21,8 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
 
-    "types": [ "./src/customTypings.d.ts" ]
+    "types": [ "./src/customTypings.d.ts" ],
+    "resolveJsonModule": true
   },
   "include": ["./src"]
 }
diff --git a/packages/editableCells/.env b/packages/editableCells/.env
new file mode 100644
index 0000000..3e32829
--- /dev/null
+++ b/packages/editableCells/.env
@@ -0,0 +1,2 @@
+VITE_CODE_SANDBOX_URL_ROOT=https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/packages
+VITE_STACK_BLITZ_URL_ROOT=https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/packages
\ No newline at end of file
diff --git a/packages/editableCells/src/EditableCells.tsx b/packages/editableCells/src/EditableCells.tsx
index dba9c19..07483cb 100644
--- a/packages/editableCells/src/EditableCells.tsx
+++ b/packages/editableCells/src/EditableCells.tsx
@@ -17,6 +17,9 @@ import {
   useReactTable,
 } from '@tanstack/react-table'
 import { makeData } from './makeData';
+import { ExampleLink } from './ExampleLink';
+import { Launch } from '@carbon/react/icons'
+import * as packageJson from '../package.json'
 
 type Resource = {
   id: string
@@ -233,6 +236,10 @@ export const EditableCells = () => {
       <TableContainer
         title="Editable cells"
         className="basic-table tanstack-example"
+        description={<span className='flex'>
+          <ExampleLink url={`${import.meta.env.VITE_CODE_SANDBOX_URL_ROOT}/${packageJson.name}`} icon={Launch} label="Code sandbox" />
+          <ExampleLink url={`${import.meta.env.VITE_STACK_BLITZ_URL_ROOT}/${packageJson.name}`} icon={Launch} label="StackBlitz" />
+        </span>}
         style={{
           width: table.getCenterTotalSize(),
         }}
diff --git a/packages/editableCells/src/ExampleLink.tsx b/packages/editableCells/src/ExampleLink.tsx
new file mode 100644
index 0000000..b721e60
--- /dev/null
+++ b/packages/editableCells/src/ExampleLink.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const ExampleLink = ({ icon, label, url }) => {
+  const Icon = icon;
+  return <a className='example--link' href={url} target='_blank'>
+    {icon && <Icon className="example--link__icon" />}
+    {label}
+  </a>
+}
\ No newline at end of file
diff --git a/packages/editableCells/src/index.scss b/packages/editableCells/src/index.scss
index da16da6..f8f9347 100644
--- a/packages/editableCells/src/index.scss
+++ b/packages/editableCells/src/index.scss
@@ -1,8 +1,21 @@
 @use '@carbon/react' with ($font-path: '@ibm/plex');
+@use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
 @use './App.scss';
 
 body {
   margin: 0;
   padding: 0;
+}
+
+.example--link {
+  @include type.type-style('label-01');
+
+  display: flex;
+  align-items: center;
+  margin-right: 0.5rem;
+}
+
+.example--link__icon {
+  margin-right: 0.25rem;
 }
\ No newline at end of file
diff --git a/packages/editableCells/tsconfig.app.json b/packages/editableCells/tsconfig.app.json
index 4abf194..a68cf5e 100644
--- a/packages/editableCells/tsconfig.app.json
+++ b/packages/editableCells/tsconfig.app.json
@@ -21,7 +21,8 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
 
-    "types": [ "./src/customTypings.d.ts" ]
+    "types": [ "./src/customTypings.d.ts" ],
+    "resolveJsonModule": true
   },
   "include": ["./src"]
 }
diff --git a/packages/filterFlyout/.env b/packages/filterFlyout/.env
new file mode 100644
index 0000000..3e32829
--- /dev/null
+++ b/packages/filterFlyout/.env
@@ -0,0 +1,2 @@
+VITE_CODE_SANDBOX_URL_ROOT=https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/packages
+VITE_STACK_BLITZ_URL_ROOT=https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/packages
\ No newline at end of file
diff --git a/packages/filterFlyout/src/ExampleLink.tsx b/packages/filterFlyout/src/ExampleLink.tsx
new file mode 100644
index 0000000..b721e60
--- /dev/null
+++ b/packages/filterFlyout/src/ExampleLink.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const ExampleLink = ({ icon, label, url }) => {
+  const Icon = icon;
+  return <a className='example--link' href={url} target='_blank'>
+    {icon && <Icon className="example--link__icon" />}
+    {label}
+  </a>
+}
\ No newline at end of file
diff --git a/packages/filterFlyout/src/FilterFlyout.tsx b/packages/filterFlyout/src/FilterFlyout.tsx
index e4f2bfb..fbb0f4c 100644
--- a/packages/filterFlyout/src/FilterFlyout.tsx
+++ b/packages/filterFlyout/src/FilterFlyout.tsx
@@ -46,6 +46,9 @@ import {
 
 import { makeData } from './makeData';
 import { TagOverflow, pkg } from '@carbon/ibm-products';
+import { ExampleLink } from './ExampleLink';
+import { Launch } from '@carbon/react/icons'
+import * as packageJson from '../package.json'
 
 pkg.component.TagOverflow = true;
 
@@ -211,6 +214,10 @@ export const FilterFlyout = () => {
       <TableContainer
         title="Filter flyout"
         className="basic-table tanstack-example filter-flyout-example"
+        description={<span className='flex'>
+          <ExampleLink url={`${import.meta.env.VITE_CODE_SANDBOX_URL_ROOT}/${packageJson.name}`} icon={Launch} label="Code sandbox" />
+          <ExampleLink url={`${import.meta.env.VITE_STACK_BLITZ_URL_ROOT}/${packageJson.name}`} icon={Launch} label="StackBlitz" />
+        </span>}
         style={{
           width: table.getCenterTotalSize(),
         }}
diff --git a/packages/filterFlyout/src/index.scss b/packages/filterFlyout/src/index.scss
index da16da6..f8f9347 100644
--- a/packages/filterFlyout/src/index.scss
+++ b/packages/filterFlyout/src/index.scss
@@ -1,8 +1,21 @@
 @use '@carbon/react' with ($font-path: '@ibm/plex');
+@use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
 @use './App.scss';
 
 body {
   margin: 0;
   padding: 0;
+}
+
+.example--link {
+  @include type.type-style('label-01');
+
+  display: flex;
+  align-items: center;
+  margin-right: 0.5rem;
+}
+
+.example--link__icon {
+  margin-right: 0.25rem;
 }
\ No newline at end of file
diff --git a/packages/filterFlyout/tsconfig.app.json b/packages/filterFlyout/tsconfig.app.json
index 4abf194..a68cf5e 100644
--- a/packages/filterFlyout/tsconfig.app.json
+++ b/packages/filterFlyout/tsconfig.app.json
@@ -21,7 +21,8 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
 
-    "types": [ "./src/customTypings.d.ts" ]
+    "types": [ "./src/customTypings.d.ts" ],
+    "resolveJsonModule": true
   },
   "include": ["./src"]
 }
diff --git a/packages/filterPanel/.env b/packages/filterPanel/.env
new file mode 100644
index 0000000..3e32829
--- /dev/null
+++ b/packages/filterPanel/.env
@@ -0,0 +1,2 @@
+VITE_CODE_SANDBOX_URL_ROOT=https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/packages
+VITE_STACK_BLITZ_URL_ROOT=https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/packages
\ No newline at end of file
diff --git a/packages/filterPanel/src/ExampleLink.tsx b/packages/filterPanel/src/ExampleLink.tsx
new file mode 100644
index 0000000..b721e60
--- /dev/null
+++ b/packages/filterPanel/src/ExampleLink.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const ExampleLink = ({ icon, label, url }) => {
+  const Icon = icon;
+  return <a className='example--link' href={url} target='_blank'>
+    {icon && <Icon className="example--link__icon" />}
+    {label}
+  </a>
+}
\ No newline at end of file
diff --git a/packages/filterPanel/src/FilterPanel.tsx b/packages/filterPanel/src/FilterPanel.tsx
index 3a1ed9c..75b1dea 100644
--- a/packages/filterPanel/src/FilterPanel.tsx
+++ b/packages/filterPanel/src/FilterPanel.tsx
@@ -45,6 +45,9 @@ import {
 
 import { makeData } from './makeData';
 import { TagOverflow, pkg } from '@carbon/ibm-products';
+import { ExampleLink } from './ExampleLink';
+import { Launch } from '@carbon/react/icons'
+import * as packageJson from '../package.json'
 
 pkg.component.TagOverflow = true;
 
@@ -267,6 +270,10 @@ export const FilterPanel = () => {
       <TableContainer
         title="Filter panel"
         className="basic-table tanstack-example filter-flyout-example filter-panel-example"
+        description={<span className='flex'>
+          <ExampleLink url={`${import.meta.env.VITE_CODE_SANDBOX_URL_ROOT}/${packageJson.name}`} icon={Launch} label="Code sandbox" />
+          <ExampleLink url={`${import.meta.env.VITE_STACK_BLITZ_URL_ROOT}/${packageJson.name}`} icon={Launch} label="StackBlitz" />
+        </span>}
         style={{
           width: table.getCenterTotalSize(),
         }}
diff --git a/packages/filterPanel/src/index.scss b/packages/filterPanel/src/index.scss
index da16da6..f8f9347 100644
--- a/packages/filterPanel/src/index.scss
+++ b/packages/filterPanel/src/index.scss
@@ -1,8 +1,21 @@
 @use '@carbon/react' with ($font-path: '@ibm/plex');
+@use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
 @use './App.scss';
 
 body {
   margin: 0;
   padding: 0;
+}
+
+.example--link {
+  @include type.type-style('label-01');
+
+  display: flex;
+  align-items: center;
+  margin-right: 0.5rem;
+}
+
+.example--link__icon {
+  margin-right: 0.25rem;
 }
\ No newline at end of file
diff --git a/packages/filterPanel/tsconfig.app.json b/packages/filterPanel/tsconfig.app.json
index 4abf194..a68cf5e 100644
--- a/packages/filterPanel/tsconfig.app.json
+++ b/packages/filterPanel/tsconfig.app.json
@@ -21,7 +21,8 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
 
-    "types": [ "./src/customTypings.d.ts" ]
+    "types": [ "./src/customTypings.d.ts" ],
+    "resolveJsonModule": true
   },
   "include": ["./src"]
 }
diff --git a/packages/gallery/src/index.scss b/packages/gallery/src/index.scss
index da16da6..f8f9347 100644
--- a/packages/gallery/src/index.scss
+++ b/packages/gallery/src/index.scss
@@ -1,8 +1,21 @@
 @use '@carbon/react' with ($font-path: '@ibm/plex');
+@use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
 @use './App.scss';
 
 body {
   margin: 0;
   padding: 0;
+}
+
+.example--link {
+  @include type.type-style('label-01');
+
+  display: flex;
+  align-items: center;
+  margin-right: 0.5rem;
+}
+
+.example--link__icon {
+  margin-right: 0.25rem;
 }
\ No newline at end of file
diff --git a/packages/globalFilter/.env b/packages/globalFilter/.env
new file mode 100644
index 0000000..3e32829
--- /dev/null
+++ b/packages/globalFilter/.env
@@ -0,0 +1,2 @@
+VITE_CODE_SANDBOX_URL_ROOT=https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/packages
+VITE_STACK_BLITZ_URL_ROOT=https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/packages
\ No newline at end of file
diff --git a/packages/globalFilter/src/ExampleLink.tsx b/packages/globalFilter/src/ExampleLink.tsx
new file mode 100644
index 0000000..b721e60
--- /dev/null
+++ b/packages/globalFilter/src/ExampleLink.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const ExampleLink = ({ icon, label, url }) => {
+  const Icon = icon;
+  return <a className='example--link' href={url} target='_blank'>
+    {icon && <Icon className="example--link__icon" />}
+    {label}
+  </a>
+}
\ No newline at end of file
diff --git a/packages/globalFilter/src/GlobalFilter.tsx b/packages/globalFilter/src/GlobalFilter.tsx
index f28cc69..6223f61 100644
--- a/packages/globalFilter/src/GlobalFilter.tsx
+++ b/packages/globalFilter/src/GlobalFilter.tsx
@@ -26,6 +26,9 @@ import {
 import {
   rankItem,
 } from '@tanstack/match-sorter-utils'
+import { ExampleLink } from './ExampleLink';
+import { Launch } from '@carbon/react/icons'
+import * as packageJson from '../package.json'
 
 import { makeData, Resource } from './makeData'
 
@@ -105,6 +108,10 @@ export const GlobalFilter = () => {
       <TableContainer
         title="Global filter"
         className="basic-table"
+        description={<span className='flex'>
+          <ExampleLink url={`${import.meta.env.VITE_CODE_SANDBOX_URL_ROOT}/${packageJson.name}`} icon={Launch} label="Code sandbox" />
+          <ExampleLink url={`${import.meta.env.VITE_STACK_BLITZ_URL_ROOT}/${packageJson.name}`} icon={Launch} label="StackBlitz" />
+        </span>}
         style={{
           width: table.getCenterTotalSize(),
         }}
diff --git a/packages/globalFilter/src/index.scss b/packages/globalFilter/src/index.scss
index da16da6..f8f9347 100644
--- a/packages/globalFilter/src/index.scss
+++ b/packages/globalFilter/src/index.scss
@@ -1,8 +1,21 @@
 @use '@carbon/react' with ($font-path: '@ibm/plex');
+@use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
 @use './App.scss';
 
 body {
   margin: 0;
   padding: 0;
+}
+
+.example--link {
+  @include type.type-style('label-01');
+
+  display: flex;
+  align-items: center;
+  margin-right: 0.5rem;
+}
+
+.example--link__icon {
+  margin-right: 0.25rem;
 }
\ No newline at end of file
diff --git a/packages/globalFilter/tsconfig.app.json b/packages/globalFilter/tsconfig.app.json
index 4abf194..a68cf5e 100644
--- a/packages/globalFilter/tsconfig.app.json
+++ b/packages/globalFilter/tsconfig.app.json
@@ -21,7 +21,8 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
 
-    "types": [ "./src/customTypings.d.ts" ]
+    "types": [ "./src/customTypings.d.ts" ],
+    "resolveJsonModule": true
   },
   "include": ["./src"]
 }
diff --git a/packages/infiniteScroll/.env b/packages/infiniteScroll/.env
new file mode 100644
index 0000000..3e32829
--- /dev/null
+++ b/packages/infiniteScroll/.env
@@ -0,0 +1,2 @@
+VITE_CODE_SANDBOX_URL_ROOT=https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/packages
+VITE_STACK_BLITZ_URL_ROOT=https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/packages
\ No newline at end of file
diff --git a/packages/infiniteScroll/src/ExampleLink.tsx b/packages/infiniteScroll/src/ExampleLink.tsx
new file mode 100644
index 0000000..b721e60
--- /dev/null
+++ b/packages/infiniteScroll/src/ExampleLink.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const ExampleLink = ({ icon, label, url }) => {
+  const Icon = icon;
+  return <a className='example--link' href={url} target='_blank'>
+    {icon && <Icon className="example--link__icon" />}
+    {label}
+  </a>
+}
\ No newline at end of file
diff --git a/packages/infiniteScroll/src/InfiniteScroll.tsx b/packages/infiniteScroll/src/InfiniteScroll.tsx
index 17a4e2a..a174778 100644
--- a/packages/infiniteScroll/src/InfiniteScroll.tsx
+++ b/packages/infiniteScroll/src/InfiniteScroll.tsx
@@ -26,6 +26,9 @@ const {
 } = DataTable;
 
 import { fetchData, Resource, ResourceApiResponse } from './makeData'
+import { ExampleLink } from './ExampleLink';
+import { Launch } from '@carbon/react/icons'
+import * as packageJson from '../package.json'
 
 const fetchSize = 50
 
@@ -154,6 +157,10 @@ export const InfiniteScroll = () => {
   return (
       <div className="virtual-example tanstack-example">
         <h4>Virtualized infinite scroll</h4>
+        <span className='flex'>
+          <ExampleLink url={`${import.meta.env.VITE_CODE_SANDBOX_URL_ROOT}/${packageJson.name}`} icon={Launch} label="Code sandbox" />
+          <ExampleLink url={`${import.meta.env.VITE_STACK_BLITZ_URL_ROOT}/${packageJson.name}`} icon={Launch} label="StackBlitz" />
+        </span>
         {/* {process.env.NODE_ENV === 'development' ? (
           <p className='virtual-description'>
             <strong>Notice:</strong> You are currently running React in
diff --git a/packages/infiniteScroll/src/index.scss b/packages/infiniteScroll/src/index.scss
index da16da6..f8f9347 100644
--- a/packages/infiniteScroll/src/index.scss
+++ b/packages/infiniteScroll/src/index.scss
@@ -1,8 +1,21 @@
 @use '@carbon/react' with ($font-path: '@ibm/plex');
+@use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
 @use './App.scss';
 
 body {
   margin: 0;
   padding: 0;
+}
+
+.example--link {
+  @include type.type-style('label-01');
+
+  display: flex;
+  align-items: center;
+  margin-right: 0.5rem;
+}
+
+.example--link__icon {
+  margin-right: 0.25rem;
 }
\ No newline at end of file
diff --git a/packages/infiniteScroll/tsconfig.app.json b/packages/infiniteScroll/tsconfig.app.json
index 4abf194..a68cf5e 100644
--- a/packages/infiniteScroll/tsconfig.app.json
+++ b/packages/infiniteScroll/tsconfig.app.json
@@ -21,7 +21,8 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
 
-    "types": [ "./src/customTypings.d.ts" ]
+    "types": [ "./src/customTypings.d.ts" ],
+    "resolveJsonModule": true
   },
   "include": ["./src"]
 }
diff --git a/packages/nestedRows/.env b/packages/nestedRows/.env
new file mode 100644
index 0000000..3e32829
--- /dev/null
+++ b/packages/nestedRows/.env
@@ -0,0 +1,2 @@
+VITE_CODE_SANDBOX_URL_ROOT=https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/packages
+VITE_STACK_BLITZ_URL_ROOT=https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/packages
\ No newline at end of file
diff --git a/packages/nestedRows/src/ExampleLink.tsx b/packages/nestedRows/src/ExampleLink.tsx
new file mode 100644
index 0000000..b721e60
--- /dev/null
+++ b/packages/nestedRows/src/ExampleLink.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const ExampleLink = ({ icon, label, url }) => {
+  const Icon = icon;
+  return <a className='example--link' href={url} target='_blank'>
+    {icon && <Icon className="example--link__icon" />}
+    {label}
+  </a>
+}
\ No newline at end of file
diff --git a/packages/nestedRows/src/NestedRows.tsx b/packages/nestedRows/src/NestedRows.tsx
index 7034edd..9db8be2 100644
--- a/packages/nestedRows/src/NestedRows.tsx
+++ b/packages/nestedRows/src/NestedRows.tsx
@@ -20,6 +20,9 @@ const {
 } = DataTable;
 
 import { makeData, Resource } from './makeData'
+import { ExampleLink } from './ExampleLink';
+import { Launch } from '@carbon/react/icons'
+import * as packageJson from '../package.json'
 
 export const NestedRows = () => {
 
@@ -111,7 +114,14 @@ export const NestedRows = () => {
   })
 
   return (
-    <TableContainer title="Nested rows" className='tanstack-example'>
+    <TableContainer
+      title="Nested rows"
+      className='tanstack-example'
+      description={<span className='flex'>
+        <ExampleLink url={`${import.meta.env.VITE_CODE_SANDBOX_URL_ROOT}/${packageJson.name}`} icon={Launch} label="Code sandbox" />
+        <ExampleLink url={`${import.meta.env.VITE_STACK_BLITZ_URL_ROOT}/${packageJson.name}`} icon={Launch} label="StackBlitz" />
+      </span>}
+    >
       <Table>
         <TableHead>
           {table.getHeaderGroups().map(headerGroup => (
diff --git a/packages/nestedRows/src/index.scss b/packages/nestedRows/src/index.scss
index da16da6..f8f9347 100644
--- a/packages/nestedRows/src/index.scss
+++ b/packages/nestedRows/src/index.scss
@@ -1,8 +1,21 @@
 @use '@carbon/react' with ($font-path: '@ibm/plex');
+@use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
 @use './App.scss';
 
 body {
   margin: 0;
   padding: 0;
+}
+
+.example--link {
+  @include type.type-style('label-01');
+
+  display: flex;
+  align-items: center;
+  margin-right: 0.5rem;
+}
+
+.example--link__icon {
+  margin-right: 0.25rem;
 }
\ No newline at end of file
diff --git a/packages/nestedRows/tsconfig.app.json b/packages/nestedRows/tsconfig.app.json
index 4abf194..a68cf5e 100644
--- a/packages/nestedRows/tsconfig.app.json
+++ b/packages/nestedRows/tsconfig.app.json
@@ -21,7 +21,8 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
 
-    "types": [ "./src/customTypings.d.ts" ]
+    "types": [ "./src/customTypings.d.ts" ],
+    "resolveJsonModule": true
   },
   "include": ["./src"]
 }
diff --git a/packages/pagination/.env b/packages/pagination/.env
new file mode 100644
index 0000000..3e32829
--- /dev/null
+++ b/packages/pagination/.env
@@ -0,0 +1,2 @@
+VITE_CODE_SANDBOX_URL_ROOT=https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/packages
+VITE_STACK_BLITZ_URL_ROOT=https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/packages
\ No newline at end of file
diff --git a/packages/pagination/src/ExampleLink.tsx b/packages/pagination/src/ExampleLink.tsx
new file mode 100644
index 0000000..b721e60
--- /dev/null
+++ b/packages/pagination/src/ExampleLink.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const ExampleLink = ({ icon, label, url }) => {
+  const Icon = icon;
+  return <a className='example--link' href={url} target='_blank'>
+    {icon && <Icon className="example--link__icon" />}
+    {label}
+  </a>
+}
\ No newline at end of file
diff --git a/packages/pagination/src/Pagination.tsx b/packages/pagination/src/Pagination.tsx
index 33b1216..a224ac0 100644
--- a/packages/pagination/src/Pagination.tsx
+++ b/packages/pagination/src/Pagination.tsx
@@ -19,6 +19,9 @@ import {
   getPaginationRowModel
 } from '@tanstack/react-table'
 import { makeData } from './makeData';
+import { ExampleLink } from './ExampleLink';
+import { Launch } from '@carbon/react/icons'
+import * as packageJson from '../package.json'
 
 type Resource = {
   id: string
@@ -85,6 +88,10 @@ export const PaginationExample = () => {
     <TableContainer
       title="Pagination"
       className="basic-table tanstack-example"
+      description={<span className='flex'>
+        <ExampleLink url={`${import.meta.env.VITE_CODE_SANDBOX_URL_ROOT}/${packageJson.name}`} icon={Launch} label="Code sandbox" />
+        <ExampleLink url={`${import.meta.env.VITE_STACK_BLITZ_URL_ROOT}/${packageJson.name}`} icon={Launch} label="StackBlitz" />
+      </span>}
       style={{
         width: table.getCenterTotalSize(),
       }}
diff --git a/packages/pagination/src/index.scss b/packages/pagination/src/index.scss
index da16da6..f8f9347 100644
--- a/packages/pagination/src/index.scss
+++ b/packages/pagination/src/index.scss
@@ -1,8 +1,21 @@
 @use '@carbon/react' with ($font-path: '@ibm/plex');
+@use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
 @use './App.scss';
 
 body {
   margin: 0;
   padding: 0;
+}
+
+.example--link {
+  @include type.type-style('label-01');
+
+  display: flex;
+  align-items: center;
+  margin-right: 0.5rem;
+}
+
+.example--link__icon {
+  margin-right: 0.25rem;
 }
\ No newline at end of file
diff --git a/packages/pagination/tsconfig.app.json b/packages/pagination/tsconfig.app.json
index 4abf194..a68cf5e 100644
--- a/packages/pagination/tsconfig.app.json
+++ b/packages/pagination/tsconfig.app.json
@@ -21,7 +21,8 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
 
-    "types": [ "./src/customTypings.d.ts" ]
+    "types": [ "./src/customTypings.d.ts" ],
+    "resolveJsonModule": true
   },
   "include": ["./src"]
 }
diff --git a/packages/resizing/.env b/packages/resizing/.env
new file mode 100644
index 0000000..3e32829
--- /dev/null
+++ b/packages/resizing/.env
@@ -0,0 +1,2 @@
+VITE_CODE_SANDBOX_URL_ROOT=https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/packages
+VITE_STACK_BLITZ_URL_ROOT=https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/packages
\ No newline at end of file
diff --git a/packages/resizing/src/ExampleLink.tsx b/packages/resizing/src/ExampleLink.tsx
new file mode 100644
index 0000000..b721e60
--- /dev/null
+++ b/packages/resizing/src/ExampleLink.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const ExampleLink = ({ icon, label, url }) => {
+  const Icon = icon;
+  return <a className='example--link' href={url} target='_blank'>
+    {icon && <Icon className="example--link__icon" />}
+    {label}
+  </a>
+}
\ No newline at end of file
diff --git a/packages/resizing/src/ResizableCols.tsx b/packages/resizing/src/ResizableCols.tsx
index 3f35922..6682f8f 100644
--- a/packages/resizing/src/ResizableCols.tsx
+++ b/packages/resizing/src/ResizableCols.tsx
@@ -18,6 +18,9 @@ import {
   ColumnResizeMode
 } from '@tanstack/react-table'
 import { makeData } from './makeData';
+import { ExampleLink } from './ExampleLink';
+import { Launch } from '@carbon/react/icons'
+import * as packageJson from '../package.json'
 
 type Resource = {
   id: string
@@ -77,6 +80,10 @@ export const ResizableCols = () => {
     <TableContainer
       title="Resizable columns"
       className="basic-table tanstack-example"
+      description={<span className='flex'>
+        <ExampleLink url={`${import.meta.env.VITE_CODE_SANDBOX_URL_ROOT}/${packageJson.name}`} icon={Launch} label="Code sandbox" />
+        <ExampleLink url={`${import.meta.env.VITE_STACK_BLITZ_URL_ROOT}/${packageJson.name}`} icon={Launch} label="StackBlitz" />
+      </span>}
       style={{
         width: table.getCenterTotalSize(),
       }}
diff --git a/packages/resizing/src/index.scss b/packages/resizing/src/index.scss
index da16da6..d7ecac8 100644
--- a/packages/resizing/src/index.scss
+++ b/packages/resizing/src/index.scss
@@ -1,8 +1,22 @@
 @use '@carbon/react' with ($font-path: '@ibm/plex');
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
 @use './App.scss';
 
 body {
   margin: 0;
   padding: 0;
-}
\ No newline at end of file
+}
+
+.example--link {
+  @include type.type-style('label-01');
+
+  display: flex;
+  align-items: center;
+  margin-right: 0.5rem;
+}
+
+.example--link__icon {
+  margin-right: 0.25rem;
+}
diff --git a/packages/resizing/tsconfig.app.json b/packages/resizing/tsconfig.app.json
index 4abf194..a68cf5e 100644
--- a/packages/resizing/tsconfig.app.json
+++ b/packages/resizing/tsconfig.app.json
@@ -21,7 +21,8 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
 
-    "types": [ "./src/customTypings.d.ts" ]
+    "types": [ "./src/customTypings.d.ts" ],
+    "resolveJsonModule": true
   },
   "include": ["./src"]
 }
diff --git a/packages/row-click/.env b/packages/row-click/.env
new file mode 100644
index 0000000..3e32829
--- /dev/null
+++ b/packages/row-click/.env
@@ -0,0 +1,2 @@
+VITE_CODE_SANDBOX_URL_ROOT=https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/packages
+VITE_STACK_BLITZ_URL_ROOT=https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/packages
\ No newline at end of file
diff --git a/packages/row-click/src/ExampleLink.tsx b/packages/row-click/src/ExampleLink.tsx
new file mode 100644
index 0000000..b721e60
--- /dev/null
+++ b/packages/row-click/src/ExampleLink.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const ExampleLink = ({ icon, label, url }) => {
+  const Icon = icon;
+  return <a className='example--link' href={url} target='_blank'>
+    {icon && <Icon className="example--link__icon" />}
+    {label}
+  </a>
+}
\ No newline at end of file
diff --git a/packages/row-click/src/RowClick.tsx b/packages/row-click/src/RowClick.tsx
index c7dc8ea..7151947 100644
--- a/packages/row-click/src/RowClick.tsx
+++ b/packages/row-click/src/RowClick.tsx
@@ -18,6 +18,9 @@ import {
   useReactTable,
 } from '@tanstack/react-table'
 import { makeData } from './makeData';
+import { ExampleLink } from './ExampleLink';
+import { Launch } from '@carbon/react/icons'
+import * as packageJson from '../package.json'
 
 type Resource = {
   id: string
@@ -77,6 +80,10 @@ export const RowClick = () => {
       <TableContainer
         title="Row click"
         className="basic-table tanstack-example"
+        description={<span className='flex'>
+          <ExampleLink url={`${import.meta.env.VITE_CODE_SANDBOX_URL_ROOT}/${packageJson.name}`} icon={Launch} label="Code sandbox" />
+          <ExampleLink url={`${import.meta.env.VITE_STACK_BLITZ_URL_ROOT}/${packageJson.name}`} icon={Launch} label="StackBlitz" />
+        </span>}
         style={{
           width: table.getCenterTotalSize(),
         }}
diff --git a/packages/row-click/src/index.scss b/packages/row-click/src/index.scss
index da16da6..f8f9347 100644
--- a/packages/row-click/src/index.scss
+++ b/packages/row-click/src/index.scss
@@ -1,8 +1,21 @@
 @use '@carbon/react' with ($font-path: '@ibm/plex');
+@use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
 @use './App.scss';
 
 body {
   margin: 0;
   padding: 0;
+}
+
+.example--link {
+  @include type.type-style('label-01');
+
+  display: flex;
+  align-items: center;
+  margin-right: 0.5rem;
+}
+
+.example--link__icon {
+  margin-right: 0.25rem;
 }
\ No newline at end of file
diff --git a/packages/row-click/tsconfig.app.json b/packages/row-click/tsconfig.app.json
index 4abf194..a68cf5e 100644
--- a/packages/row-click/tsconfig.app.json
+++ b/packages/row-click/tsconfig.app.json
@@ -21,7 +21,8 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
 
-    "types": [ "./src/customTypings.d.ts" ]
+    "types": [ "./src/customTypings.d.ts" ],
+    "resolveJsonModule": true
   },
   "include": ["./src"]
 }
diff --git a/packages/rowExpansion/.env b/packages/rowExpansion/.env
new file mode 100644
index 0000000..3e32829
--- /dev/null
+++ b/packages/rowExpansion/.env
@@ -0,0 +1,2 @@
+VITE_CODE_SANDBOX_URL_ROOT=https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/packages
+VITE_STACK_BLITZ_URL_ROOT=https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/packages
\ No newline at end of file
diff --git a/packages/rowExpansion/src/ExampleLink.tsx b/packages/rowExpansion/src/ExampleLink.tsx
new file mode 100644
index 0000000..b721e60
--- /dev/null
+++ b/packages/rowExpansion/src/ExampleLink.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const ExampleLink = ({ icon, label, url }) => {
+  const Icon = icon;
+  return <a className='example--link' href={url} target='_blank'>
+    {icon && <Icon className="example--link__icon" />}
+    {label}
+  </a>
+}
\ No newline at end of file
diff --git a/packages/rowExpansion/src/RowExpansion.tsx b/packages/rowExpansion/src/RowExpansion.tsx
index 0039e2e..5d55ae5 100644
--- a/packages/rowExpansion/src/RowExpansion.tsx
+++ b/packages/rowExpansion/src/RowExpansion.tsx
@@ -22,6 +22,9 @@ import {
   getExpandedRowModel
 } from '@tanstack/react-table'
 import { makeData } from './makeData';
+import { ExampleLink } from './ExampleLink';
+import { Launch } from '@carbon/react/icons'
+import * as packageJson from '../package.json'
 
 type Resource = {
   id: string
@@ -75,6 +78,10 @@ export const RowExpansion = () => {
     <TableContainer
       title="Row expansion"
       className="basic-table tanstack-example"
+      description={<span className='flex'>
+        <ExampleLink url={`${import.meta.env.VITE_CODE_SANDBOX_URL_ROOT}/${packageJson.name}`} icon={Launch} label="Code sandbox" />
+        <ExampleLink url={`${import.meta.env.VITE_STACK_BLITZ_URL_ROOT}/${packageJson.name}`} icon={Launch} label="StackBlitz" />
+      </span>}
       style={{
         width: table.getCenterTotalSize(),
       }}
diff --git a/packages/rowExpansion/src/index.scss b/packages/rowExpansion/src/index.scss
index da16da6..f8f9347 100644
--- a/packages/rowExpansion/src/index.scss
+++ b/packages/rowExpansion/src/index.scss
@@ -1,8 +1,21 @@
 @use '@carbon/react' with ($font-path: '@ibm/plex');
+@use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
 @use './App.scss';
 
 body {
   margin: 0;
   padding: 0;
+}
+
+.example--link {
+  @include type.type-style('label-01');
+
+  display: flex;
+  align-items: center;
+  margin-right: 0.5rem;
+}
+
+.example--link__icon {
+  margin-right: 0.25rem;
 }
\ No newline at end of file
diff --git a/packages/rowExpansion/tsconfig.app.json b/packages/rowExpansion/tsconfig.app.json
index 4abf194..a68cf5e 100644
--- a/packages/rowExpansion/tsconfig.app.json
+++ b/packages/rowExpansion/tsconfig.app.json
@@ -21,7 +21,8 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
 
-    "types": [ "./src/customTypings.d.ts" ]
+    "types": [ "./src/customTypings.d.ts" ],
+    "resolveJsonModule": true
   },
   "include": ["./src"]
 }
diff --git a/packages/sortable/.env b/packages/sortable/.env
new file mode 100644
index 0000000..3e32829
--- /dev/null
+++ b/packages/sortable/.env
@@ -0,0 +1,2 @@
+VITE_CODE_SANDBOX_URL_ROOT=https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/packages
+VITE_STACK_BLITZ_URL_ROOT=https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/packages
\ No newline at end of file
diff --git a/packages/sortable/src/ExampleLink.tsx b/packages/sortable/src/ExampleLink.tsx
new file mode 100644
index 0000000..b721e60
--- /dev/null
+++ b/packages/sortable/src/ExampleLink.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const ExampleLink = ({ icon, label, url }) => {
+  const Icon = icon;
+  return <a className='example--link' href={url} target='_blank'>
+    {icon && <Icon className="example--link__icon" />}
+    {label}
+  </a>
+}
\ No newline at end of file
diff --git a/packages/sortable/src/SortableColumns.tsx b/packages/sortable/src/SortableColumns.tsx
index be5593a..1b9702f 100644
--- a/packages/sortable/src/SortableColumns.tsx
+++ b/packages/sortable/src/SortableColumns.tsx
@@ -24,6 +24,9 @@ const {
 
 
 import { makeData, Resource } from './makeData'
+import { ExampleLink } from './ExampleLink';
+import { Launch } from '@carbon/react/icons'
+import * as packageJson from '../package.json'
 
 //custom sorting logic for one of our enum columns
 const sortStatusFn: SortingFn<Resource> = (rowA, rowB) => {
@@ -106,7 +109,14 @@ export const SortableColumns = () => {
   // console.log(table.getState().sorting)
 
   return (
-    <TableContainer title="Column sorting" className='tanstack-example'>
+    <TableContainer
+      title="Column sorting"
+      className='tanstack-example'
+      description={<span className='flex'>
+        <ExampleLink url={`${import.meta.env.VITE_CODE_SANDBOX_URL_ROOT}/${packageJson.name}`} icon={Launch} label="Code sandbox" />
+        <ExampleLink url={`${import.meta.env.VITE_STACK_BLITZ_URL_ROOT}/${packageJson.name}`} icon={Launch} label="StackBlitz" />
+      </span>}
+    >
       <Table className='sortable-example'>
         <TableHead>
           {table.getHeaderGroups().map(headerGroup => (
diff --git a/packages/sortable/src/index.scss b/packages/sortable/src/index.scss
index da16da6..f8f9347 100644
--- a/packages/sortable/src/index.scss
+++ b/packages/sortable/src/index.scss
@@ -1,8 +1,21 @@
 @use '@carbon/react' with ($font-path: '@ibm/plex');
+@use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
 @use './App.scss';
 
 body {
   margin: 0;
   padding: 0;
+}
+
+.example--link {
+  @include type.type-style('label-01');
+
+  display: flex;
+  align-items: center;
+  margin-right: 0.5rem;
+}
+
+.example--link__icon {
+  margin-right: 0.25rem;
 }
\ No newline at end of file
diff --git a/packages/sortable/tsconfig.app.json b/packages/sortable/tsconfig.app.json
index 4abf194..a68cf5e 100644
--- a/packages/sortable/tsconfig.app.json
+++ b/packages/sortable/tsconfig.app.json
@@ -21,7 +21,8 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
 
-    "types": [ "./src/customTypings.d.ts" ]
+    "types": [ "./src/customTypings.d.ts" ],
+    "resolveJsonModule": true
   },
   "include": ["./src"]
 }
diff --git a/packages/sticky-columns/.env b/packages/sticky-columns/.env
new file mode 100644
index 0000000..3e32829
--- /dev/null
+++ b/packages/sticky-columns/.env
@@ -0,0 +1,2 @@
+VITE_CODE_SANDBOX_URL_ROOT=https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/packages
+VITE_STACK_BLITZ_URL_ROOT=https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/packages
\ No newline at end of file
diff --git a/packages/sticky-columns/src/ExampleLink.tsx b/packages/sticky-columns/src/ExampleLink.tsx
new file mode 100644
index 0000000..b721e60
--- /dev/null
+++ b/packages/sticky-columns/src/ExampleLink.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const ExampleLink = ({ icon, label, url }) => {
+  const Icon = icon;
+  return <a className='example--link' href={url} target='_blank'>
+    {icon && <Icon className="example--link__icon" />}
+    {label}
+  </a>
+}
\ No newline at end of file
diff --git a/packages/sticky-columns/src/StickyColumns.tsx b/packages/sticky-columns/src/StickyColumns.tsx
index c802883..57d96d8 100644
--- a/packages/sticky-columns/src/StickyColumns.tsx
+++ b/packages/sticky-columns/src/StickyColumns.tsx
@@ -18,6 +18,9 @@ const {
   TableHeader,
   TableRow,
 } = DataTable;
+import { ExampleLink } from './ExampleLink';
+import { Launch } from '@carbon/react/icons'
+import * as packageJson from '../package.json'
 
 //These are the important styles to make sticky column pinning work!
 //Apply styles like this using your CSS strategy of choice with this kind of logic to head cells, data cells, footer cells, etc.
@@ -105,6 +108,10 @@ export const StickyColumns = () => {
       <TableContainer
         title="Sticky columns"
         className='tanstack-example sticky-example'
+        description={<span className='flex'>
+          <ExampleLink url={`${import.meta.env.VITE_CODE_SANDBOX_URL_ROOT}/${packageJson.name}`} icon={Launch} label="Code sandbox" />
+          <ExampleLink url={`${import.meta.env.VITE_STACK_BLITZ_URL_ROOT}/${packageJson.name}`} icon={Launch} label="StackBlitz" />
+        </span>}
         style={{
           width: 500,
         }}
diff --git a/packages/sticky-columns/src/index.scss b/packages/sticky-columns/src/index.scss
index da16da6..f8f9347 100644
--- a/packages/sticky-columns/src/index.scss
+++ b/packages/sticky-columns/src/index.scss
@@ -1,8 +1,21 @@
 @use '@carbon/react' with ($font-path: '@ibm/plex');
+@use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
 @use './App.scss';
 
 body {
   margin: 0;
   padding: 0;
+}
+
+.example--link {
+  @include type.type-style('label-01');
+
+  display: flex;
+  align-items: center;
+  margin-right: 0.5rem;
+}
+
+.example--link__icon {
+  margin-right: 0.25rem;
 }
\ No newline at end of file
diff --git a/packages/sticky-columns/tsconfig.app.json b/packages/sticky-columns/tsconfig.app.json
index 4abf194..a68cf5e 100644
--- a/packages/sticky-columns/tsconfig.app.json
+++ b/packages/sticky-columns/tsconfig.app.json
@@ -21,7 +21,8 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
 
-    "types": [ "./src/customTypings.d.ts" ]
+    "types": [ "./src/customTypings.d.ts" ],
+    "resolveJsonModule": true
   },
   "include": ["./src"]
 }