diff --git a/packages/vx-brush/Readme.md b/packages/vx-brush/Readme.md
index 4cfbbee39..3d0247bc1 100644
--- a/packages/vx-brush/Readme.md
+++ b/packages/vx-brush/Readme.md
@@ -1,5 +1,13 @@
 # @vx/brush
 
+<a title="@vx/brush npm downloads" href="https://www.npmjs.com/package/@vx/brush">
+  <img src="https://img.shields.io/npm/dm/@vx/brush.svg?style=flat-square" />
+</a>
+
+A brush allows you to select a sub-region of your chart or axis.
+
+## Installation
+
 ```
 npm install --save @vx/brush
-```
\ No newline at end of file
+```
diff --git a/packages/vx-curve/Readme.md b/packages/vx-curve/Readme.md
index 497361c25..7b4a21a96 100644
--- a/packages/vx-curve/Readme.md
+++ b/packages/vx-curve/Readme.md
@@ -1,26 +1,25 @@
 # @vx/curve
 
+<a title="@vx/curve npm downloads" href="https://www.npmjs.com/package/@vx/curve">
+  <img src="https://img.shields.io/npm/dm/@vx/curve.svg?style=flat-square" />
+</a>
+
+## Installation
+
 ```
 npm install --save @vx/curve
 ```
 
 ## Overview
 
-A curve is a function that can be passed into other vx objects, mainly a LinePath to change the way the line is structured.
-
-For example, checkout the difference between a `Curve.natural`:
-
-![natural curve](https://raw.githubusercontent.com/d3/d3-shape/master/img/natural.png)
-
-and a `Curve.step`:
-
-![step curve](https://raw.githubusercontent.com/d3/d3-shape/master/img/step.png)
-
-The `@vx/curve` package is a wrapper over [d3-shape](https://github.com/d3/d3-shape) curve functions.
+The `@vx/curve` package is a wrapper of the [d3-shape](https://github.com/d3/d3-shape) curve
+functions. A `curve` is a function that can be passed into other `vx` objects that draw lines or
+paths, such as a `LinePath`, to change the way the line between points is drawn. Click on the
+example below for an interactive way to explore curve aesthetics.
 
-Any function with the prefix `curve` in d3 can be used through `vx` like so:
+Any function with the prefix `curve` in `d3` can be used through `vx` like so:
 
-``` javascript
+```javascript
 import { curveCatmullRomOpen } from '@vx/curve';
 let line = (<Shape.LinePath curve={curveCatmullRomOpen} />)
 
@@ -31,7 +30,7 @@ let line = (<Shape.LinePath curve={Curve.curveCatmullRomOpen} />)
 
 ## Functions
 
-|           vx          |                                      d3                                       |
+| vx                    | d3                                                                            |
 | --------------------- | ----------------------------------------------------------------------------- |
 | curveBasis            | [curveBasis](https://github.com/d3/d3-shape#curveBasis)                       |
 | curveBasisClose       | [curveBasisClosed](https://github.com/d3/d3-shape#curveBasisClosed)           |
diff --git a/packages/vx-demo/src/components/Gallery/index.tsx b/packages/vx-demo/src/components/Gallery/index.tsx
index f3f6d16e1..f86d4c699 100644
--- a/packages/vx-demo/src/components/Gallery/index.tsx
+++ b/packages/vx-demo/src/components/Gallery/index.tsx
@@ -82,9 +82,6 @@ const tiles = [
   ZoomITile,
 ];
 const tiltOptions = { max: 8, scale: 1 };
-const columnCount = 3;
-const emptyTileCount =
-  tiles.length % columnCount > 0 ? columnCount - (tiles.length % columnCount) : 0;
 
 export default function Gallery() {
   return (
@@ -95,16 +92,11 @@ export default function Gallery() {
             <Tile />
           </Tilt>
         ))}
-        {[...new Array(emptyTileCount)].map((_, i) => (
-          <GalleryTile key={`placeholder-${i}`} exampleRenderer={() => null} />
-        ))}
       </div>
       <style jsx>{`
         .gallery {
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-          justify-content: space-around;
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
           overflow-x: hidden;
           padding-bottom: 20px;
         }
diff --git a/packages/vx-demo/src/components/GalleryTile.tsx b/packages/vx-demo/src/components/GalleryTile.tsx
index 647951bf1..ab96b6781 100644
--- a/packages/vx-demo/src/components/GalleryTile.tsx
+++ b/packages/vx-demo/src/components/GalleryTile.tsx
@@ -68,7 +68,7 @@ export default function GalleryTile<ExampleProps extends WidthAndHeight>({
           display: flex;
           height: 390px;
           flex: 1;
-          min-width: 25%;
+          min-width: 300px;
           flex-direction: column;
           border-radius: 14px;
         }
diff --git a/packages/vx-demo/src/pages/Areas.tsx b/packages/vx-demo/src/pages/Areas.tsx
index 27bdb7d35..5b00bc16d 100644
--- a/packages/vx-demo/src/pages/Areas.tsx
+++ b/packages/vx-demo/src/pages/Areas.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 import Show from '../components/Show';
 import Area from '../sandboxes/vx-area/Example';
 import AreaSource from '!!raw-loader!../sandboxes/vx-area/Example';
+import packageJson from '../sandboxes/vx-area/package.json';
 
 export default () => (
-  <Show component={Area} title="Areas" codeSandboxDirectoryName="vx-area">
+  <Show component={Area} title="Areas" codeSandboxDirectoryName="vx-area" packageJson={packageJson}>
     {AreaSource}
   </Show>
 );
diff --git a/packages/vx-demo/src/pages/BarGroup.tsx b/packages/vx-demo/src/pages/BarGroup.tsx
index aa6babe88..5a90ae2bf 100644
--- a/packages/vx-demo/src/pages/BarGroup.tsx
+++ b/packages/vx-demo/src/pages/BarGroup.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Show from '../components/Show';
 import BarGroup from '../sandboxes/vx-bargroup/Example';
 import BarGroupSource from '!!raw-loader!../sandboxes/vx-bargroup/Example';
+import packageJson from '../sandboxes/vx-bargroup/package.json';
 
 export default () => (
   <Show
@@ -10,6 +11,7 @@ export default () => (
     component={BarGroup}
     title="Bar Group"
     codeSandboxDirectoryName="vx-bargroup"
+    packageJson={packageJson}
   >
     {BarGroupSource}
   </Show>
diff --git a/packages/vx-demo/src/pages/BarGroupHorizontal.tsx b/packages/vx-demo/src/pages/BarGroupHorizontal.tsx
index fe11434e5..12c60ddc9 100644
--- a/packages/vx-demo/src/pages/BarGroupHorizontal.tsx
+++ b/packages/vx-demo/src/pages/BarGroupHorizontal.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Show from '../components/Show';
 import BarGroupHorizontal from '../sandboxes/vx-bargroup-horizontal/Example';
 import BarGroupHorizontalSource from '!!raw-loader!../sandboxes/vx-bargroup-horizontal/Example';
+import packageJson from '../sandboxes/vx-bargroup-horizontal/package.json';
 
 export default () => (
   <Show
@@ -10,6 +11,7 @@ export default () => (
     component={BarGroupHorizontal}
     title="Bar Group Horizontal"
     codeSandboxDirectoryName="vx-bargroup-horizontal"
+    packageJson={packageJson}
   >
     {BarGroupHorizontalSource}
   </Show>
diff --git a/packages/vx-demo/src/pages/BarStack.tsx b/packages/vx-demo/src/pages/BarStack.tsx
index d2f2ffc52..44c2d4ae6 100644
--- a/packages/vx-demo/src/pages/BarStack.tsx
+++ b/packages/vx-demo/src/pages/BarStack.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Show from '../components/Show';
 import BarStack from '../sandboxes/vx-barstack/Example';
 import BarStackSource from '!!raw-loader!../sandboxes/vx-barstack/Example';
+import packageJson from '../sandboxes/vx-barstack/package.json';
 
 export default () => (
   <Show
@@ -10,6 +11,7 @@ export default () => (
     component={BarStack}
     title="Bar Stack"
     codeSandboxDirectoryName="vx-barstack"
+    packageJson={packageJson}
   >
     {BarStackSource}
   </Show>
diff --git a/packages/vx-demo/src/pages/BarStackHorizontal.tsx b/packages/vx-demo/src/pages/BarStackHorizontal.tsx
index 6c42d6046..a37461638 100644
--- a/packages/vx-demo/src/pages/BarStackHorizontal.tsx
+++ b/packages/vx-demo/src/pages/BarStackHorizontal.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Show from '../components/Show';
 import BarStackHorizontal from '../sandboxes/vx-barstack-horizontal/Example';
 import BarStackHorizontalSource from '!!raw-loader!../sandboxes/vx-barstack-horizontal/Example';
+import packageJson from '../sandboxes/vx-barstack-horizontal/package.json';
 
 export default () => {
   return (
@@ -16,6 +17,7 @@ export default () => {
       component={BarStackHorizontal}
       title="Bar Stack Horizontal"
       codeSandboxDirectoryName="vx-barstack-horizontal"
+      packageJson={packageJson}
     >
       {BarStackHorizontalSource}
     </Show>
diff --git a/packages/vx-demo/src/pages/Bars.tsx b/packages/vx-demo/src/pages/Bars.tsx
index f070fb311..eb6944af8 100644
--- a/packages/vx-demo/src/pages/Bars.tsx
+++ b/packages/vx-demo/src/pages/Bars.tsx
@@ -2,9 +2,16 @@ import React from 'react';
 import Show from '../components/Show';
 import Bars from '../sandboxes/vx-bars/Example';
 import BarsSource from '!!raw-loader!../sandboxes/vx-bars/Example';
+import packageJson from '../sandboxes/vx-bars/package.json';
 
 export default () => (
-  <Show events component={Bars} title="Bars" codeSandboxDirectoryName="vx-bars">
+  <Show
+    events
+    component={Bars}
+    title="Bars"
+    codeSandboxDirectoryName="vx-bars"
+    packageJson={packageJson}
+  >
     {BarsSource}
   </Show>
 );
diff --git a/packages/vx-demo/src/pages/Brush.tsx b/packages/vx-demo/src/pages/Brush.tsx
index bfcd5d63b..dd38e2d12 100644
--- a/packages/vx-demo/src/pages/Brush.tsx
+++ b/packages/vx-demo/src/pages/Brush.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Show from '../components/Show';
 import Brush from '../sandboxes/vx-brush/Example';
 import BrushSource from '!!raw-loader!../sandboxes/vx-brush/Example';
+import packageJson from '../sandboxes/vx-brush/package.json';
 
 export default () => (
   <Show
@@ -14,6 +15,7 @@ export default () => (
       bottom: 10,
     }}
     codeSandboxDirectoryName="vx-brush"
+    packageJson={packageJson}
   >
     {BrushSource}
   </Show>
diff --git a/packages/vx-demo/src/pages/Chord.tsx b/packages/vx-demo/src/pages/Chord.tsx
index 27cde3b0b..74a5a7075 100644
--- a/packages/vx-demo/src/pages/Chord.tsx
+++ b/packages/vx-demo/src/pages/Chord.tsx
@@ -2,10 +2,16 @@ import React from 'react';
 import Show from '../components/Show';
 import Chord from '../sandboxes/vx-chord/Example';
 import ChordSource from '!!raw-loader!../sandboxes/vx-chord/Example';
+import packageJson from '../sandboxes/vx-chord/package.json';
 
 export default () => {
   return (
-    <Show component={Chord} title="Chords" codeSandboxDirectoryName="vx-chord">
+    <Show
+      component={Chord}
+      title="Chords"
+      codeSandboxDirectoryName="vx-chord"
+      packageJson={packageJson}
+    >
       {ChordSource}
     </Show>
   );
diff --git a/packages/vx-demo/src/pages/Curves.tsx b/packages/vx-demo/src/pages/Curves.tsx
index 2d5ce9956..ea98f2643 100644
--- a/packages/vx-demo/src/pages/Curves.tsx
+++ b/packages/vx-demo/src/pages/Curves.tsx
@@ -2,10 +2,16 @@ import React from 'react';
 import Show from '../components/Show';
 import Lines from '../sandboxes/vx-curve/Example';
 import LinesSource from '!!raw-loader!../sandboxes/vx-curve/Example';
+import packageJson from '../sandboxes/vx-curve/package.json';
 
 export default () => {
   return (
-    <Show component={Lines} title="Curves" codeSandboxDirectoryName="vx-curve">
+    <Show
+      component={Lines}
+      title="Curves"
+      codeSandboxDirectoryName="vx-curve"
+      packageJson={packageJson}
+    >
       {LinesSource}
     </Show>
   );
diff --git a/packages/vx-demo/src/pages/Dendrograms.tsx b/packages/vx-demo/src/pages/Dendrograms.tsx
index b9eff6ec3..fff348cf4 100644
--- a/packages/vx-demo/src/pages/Dendrograms.tsx
+++ b/packages/vx-demo/src/pages/Dendrograms.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Show from '../components/Show';
 import Dendrograms from '../sandboxes/vx-dendrogram/Example';
 import DendrogramsSource from '!!raw-loader!../sandboxes/vx-dendrogram/Example';
+import packageJson from '../sandboxes/vx-dendrogram/package.json';
 
 export default () => {
   return (
@@ -16,6 +17,7 @@ export default () => {
         right: 10,
         bottom: 80,
       }}
+      packageJson={packageJson}
     >
       {DendrogramsSource}
     </Show>
diff --git a/packages/vx-demo/src/pages/Dots.tsx b/packages/vx-demo/src/pages/Dots.tsx
index 13ba6cbc1..5c983e8fe 100644
--- a/packages/vx-demo/src/pages/Dots.tsx
+++ b/packages/vx-demo/src/pages/Dots.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 import Show from '../components/Show';
 import Dots from '../sandboxes/vx-dots/Example';
 import DotsSource from '!!raw-loader!../sandboxes/vx-dots/Example';
+import packageJson from '../sandboxes/vx-dots/package.json';
 
 export default () => (
-  <Show component={Dots} title="Dots" codeSandboxDirectoryName="vx-dots">
+  <Show component={Dots} title="Dots" codeSandboxDirectoryName="vx-dots" packageJson={packageJson}>
     {DotsSource}
   </Show>
 );
diff --git a/packages/vx-demo/src/pages/Drag-i.tsx b/packages/vx-demo/src/pages/Drag-i.tsx
index ff5b95b58..9b90898b2 100644
--- a/packages/vx-demo/src/pages/Drag-i.tsx
+++ b/packages/vx-demo/src/pages/Drag-i.tsx
@@ -2,10 +2,16 @@ import React from 'react';
 import Show from '../components/Show';
 import DragI from '../sandboxes/vx-drag-i/Example';
 import DragISource from '!!raw-loader!../sandboxes/vx-drag-i/Example';
+import packageJson from '../sandboxes/vx-drag-i/package.json';
 
 export default () => {
   return (
-    <Show component={DragI} title="Drag I" codeSandboxDirectoryName="vx-drag-i">
+    <Show
+      component={DragI}
+      title="Drag I"
+      codeSandboxDirectoryName="vx-drag-i"
+      packageJson={packageJson}
+    >
       {DragISource}
     </Show>
   );
diff --git a/packages/vx-demo/src/pages/Drag-ii.tsx b/packages/vx-demo/src/pages/Drag-ii.tsx
index e3cbde59f..135722c29 100644
--- a/packages/vx-demo/src/pages/Drag-ii.tsx
+++ b/packages/vx-demo/src/pages/Drag-ii.tsx
@@ -2,10 +2,16 @@ import React from 'react';
 import Show from '../components/Show';
 import DragII from '../sandboxes/vx-drag-ii/Example';
 import DragIISource from '!!raw-loader!../sandboxes/vx-drag-ii/Example';
+import packageJson from '../sandboxes/vx-drag-ii/package.json';
 
 export default () => {
   return (
-    <Show component={DragII} title="Drag II" codeSandboxDirectoryName="vx-drag-ii">
+    <Show
+      component={DragII}
+      title="Drag II"
+      codeSandboxDirectoryName="vx-drag-ii"
+      packageJson={packageJson}
+    >
       {DragIISource}
     </Show>
   );
diff --git a/packages/vx-demo/src/pages/Geo-Custom.tsx b/packages/vx-demo/src/pages/Geo-Custom.tsx
index 9b152c1bb..b82099219 100644
--- a/packages/vx-demo/src/pages/Geo-Custom.tsx
+++ b/packages/vx-demo/src/pages/Geo-Custom.tsx
@@ -2,10 +2,17 @@ import React from 'react';
 import Show from '../components/Show';
 import GeoCustom from '../sandboxes/vx-geo-custom/Example';
 import GeoCustomSource from '!!raw-loader!../sandboxes/vx-geo-custom/Example';
+import packageJson from '../sandboxes/vx-geo-custom/package.json';
 
 export default () => {
   return (
-    <Show events component={GeoCustom} title="Geo Custom" codeSandboxDirectoryName="vx-geo-custom">
+    <Show
+      events
+      component={GeoCustom}
+      title="Geo Custom"
+      codeSandboxDirectoryName="vx-geo-custom"
+      packageJson={packageJson}
+    >
       {GeoCustomSource}
     </Show>
   );
diff --git a/packages/vx-demo/src/pages/Geo-Mercator.tsx b/packages/vx-demo/src/pages/Geo-Mercator.tsx
index ca2a9c035..6fed20276 100644
--- a/packages/vx-demo/src/pages/Geo-Mercator.tsx
+++ b/packages/vx-demo/src/pages/Geo-Mercator.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Show from '../components/Show';
 import GeoMercator from '../sandboxes/vx-geo-mercator/Example';
 import GeoMercatorSource from '!!raw-loader!../sandboxes/vx-geo-mercator/Example';
+import packageJson from '../sandboxes/vx-geo-mercator/package.json';
 
 export default () => {
   return (
@@ -10,6 +11,7 @@ export default () => {
       component={GeoMercator}
       title="Geo Mercator"
       codeSandboxDirectoryName="vx-geo-mercator"
+      packageJson={packageJson}
     >
       {GeoMercatorSource}
     </Show>
diff --git a/packages/vx-demo/src/pages/Glyphs.tsx b/packages/vx-demo/src/pages/Glyphs.tsx
index 80202c334..0725676a4 100644
--- a/packages/vx-demo/src/pages/Glyphs.tsx
+++ b/packages/vx-demo/src/pages/Glyphs.tsx
@@ -2,10 +2,16 @@ import React from 'react';
 import Show from '../components/Show';
 import Glyphs from '../sandboxes/vx-glyph/Example';
 import GlyphsSource from '!!raw-loader!../sandboxes/vx-glyph/Example';
+import packageJson from '../sandboxes/vx-glyph/package.json';
 
 export default () => {
   return (
-    <Show component={Glyphs} title="Glyphs" codeSandboxDirectoryName="vx-glyph">
+    <Show
+      component={Glyphs}
+      title="Glyphs"
+      codeSandboxDirectoryName="vx-glyph"
+      packageJson={packageJson}
+    >
       {GlyphsSource}
     </Show>
   );
diff --git a/packages/vx-demo/src/pages/Gradients.tsx b/packages/vx-demo/src/pages/Gradients.tsx
index 65fec3fce..54300764f 100644
--- a/packages/vx-demo/src/pages/Gradients.tsx
+++ b/packages/vx-demo/src/pages/Gradients.tsx
@@ -2,9 +2,16 @@ import React from 'react';
 import Show from '../components/Show';
 import Gradients from '../sandboxes/vx-gradient/Example';
 import GradientsSource from '!!raw-loader!../sandboxes/vx-gradient/Example';
+import packageJson from '../sandboxes/vx-gradient/package.json';
 
 export default () => (
-  <Show shadow component={Gradients} title="Gradients" codeSandboxDirectoryName="vx-gradient">
+  <Show
+    shadow
+    component={Gradients}
+    title="Gradients"
+    codeSandboxDirectoryName="vx-gradient"
+    packageJson={packageJson}
+  >
     {GradientsSource}
   </Show>
 );
diff --git a/packages/vx-demo/src/pages/Heatmaps.tsx b/packages/vx-demo/src/pages/Heatmaps.tsx
index 3af047888..f065979b2 100644
--- a/packages/vx-demo/src/pages/Heatmaps.tsx
+++ b/packages/vx-demo/src/pages/Heatmaps.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Show from '../components/Show';
 import Heatmaps from '../sandboxes/vx-heatmap/Example';
 import HeatmapsSource from '!!raw-loader!../sandboxes/vx-heatmap/Example';
+import packageJson from '../sandboxes/vx-heatmap/package.json';
 
 export default () => {
   return (
@@ -16,6 +17,7 @@ export default () => {
       component={Heatmaps}
       title="Heatmaps"
       codeSandboxDirectoryName="vx-heatmap"
+      packageJson={packageJson}
     >
       {HeatmapsSource}
     </Show>
diff --git a/packages/vx-demo/src/pages/Legends.tsx b/packages/vx-demo/src/pages/Legends.tsx
index ced0e92d8..12b40767d 100644
--- a/packages/vx-demo/src/pages/Legends.tsx
+++ b/packages/vx-demo/src/pages/Legends.tsx
@@ -2,10 +2,17 @@ import React from 'react';
 import Show from '../components/Show';
 import Legends from '../sandboxes/vx-legend/Example';
 import LegendsSource from '!!raw-loader!../sandboxes/vx-legend/Example';
+import packageJson from '../sandboxes/vx-legend/package.json';
 
 export default () => {
   return (
-    <Show events component={Legends} title="Legends" codeSandboxDirectoryName="vx-legend">
+    <Show
+      events
+      component={Legends}
+      title="Legends"
+      codeSandboxDirectoryName="vx-legend"
+      packageJson={packageJson}
+    >
       {LegendsSource}
     </Show>
   );
diff --git a/packages/vx-demo/src/pages/LineRadial.tsx b/packages/vx-demo/src/pages/LineRadial.tsx
index 3e9f7cbcf..953c2c970 100644
--- a/packages/vx-demo/src/pages/LineRadial.tsx
+++ b/packages/vx-demo/src/pages/LineRadial.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Show from '../components/Show';
 import LineRadial from '../sandboxes/vx-shape-line-radial/Example';
 import LineRadialSource from '!!raw-loader!../sandboxes/vx-shape-line-radial/Example';
+import packageJson from '../sandboxes/vx-shape-line-radial/package.json';
 
 export default () => {
   return (
@@ -9,6 +10,7 @@ export default () => {
       component={LineRadial}
       title="Line Radial"
       codeSandboxDirectoryName="vx-shape-line-radial"
+      packageJson={packageJson}
     >
       {LineRadialSource}
     </Show>
diff --git a/packages/vx-demo/src/pages/LinkTypes.tsx b/packages/vx-demo/src/pages/LinkTypes.tsx
index a4f900847..464b3f521 100644
--- a/packages/vx-demo/src/pages/LinkTypes.tsx
+++ b/packages/vx-demo/src/pages/LinkTypes.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Show from '../components/Show';
 import LinkTypes from '../sandboxes/vx-linktypes/Example';
 import LinkTypesSource from '!!raw-loader!../sandboxes/vx-linktypes/Example';
+import packageJson from '../sandboxes/vx-linktypes/package.json';
 
 export default () => {
   return (
@@ -16,6 +17,7 @@ export default () => {
         right: 40,
         bottom: 40,
       }}
+      packageJson={packageJson}
     >
       {LinkTypesSource}
     </Show>
diff --git a/packages/vx-demo/src/pages/Network.tsx b/packages/vx-demo/src/pages/Network.tsx
index a7a817678..bd253e761 100644
--- a/packages/vx-demo/src/pages/Network.tsx
+++ b/packages/vx-demo/src/pages/Network.tsx
@@ -2,9 +2,15 @@ import React from 'react';
 import Show from '../components/Show';
 import Network from '../sandboxes/vx-network/Example';
 import NetworkSource from '!!raw-loader!../sandboxes/vx-network/Example';
+import packageJson from '../sandboxes/vx-network/package.json';
 
 export default () => (
-  <Show component={Network} title="Network" codeSandboxDirectoryName="vx-network">
+  <Show
+    component={Network}
+    title="Network"
+    codeSandboxDirectoryName="vx-network"
+    packageJson={packageJson}
+  >
     {NetworkSource}
   </Show>
 );
diff --git a/packages/vx-demo/src/pages/Pack.tsx b/packages/vx-demo/src/pages/Pack.tsx
index c16c3d82c..92f427593 100644
--- a/packages/vx-demo/src/pages/Pack.tsx
+++ b/packages/vx-demo/src/pages/Pack.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 import Show from '../components/Show';
 import Pack from '../sandboxes/vx-pack/Example';
 import PackSource from '!!raw-loader!../sandboxes/vx-pack/Example';
+import packageJson from '../sandboxes/vx-pack/package.json';
 
 export default () => (
-  <Show component={Pack} title="Pack" codeSandboxDirectoryName="vx-pack">
+  <Show component={Pack} title="Pack" codeSandboxDirectoryName="vx-pack" packageJson={packageJson}>
     {PackSource}
   </Show>
 );
diff --git a/packages/vx-demo/src/pages/Patterns.tsx b/packages/vx-demo/src/pages/Patterns.tsx
index 315fd6a28..639dcb79e 100644
--- a/packages/vx-demo/src/pages/Patterns.tsx
+++ b/packages/vx-demo/src/pages/Patterns.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Show from '../components/Show';
 import Patterns from '../sandboxes/vx-pattern/Example';
 import PatternsSource from '!!raw-loader!../sandboxes/vx-pattern/Example';
+import packageJson from '../sandboxes/vx-pattern/package.json';
 
 export default () => {
   return (
@@ -15,6 +16,7 @@ export default () => {
         bottom: 10,
       }}
       codeSandboxDirectoryName="vx-pattern"
+      packageJson={packageJson}
     >
       {PatternsSource}
     </Show>
diff --git a/packages/vx-demo/src/pages/Pies.tsx b/packages/vx-demo/src/pages/Pies.tsx
index 5b7753a30..66cc2a6db 100644
--- a/packages/vx-demo/src/pages/Pies.tsx
+++ b/packages/vx-demo/src/pages/Pies.tsx
@@ -2,11 +2,15 @@ import React from 'react';
 import Show from '../components/Show';
 import Pies from '../sandboxes/vx-shape-pie/Example';
 import PiesSource from '!!raw-loader!../sandboxes/vx-shape-pie/Example';
+import packageJson from '../sandboxes/vx-shape-pie/package.json';
 
-export default () => {
-  return (
-    <Show component={Pies} title="Pies" codeSandboxDirectoryName="vx-shape-pie">
-      {PiesSource}
-    </Show>
-  );
-};
+export default () => (
+  <Show
+    component={Pies}
+    title="Pies"
+    codeSandboxDirectoryName="vx-shape-pie"
+    packageJson={packageJson}
+  >
+    {PiesSource}
+  </Show>
+);
diff --git a/packages/vx-demo/src/pages/Polygons.tsx b/packages/vx-demo/src/pages/Polygons.tsx
index 5315b525a..9865222b4 100644
--- a/packages/vx-demo/src/pages/Polygons.tsx
+++ b/packages/vx-demo/src/pages/Polygons.tsx
@@ -2,9 +2,15 @@ import React from 'react';
 import Show from '../components/Show';
 import Polygons from '../sandboxes/vx-polygons/Example';
 import PolygonsSource from '!!raw-loader!../sandboxes/vx-polygons/Example';
+import packageJson from '../sandboxes/vx-polygons/package.json';
 
 export default () => (
-  <Show component={Polygons} title="Polygons" codeSandboxDirectoryName="vx-polygons">
+  <Show
+    component={Polygons}
+    title="Polygons"
+    codeSandboxDirectoryName="vx-polygons"
+    packageJson={packageJson}
+  >
     {PolygonsSource}
   </Show>
 );
diff --git a/packages/vx-demo/src/pages/Radar.tsx b/packages/vx-demo/src/pages/Radar.tsx
index 07d57e940..e25cfffa3 100644
--- a/packages/vx-demo/src/pages/Radar.tsx
+++ b/packages/vx-demo/src/pages/Radar.tsx
@@ -2,16 +2,16 @@ import React from 'react';
 import Show from '../components/Show';
 import Radar from '../sandboxes/vx-radar/Example';
 import RadarSource from '!!raw-loader!../sandboxes/vx-radar/Example';
+import packageJson from '../sandboxes/vx-radar/package.json';
 
-export default () => {
-  return (
-    <Show
-      margin={{ top: 0, right: 0, bottom: 50, left: 0 }}
-      component={Radar}
-      title="Radar"
-      codeSandboxDirectoryName="vx-radar"
-    >
-      {RadarSource}
-    </Show>
-  );
-};
+export default () => (
+  <Show
+    margin={{ top: 0, right: 0, bottom: 50, left: 0 }}
+    component={Radar}
+    title="Radar"
+    codeSandboxDirectoryName="vx-radar"
+    packageJson={packageJson}
+  >
+    {RadarSource}
+  </Show>
+);
diff --git a/packages/vx-demo/src/pages/Responsive.tsx b/packages/vx-demo/src/pages/Responsive.tsx
index b33a46bdd..8c8a728c6 100644
--- a/packages/vx-demo/src/pages/Responsive.tsx
+++ b/packages/vx-demo/src/pages/Responsive.tsx
@@ -2,11 +2,15 @@ import React from 'react';
 import Show from '../components/Show';
 import Responsive from '../sandboxes/vx-responsive/Example';
 import ResponsiveSource from '!!raw-loader!../sandboxes/vx-responsive/Example';
+import packageJson from '../sandboxes/vx-responsive/package.json';
 
-export default () => {
-  return (
-    <Show component={Responsive} title="Responsive" codeSandboxDirectoryName="vx-responsive">
-      {ResponsiveSource}
-    </Show>
-  );
-};
+export default () => (
+  <Show
+    component={Responsive}
+    title="Responsive"
+    codeSandboxDirectoryName="vx-responsive"
+    packageJson={packageJson}
+  >
+    {ResponsiveSource}
+  </Show>
+);
diff --git a/packages/vx-demo/src/pages/Stacked-Areas.tsx b/packages/vx-demo/src/pages/Stacked-Areas.tsx
index 4b961d172..8b1ab6d2a 100644
--- a/packages/vx-demo/src/pages/Stacked-Areas.tsx
+++ b/packages/vx-demo/src/pages/Stacked-Areas.tsx
@@ -2,21 +2,21 @@ import React from 'react';
 import Show from '../components/Show';
 import StackedAreas from '../sandboxes/vx-stacked-areas/Example';
 import StackedAreasSource from '!!raw-loader!../sandboxes/vx-stacked-areas/Example';
+import packageJson from '../sandboxes/vx-stacked-areas/package.json';
 
-export default () => {
-  return (
-    <Show
-      component={StackedAreas}
-      title="Stacked Areas"
-      codeSandboxDirectoryName="vx-stacked-areas"
-      margin={{
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 10,
-      }}
-    >
-      {StackedAreasSource}
-    </Show>
-  );
-};
+export default () => (
+  <Show
+    component={StackedAreas}
+    title="Stacked Areas"
+    codeSandboxDirectoryName="vx-stacked-areas"
+    margin={{
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 10,
+    }}
+    packageJson={packageJson}
+  >
+    {StackedAreasSource}
+  </Show>
+);
diff --git a/packages/vx-demo/src/pages/Statsplot.tsx b/packages/vx-demo/src/pages/Statsplot.tsx
index b662032e7..53a11e28c 100644
--- a/packages/vx-demo/src/pages/Statsplot.tsx
+++ b/packages/vx-demo/src/pages/Statsplot.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Show from '../components/Show';
 import StatsPlot from '../sandboxes/vx-stats/Example';
 import StatsPlotSource from '!!raw-loader!../sandboxes/vx-stats/Example';
+import packageJson from '../sandboxes/vx-stats/package.json';
 
 export default () => (
   <Show
@@ -9,6 +10,7 @@ export default () => (
     component={StatsPlot}
     title="BoxPlot + ViolinPlot"
     codeSandboxDirectoryName="vx-stats"
+    packageJson={packageJson}
   >
     {StatsPlotSource}
   </Show>
diff --git a/packages/vx-demo/src/pages/Streamgraph.tsx b/packages/vx-demo/src/pages/Streamgraph.tsx
index 729a9d412..375d51f89 100644
--- a/packages/vx-demo/src/pages/Streamgraph.tsx
+++ b/packages/vx-demo/src/pages/Streamgraph.tsx
@@ -2,11 +2,15 @@ import React from 'react';
 import Show from '../components/Show';
 import Streamgraph from '../sandboxes/vx-streamgraph/Example';
 import StreamgraphSource from '!!raw-loader!../sandboxes/vx-streamgraph/Example';
+import packageJson from '../sandboxes/vx-streamgraph/package.json';
 
-export default () => {
-  return (
-    <Show component={Streamgraph} title="Streamgraph" codeSandboxDirectoryName="vx-streamgraph">
-      {StreamgraphSource}
-    </Show>
-  );
-};
+export default () => (
+  <Show
+    component={Streamgraph}
+    title="Streamgraph"
+    codeSandboxDirectoryName="vx-streamgraph"
+    packageJson={packageJson}
+  >
+    {StreamgraphSource}
+  </Show>
+);
diff --git a/packages/vx-demo/src/pages/Text.tsx b/packages/vx-demo/src/pages/Text.tsx
index 1b4f49657..8fbd2d6f5 100644
--- a/packages/vx-demo/src/pages/Text.tsx
+++ b/packages/vx-demo/src/pages/Text.tsx
@@ -599,17 +599,18 @@ return (
   );
 }
 
-export default () => {
-  return (
-    <Show
-      component={TextDemo}
-      title="Text"
-      margin={{
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 10,
-      }}
-    />
-  );
-};
+const packageJson = { dependencies: { '@vx/text': 'latest' } };
+
+export default () => (
+  <Show
+    component={TextDemo}
+    title="Text"
+    margin={{
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 10,
+    }}
+    packageJson={packageJson}
+  />
+);
diff --git a/packages/vx-demo/src/pages/Threshold.tsx b/packages/vx-demo/src/pages/Threshold.tsx
index e6d879f9c..1b9f12783 100644
--- a/packages/vx-demo/src/pages/Threshold.tsx
+++ b/packages/vx-demo/src/pages/Threshold.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Show from '../components/Show';
 import Threshold from '../sandboxes/vx-threshold/Example';
 import ThresholdSource from '!!raw-loader!../sandboxes/vx-threshold/Example';
+import packageJson from '../sandboxes/vx-threshold/package.json';
 
 function Description({ width }: { width: number }) {
   return (
@@ -16,15 +17,14 @@ function Description({ width }: { width: number }) {
   );
 }
 
-export default () => {
-  return (
-    <Show
-      component={Threshold}
-      title="Threshold"
-      description={Description}
-      codeSandboxDirectoryName="vx-threshold"
-    >
-      {ThresholdSource}
-    </Show>
-  );
-};
+export default () => (
+  <Show
+    component={Threshold}
+    title="Threshold"
+    description={Description}
+    codeSandboxDirectoryName="vx-threshold"
+    packageJson={packageJson}
+  >
+    {ThresholdSource}
+  </Show>
+);
diff --git a/packages/vx-demo/src/pages/Treemap.tsx b/packages/vx-demo/src/pages/Treemap.tsx
index a05d9adfb..c217085cd 100644
--- a/packages/vx-demo/src/pages/Treemap.tsx
+++ b/packages/vx-demo/src/pages/Treemap.tsx
@@ -2,11 +2,15 @@ import React from 'react';
 import Show from '../components/Show';
 import Treemap from '../sandboxes/vx-treemap/Example';
 import TreemapSource from '!!raw-loader!../sandboxes/vx-treemap/Example';
+import packageJson from '../sandboxes/vx-treemap/package.json';
 
-export default () => {
-  return (
-    <Show component={Treemap} title="Treemap" codeSandboxDirectoryName="vx-treemap">
-      {TreemapSource}
-    </Show>
-  );
-};
+export default () => (
+  <Show
+    component={Treemap}
+    title="Treemap"
+    codeSandboxDirectoryName="vx-treemap"
+    packageJson={packageJson}
+  >
+    {TreemapSource}
+  </Show>
+);
diff --git a/packages/vx-demo/src/pages/Trees.tsx b/packages/vx-demo/src/pages/Trees.tsx
index 20ce7bd51..91083d69f 100644
--- a/packages/vx-demo/src/pages/Trees.tsx
+++ b/packages/vx-demo/src/pages/Trees.tsx
@@ -2,9 +2,16 @@ import React from 'react';
 import Show from '../components/Show';
 import Trees from '../sandboxes/vx-tree/Example';
 import TreesSource from '!!raw-loader!../sandboxes/vx-tree/Example';
+import packageJson from '../sandboxes/vx-tree/package.json';
 
 export default () => (
-  <Show events title="Trees" component={Trees} codeSandboxDirectoryName="vx-tree">
+  <Show
+    events
+    title="Trees"
+    component={Trees}
+    codeSandboxDirectoryName="vx-tree"
+    packageJson={packageJson}
+  >
     {TreesSource}
   </Show>
 );
diff --git a/packages/vx-demo/src/pages/Voronoi.tsx b/packages/vx-demo/src/pages/Voronoi.tsx
index 3672d56e0..ffcc5e450 100644
--- a/packages/vx-demo/src/pages/Voronoi.tsx
+++ b/packages/vx-demo/src/pages/Voronoi.tsx
@@ -2,22 +2,22 @@ import React from 'react';
 import Show from '../components/Show';
 import VoronoiChart from '../sandboxes/vx-voronoi/Example';
 import VoronoiChartSource from '!!raw-loader!../sandboxes/vx-voronoi/Example';
+import packageJson from '../sandboxes/vx-voronoi/package.json';
 
-export default () => {
-  return (
-    <Show
-      events
-      margin={{
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-      }}
-      component={VoronoiChart}
-      title="Voronoi"
-      codeSandboxDirectoryName="vx-voronoi"
-    >
-      {VoronoiChartSource}
-    </Show>
-  );
-};
+export default () => (
+  <Show
+    events
+    margin={{
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+    }}
+    component={VoronoiChart}
+    title="Voronoi"
+    codeSandboxDirectoryName="vx-voronoi"
+    packageJson={packageJson}
+  >
+    {VoronoiChartSource}
+  </Show>
+);
diff --git a/packages/vx-demo/src/pages/Zoom-i.tsx b/packages/vx-demo/src/pages/Zoom-i.tsx
index f480c1701..69af2e65e 100644
--- a/packages/vx-demo/src/pages/Zoom-i.tsx
+++ b/packages/vx-demo/src/pages/Zoom-i.tsx
@@ -2,9 +2,15 @@ import React from 'react';
 import Show from '../components/Show';
 import ZoomI from '../sandboxes/vx-zoom-i/Example';
 import ZoomISource from '!!raw-loader!../sandboxes/vx-zoom-i/Example';
+import packageJson from '../sandboxes/vx-zoom-i/package.json';
 
 export default () => (
-  <Show component={ZoomI} title="Zoom I" codeSandboxDirectoryName="vx-zoom-i">
+  <Show
+    component={ZoomI}
+    title="Zoom I"
+    codeSandboxDirectoryName="vx-zoom-i"
+    packageJson={packageJson}
+  >
     {ZoomISource}
   </Show>
 );
diff --git a/packages/vx-demo/src/pages/docs/Bounds.tsx b/packages/vx-demo/src/pages/docs/Bounds.tsx
index af5cb310f..9e9b54451 100644
--- a/packages/vx-demo/src/pages/docs/Bounds.tsx
+++ b/packages/vx-demo/src/pages/docs/Bounds.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-
 import BoundsReadme from '!!raw-loader!../../../../vx-bounds/Readme.md';
 import DocPage from '../../components/DocPage';
 
diff --git a/packages/vx-demo/src/pages/docs/Brush.tsx b/packages/vx-demo/src/pages/docs/Brush.tsx
index 3bd294b4b..933bfb999 100644
--- a/packages/vx-demo/src/pages/docs/Brush.tsx
+++ b/packages/vx-demo/src/pages/docs/Brush.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import BrushReadme from '!!raw-loader!../../../../vx-brush/Readme.md';
 import Brush from '../../../../vx-brush/src/Brush';
 import DocPage from '../../components/DocPage';
+import BrushTile from '../../components/Gallery/BrushTile';
 import { DocGenInfo } from '../../types';
 
 const components = [
@@ -9,4 +10,8 @@ const components = [
   Brush.__docgenInfo,
 ] as DocGenInfo[];
 
-export default () => <DocPage components={components} readme={BrushReadme} vxPackage="brush" />;
+const examples = [BrushTile];
+
+export default () => (
+  <DocPage components={components} examples={examples} readme={BrushReadme} vxPackage="brush" />
+);
diff --git a/packages/vx-demo/src/pages/docs/Chord.tsx b/packages/vx-demo/src/pages/docs/Chord.tsx
index 8de35d9be..228ce34d0 100644
--- a/packages/vx-demo/src/pages/docs/Chord.tsx
+++ b/packages/vx-demo/src/pages/docs/Chord.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-
 import ChordReadme from '!!raw-loader!../../../../vx-chord/Readme.md';
 import Chord from '../../../../vx-chord/src/Chord';
 import DocPage from '../../components/DocPage';
 import Ribbon from '../../../../vx-chord/src/Ribbon';
+import ChordTile from '../../components/Gallery/ChordTile';
 import { DocGenInfo } from '../../types';
 
 const components = [
@@ -13,4 +13,8 @@ const components = [
   Ribbon.__docgenInfo,
 ] as DocGenInfo[];
 
-export default () => <DocPage components={components} readme={ChordReadme} vxPackage="chord" />;
+const examples = [ChordTile];
+
+export default () => (
+  <DocPage components={components} examples={examples} readme={ChordReadme} vxPackage="chord" />
+);
diff --git a/packages/vx-demo/src/pages/docs/Curve.tsx b/packages/vx-demo/src/pages/docs/Curve.tsx
index b74804cad..5c48d6e22 100644
--- a/packages/vx-demo/src/pages/docs/Curve.tsx
+++ b/packages/vx-demo/src/pages/docs/Curve.tsx
@@ -1,5 +1,8 @@
 import React from 'react';
 import CurveReadme from '!!raw-loader!../../../../vx-curve/Readme.md';
 import DocPage from '../../components/DocPage';
+import CurvesTile from '../../components/Gallery/CurvesTile';
 
-export default () => <DocPage readme={CurveReadme} vxPackage="curve" />;
+const examples = [CurvesTile];
+
+export default () => <DocPage readme={CurveReadme} examples={examples} vxPackage="curve" />;
diff --git a/packages/vx-demo/src/pages/docs/Drag.tsx b/packages/vx-demo/src/pages/docs/Drag.tsx
index 57f697ef9..03f23932c 100644
--- a/packages/vx-demo/src/pages/docs/Drag.tsx
+++ b/packages/vx-demo/src/pages/docs/Drag.tsx
@@ -3,10 +3,16 @@ import DragReadme from '!!raw-loader!../../../../vx-drag/Readme.md';
 import Drag from '../../../../vx-drag/src/Drag';
 import DocPage from '../../components/DocPage';
 import { DocGenInfo } from '../../types';
+import DragITile from '../../components/Gallery/DragITile';
+import DragIITile from '../../components/Gallery/DragIITile';
 
 const components = [
   // @ts-ignore
   Drag.__docgenInfo,
 ] as DocGenInfo[];
 
-export default () => <DocPage components={components} readme={DragReadme} vxPackage="drag" />;
+const examples = [DragITile, DragIITile];
+
+export default () => (
+  <DocPage components={components} examples={examples} readme={DragReadme} vxPackage="drag" />
+);
diff --git a/packages/vx-demo/src/pages/docs/Event.tsx b/packages/vx-demo/src/pages/docs/Event.tsx
index 406187910..f2c050fee 100644
--- a/packages/vx-demo/src/pages/docs/Event.tsx
+++ b/packages/vx-demo/src/pages/docs/Event.tsx
@@ -1,5 +1,10 @@
 import React from 'react';
 import EventReadme from '!!raw-loader!../../../../vx-event/Readme.md';
 import DocPage from '../../components/DocPage';
+import AreaTile from '../../components/Gallery/AreaTile';
+import DotsTile from '../../components/Gallery/DotsTile';
+import VoronoiTile from '../../components/Gallery/VoronoiTile';
 
-export default () => <DocPage readme={EventReadme} vxPackage="event" />;
+const examples = [AreaTile, DotsTile, VoronoiTile];
+
+export default () => <DocPage readme={EventReadme} examples={examples} vxPackage="event" />;
diff --git a/packages/vx-demo/src/pages/docs/Geo.tsx b/packages/vx-demo/src/pages/docs/Geo.tsx
index fe5914319..8ae743bd5 100644
--- a/packages/vx-demo/src/pages/docs/Geo.tsx
+++ b/packages/vx-demo/src/pages/docs/Geo.tsx
@@ -11,6 +11,8 @@ import Orthographic from '../../../../vx-geo/src/projections/Orthographic';
 import Projection from '../../../../vx-geo/src/projections/Projection';
 import DocPage from '../../components/DocPage';
 import { DocGenInfo } from '../../types';
+import GeoMercatorTile from '../../components/Gallery/GeoMercatorTile';
+import GeoCustomTile from '../../components/Gallery/GeoCustomTile';
 
 const components = [
   // @ts-ignore
@@ -33,4 +35,8 @@ const components = [
   Orthographic.__docgenInfo,
 ] as DocGenInfo[];
 
-export default () => <DocPage components={components} readme={GeoReadme} vxPackage="geo" />;
+const examples = [GeoMercatorTile, GeoCustomTile];
+
+export default () => (
+  <DocPage components={components} examples={examples} readme={GeoReadme} vxPackage="geo" />
+);
diff --git a/packages/vx-demo/src/pages/docs/Glyph.tsx b/packages/vx-demo/src/pages/docs/Glyph.tsx
index ace08b512..1b74e9bc8 100644
--- a/packages/vx-demo/src/pages/docs/Glyph.tsx
+++ b/packages/vx-demo/src/pages/docs/Glyph.tsx
@@ -3,6 +3,8 @@ import GlyphReadme from '!!raw-loader!../../../../vx-glyph/Readme.md';
 import * as Glyph from '../../../../vx-glyph/src';
 import DocPage from '../../components/DocPage';
 import { DocGenInfo } from '../../types';
+import GlyphsTile from '../../components/Gallery/GlyphsTile';
+import LegendsTile from '../../components/Gallery/LegendsTile';
 
 const components = (Object.values(Glyph).map(
   component =>
@@ -10,4 +12,8 @@ const components = (Object.values(Glyph).map(
     component.__docgenInfo,
 ) as DocGenInfo[]).sort((a, b) => (a.displayName ?? '').localeCompare(b.displayName ?? ''));
 
-export default () => <DocPage components={components} readme={GlyphReadme} vxPackage="glyph" />;
+const examples = [GlyphsTile, LegendsTile];
+
+export default () => (
+  <DocPage components={components} examples={examples} readme={GlyphReadme} vxPackage="glyph" />
+);
diff --git a/packages/vx-demo/src/pages/docs/Gradient.tsx b/packages/vx-demo/src/pages/docs/Gradient.tsx
index 3227f3c63..72d17624f 100644
--- a/packages/vx-demo/src/pages/docs/Gradient.tsx
+++ b/packages/vx-demo/src/pages/docs/Gradient.tsx
@@ -1,9 +1,14 @@
 import React from 'react';
 import GradientReadme from '!!raw-loader!../../../../vx-gradient/Readme.md';
 import * as Gradients from '../../../../vx-gradient/src';
-
 import DocPage from '../../components/DocPage';
 import { DocGenInfo } from '../../types';
+import GradientsTile from '../../components/Gallery/GradientsTile';
+import AreaTile from '../../components/Gallery/AreaTile';
+import BarsTile from '../../components/Gallery/BarsTile';
+import ChordTile from '../../components/Gallery/ChordTile';
+import DragIITile from '../../components/Gallery/DragIITile';
+import PiesTile from '../../components/Gallery/PiesTile';
 
 const components = (Object.values(Gradients).map(
   component =>
@@ -18,6 +23,13 @@ const components = (Object.values(Gradients).map(
     (a.displayName ?? '').localeCompare(b.displayName ?? ''),
 );
 
+const examples = [GradientsTile, PiesTile, ChordTile, AreaTile, BarsTile, DragIITile];
+
 export default () => (
-  <DocPage components={components} readme={GradientReadme} vxPackage="gradient" />
+  <DocPage
+    components={components}
+    examples={examples}
+    readme={GradientReadme}
+    vxPackage="gradient"
+  />
 );
diff --git a/packages/vx-demo/src/pages/docs/Grid.tsx b/packages/vx-demo/src/pages/docs/Grid.tsx
index 7d89a789f..2f5539a87 100644
--- a/packages/vx-demo/src/pages/docs/Grid.tsx
+++ b/packages/vx-demo/src/pages/docs/Grid.tsx
@@ -5,6 +5,9 @@ import GridRows from '../../../../vx-grid/src/grids/GridRows';
 import GridColumns from '../../../../vx-grid/src/grids/GridColumns';
 import DocPage from '../../components/DocPage';
 import { DocGenInfo } from '../../types';
+import AxisTile from '../../components/Gallery/AxisTile';
+import BarStackTile from '../../components/Gallery/BarStackTile';
+import ThresholdTile from '../../components/Gallery/ThresholdTile';
 
 const components = [GridRows, GridColumns, Grid].map(
   c =>
@@ -12,4 +15,8 @@ const components = [GridRows, GridColumns, Grid].map(
     c.__docgenInfo,
 ) as DocGenInfo[];
 
-export default () => <DocPage components={components} readme={GridReadme} vxPackage="grid" />;
+const examples = [AxisTile, BarStackTile, ThresholdTile];
+
+export default () => (
+  <DocPage components={components} examples={examples} readme={GridReadme} vxPackage="grid" />
+);
diff --git a/packages/vx-demo/src/pages/docs/Group.tsx b/packages/vx-demo/src/pages/docs/Group.tsx
index caec50287..efa5cbb59 100644
--- a/packages/vx-demo/src/pages/docs/Group.tsx
+++ b/packages/vx-demo/src/pages/docs/Group.tsx
@@ -3,10 +3,20 @@ import GroupReadme from '!!raw-loader!../../../../vx-group/Readme.md';
 import Group from '../../../../vx-group/src/Group';
 import DocPage from '../../components/DocPage';
 import { DocGenInfo } from '../../types';
+import PatternsTile from '../../components/Gallery/PatternsTile';
+import RadarTile from '../../components/Gallery/RadarTile';
+import PiesTile from '../../components/Gallery/PiesTile';
+import TreemapTile from '../../components/Gallery/TreemapTile';
+import StatsPlotTile from '../../components/Gallery/StatsPlotTile';
+import LineRadialTile from '../../components/Gallery/LineRadialTile';
 
 const components = [
   // @ts-ignore
   Group.__docgenInfo,
 ] as DocGenInfo[];
 
-export default () => <DocPage components={components} readme={GroupReadme} vxPackage="group" />;
+const examples = [PatternsTile, RadarTile, PiesTile, TreemapTile, StatsPlotTile, LineRadialTile];
+
+export default () => (
+  <DocPage components={components} examples={examples} readme={GroupReadme} vxPackage="group" />
+);
diff --git a/packages/vx-demo/src/pages/docs/Heatmap.tsx b/packages/vx-demo/src/pages/docs/Heatmap.tsx
index 16eed06f8..86f96bbe1 100644
--- a/packages/vx-demo/src/pages/docs/Heatmap.tsx
+++ b/packages/vx-demo/src/pages/docs/Heatmap.tsx
@@ -4,6 +4,7 @@ import HeatmapRect from '../../../../vx-heatmap/src/heatmaps/HeatmapRect';
 import HeatmapCircle from '../../../../vx-heatmap/src/heatmaps/HeatmapCircle';
 import DocPage from '../../components/DocPage';
 import { DocGenInfo } from '../../types';
+import HeatmapsTile from '../../components/Gallery/HeatmapsTile';
 
 const components = [
   // @ts-ignore
@@ -12,4 +13,8 @@ const components = [
   HeatmapCircle.__docgenInfo,
 ] as DocGenInfo[];
 
-export default () => <DocPage components={components} readme={HeatmapReadme} vxPackage="heatmap" />;
+const examples = [HeatmapsTile];
+
+export default () => (
+  <DocPage components={components} examples={examples} readme={HeatmapReadme} vxPackage="heatmap" />
+);
diff --git a/packages/vx-demo/src/pages/docs/Hierarchy.tsx b/packages/vx-demo/src/pages/docs/Hierarchy.tsx
index 68dfa8533..53f2ae900 100644
--- a/packages/vx-demo/src/pages/docs/Hierarchy.tsx
+++ b/packages/vx-demo/src/pages/docs/Hierarchy.tsx
@@ -7,6 +7,11 @@ import Tree from '../../../../vx-hierarchy/src/hierarchies/Tree';
 import Treemap from '../../../../vx-hierarchy/src/hierarchies/Treemap';
 import DocPage from '../../components/DocPage';
 import { DocGenInfo } from '../../types';
+import PackTile from '../../components/Gallery/PackTile';
+import TreemapTile from '../../components/Gallery/TreemapTile';
+import DendrogramsTile from '../../components/Gallery/DendrogramsTile';
+import LinkTypesTile from '../../components/Gallery/LinkTypesTile';
+import TreesTile from '../../components/Gallery/TreesTile';
 
 const components = [Cluster, Pack, Partition, Tree, Treemap].map(
   c =>
@@ -14,6 +19,13 @@ const components = [Cluster, Pack, Partition, Tree, Treemap].map(
     c.__docgenInfo,
 ) as DocGenInfo[];
 
+const examples = [PackTile, TreemapTile, DendrogramsTile, LinkTypesTile, TreesTile];
+
 export default () => (
-  <DocPage components={components} readme={HierarchyReadme} vxPackage="hierarchy" />
+  <DocPage
+    components={components}
+    examples={examples}
+    readme={HierarchyReadme}
+    vxPackage="hierarchy"
+  />
 );
diff --git a/packages/vx-demo/src/pages/docs/Legend.tsx b/packages/vx-demo/src/pages/docs/Legend.tsx
index b0efc96b0..c62eae4ca 100644
--- a/packages/vx-demo/src/pages/docs/Legend.tsx
+++ b/packages/vx-demo/src/pages/docs/Legend.tsx
@@ -8,6 +8,7 @@ import Size from '../../../../vx-legend/src/legends/Size';
 import Threshold from '../../../../vx-legend/src/legends/Threshold';
 import DocPage from '../../components/DocPage';
 import { DocGenInfo } from '../../types';
+import LegendsTile from '../../components/Gallery/LegendsTile';
 
 const components = [Linear, Ordinal, Quantile, Size, Threshold, Legend].map(
   c =>
@@ -15,4 +16,8 @@ const components = [Linear, Ordinal, Quantile, Size, Threshold, Legend].map(
     c.__docgenInfo,
 ) as DocGenInfo[];
 
-export default () => <DocPage components={components} readme={LegendReadme} vxPackage="legend" />;
+const examples = [LegendsTile];
+
+export default () => (
+  <DocPage components={components} examples={examples} readme={LegendReadme} vxPackage="legend" />
+);
diff --git a/packages/vx-demo/src/pages/docs/Mock-Data.tsx b/packages/vx-demo/src/pages/docs/Mock-Data.tsx
index 0520256b2..a7ef70156 100644
--- a/packages/vx-demo/src/pages/docs/Mock-Data.tsx
+++ b/packages/vx-demo/src/pages/docs/Mock-Data.tsx
@@ -1,5 +1,13 @@
 import React from 'react';
 import MockDataReadme from '!!raw-loader!../../../../vx-mock-data/Readme.md';
 import DocPage from '../../components/DocPage';
+import PackTile from '../../components/Gallery/PackTile';
+import TreemapTile from '../../components/Gallery/TreemapTile';
+import PiesTile from '../../components/Gallery/PiesTile';
+import ChordTile from '../../components/Gallery/ChordTile';
+import CurvesTile from '../../components/Gallery/CurvesTile';
+import StatsPlotTile from '../../components/Gallery/StatsPlotTile';
 
-export default () => <DocPage readme={MockDataReadme} vxPackage="mock-data" />;
+const examples = [PackTile, TreemapTile, PiesTile, ChordTile, CurvesTile, StatsPlotTile];
+
+export default () => <DocPage examples={examples} readme={MockDataReadme} vxPackage="mock-data" />;
diff --git a/packages/vx-demo/src/pages/docs/Network.tsx b/packages/vx-demo/src/pages/docs/Network.tsx
index fe542bb13..7b0be2ade 100644
--- a/packages/vx-demo/src/pages/docs/Network.tsx
+++ b/packages/vx-demo/src/pages/docs/Network.tsx
@@ -7,6 +7,7 @@ import DefaultNode from '../../../../vx-network/src/DefaultNode';
 import DefaultLink from '../../../../vx-network/src/DefaultLink';
 import DocPage from '../../components/DocPage';
 import { DocGenInfo } from '../../types';
+import NetworkTile from '../../components/Gallery/NetworkTile';
 
 const components = [Graph, Nodes, Links, DefaultNode, DefaultLink].map(
   c =>
@@ -14,4 +15,8 @@ const components = [Graph, Nodes, Links, DefaultNode, DefaultLink].map(
     c.__docgenInfo,
 ) as DocGenInfo[];
 
-export default () => <DocPage components={components} readme={NetworkReadme} vxPackage="network" />;
+const examples = [NetworkTile];
+
+export default () => (
+  <DocPage components={components} examples={examples} readme={NetworkReadme} vxPackage="network" />
+);
diff --git a/packages/vx-demo/src/pages/docs/Pattern.tsx b/packages/vx-demo/src/pages/docs/Pattern.tsx
index c387953e4..7bce1397b 100644
--- a/packages/vx-demo/src/pages/docs/Pattern.tsx
+++ b/packages/vx-demo/src/pages/docs/Pattern.tsx
@@ -8,6 +8,9 @@ import Pattern from '../../../../vx-pattern/src/patterns/Pattern';
 import Waves from '../../../../vx-pattern/src/patterns/Waves';
 import DocPage from '../../components/DocPage';
 import { DocGenInfo } from '../../types';
+import PatternsTile from '../../components/Gallery/PatternsTile';
+import StreamGraphTile from '../../components/Gallery/StreamGraphTile';
+import StatsPlotTile from '../../components/Gallery/StatsPlotTile';
 
 const components = [Pattern, Circles, Hexagons, Lines, Path, Waves].map(
   component =>
@@ -15,4 +18,8 @@ const components = [Pattern, Circles, Hexagons, Lines, Path, Waves].map(
     component.__docgenInfo,
 ) as DocGenInfo[];
 
-export default () => <DocPage components={components} readme={PatternReadme} vxPackage="pattern" />;
+const examples = [PatternsTile, StreamGraphTile, StatsPlotTile];
+
+export default () => (
+  <DocPage components={components} examples={examples} readme={PatternReadme} vxPackage="pattern" />
+);
diff --git a/packages/vx-demo/src/pages/docs/Point.tsx b/packages/vx-demo/src/pages/docs/Point.tsx
index a3a8946dd..1ca7046fe 100644
--- a/packages/vx-demo/src/pages/docs/Point.tsx
+++ b/packages/vx-demo/src/pages/docs/Point.tsx
@@ -1,5 +1,8 @@
 import React from 'react';
 import PointReadme from '!!raw-loader!../../../../vx-point/Readme.md';
 import DocPage from '../../components/DocPage';
+import RadarTile from '../../components/Gallery/RadarTile';
 
-export default () => <DocPage readme={PointReadme} vxPackage="point" />;
+const examples = [RadarTile];
+
+export default () => <DocPage examples={examples} readme={PointReadme} vxPackage="point" />;
diff --git a/packages/vx-demo/src/pages/docs/Responsive.tsx b/packages/vx-demo/src/pages/docs/Responsive.tsx
index ab3c65c7b..afbb2f152 100644
--- a/packages/vx-demo/src/pages/docs/Responsive.tsx
+++ b/packages/vx-demo/src/pages/docs/Responsive.tsx
@@ -4,6 +4,7 @@ import ParentSize from '../../../../vx-responsive/src/components/ParentSize';
 import ScaleSVG from '../../../../vx-responsive/src/components/ScaleSVG';
 import DocPage from '../../components/DocPage';
 import { DocGenInfo } from '../../types';
+import ResponsiveTile from '../../components/Gallery/ResponsiveTile';
 
 const components = [ParentSize, ScaleSVG].map(
   component =>
@@ -11,6 +12,13 @@ const components = [ParentSize, ScaleSVG].map(
     component.__docgenInfo,
 ) as DocGenInfo[];
 
+const examples = [ResponsiveTile];
+
 export default () => (
-  <DocPage components={components} readme={ResponsiveReadme} vxPackage="responsive" />
+  <DocPage
+    components={components}
+    examples={examples}
+    readme={ResponsiveReadme}
+    vxPackage="responsive"
+  />
 );
diff --git a/packages/vx-demo/src/pages/docs/Scale.tsx b/packages/vx-demo/src/pages/docs/Scale.tsx
index 6bf0fbc74..63fb8abca 100644
--- a/packages/vx-demo/src/pages/docs/Scale.tsx
+++ b/packages/vx-demo/src/pages/docs/Scale.tsx
@@ -1,5 +1,20 @@
 import React from 'react';
 import ScaleReadme from '!!raw-loader!../../../../vx-scale/Readme.md';
 import DocPage from '../../components/DocPage';
+import AxisTile from '../../components/Gallery/AxisTile';
+import LegendsTile from '../../components/Gallery/LegendsTile';
+import BarGroupTile from '../../components/Gallery/BarGroupTile';
+import GeoMercatorTile from '../../components/Gallery/GeoMercatorTile';
+import LineRadialTile from '../../components/Gallery/LineRadialTile';
+import StreamGraphTile from '../../components/Gallery/StreamGraphTile';
 
-export default () => <DocPage readme={ScaleReadme} vxPackage="scale" />;
+const examples = [
+  AxisTile,
+  LegendsTile,
+  LineRadialTile,
+  StreamGraphTile,
+  BarGroupTile,
+  GeoMercatorTile,
+];
+
+export default () => <DocPage examples={examples} readme={ScaleReadme} vxPackage="scale" />;
diff --git a/packages/vx-demo/src/pages/docs/Shape.tsx b/packages/vx-demo/src/pages/docs/Shape.tsx
index a5e06c240..9cf79ec48 100644
--- a/packages/vx-demo/src/pages/docs/Shape.tsx
+++ b/packages/vx-demo/src/pages/docs/Shape.tsx
@@ -3,6 +3,15 @@ import ShapeReadme from '!!raw-loader!../../../../vx-shape/Readme.md';
 import * as Shapes from '../../../../vx-shape/src';
 import DocPage from '../../components/DocPage';
 import { DocGenInfo } from '../../types';
+import LineRadialTile from '../../components/Gallery/LineRadialTile';
+import PiesTile from '../../components/Gallery/PiesTile';
+import StreamGraphTile from '../../components/Gallery/StreamGraphTile';
+import ThresholdTile from '../../components/Gallery/ThresholdTile';
+import StackedAreasTile from '../../components/Gallery/StackedAreasTile';
+import BarStackHorizontalTile from '../../components/Gallery/BarStackHorizontalTile';
+import BarGroupTile from '../../components/Gallery/BarGroupTile';
+import RadarTile from '../../components/Gallery/RadarTile';
+import LinkTypesTile from '../../components/Gallery/LinkTypesTile';
 
 const components = Object.values(Shapes)
   .map(
@@ -13,4 +22,18 @@ const components = Object.values(Shapes)
   .filter(docgen => !!docgen)
   .sort((a, b) => a.displayName.localeCompare(b.displayName)) as DocGenInfo[];
 
-export default () => <DocPage components={components} readme={ShapeReadme} vxPackage="shape" />;
+const examples = [
+  LineRadialTile,
+  PiesTile,
+  StreamGraphTile,
+  ThresholdTile,
+  StackedAreasTile,
+  BarStackHorizontalTile,
+  BarGroupTile,
+  RadarTile,
+  LinkTypesTile,
+];
+
+export default () => (
+  <DocPage components={components} examples={examples} readme={ShapeReadme} vxPackage="shape" />
+);
diff --git a/packages/vx-demo/src/pages/docs/Stats.tsx b/packages/vx-demo/src/pages/docs/Stats.tsx
index 433089a98..867d7e6b0 100644
--- a/packages/vx-demo/src/pages/docs/Stats.tsx
+++ b/packages/vx-demo/src/pages/docs/Stats.tsx
@@ -4,6 +4,7 @@ import BoxPlot from '../../../../vx-stats/src/BoxPlot';
 import ViolinPlot from '../../../../vx-stats/src/ViolinPlot';
 import DocPage from '../../components/DocPage';
 import { DocGenInfo } from '../../types';
+import StatsPlotTile from '../../components/Gallery/StatsPlotTile';
 
 const components = [BoxPlot, ViolinPlot].map(
   component =>
@@ -11,4 +12,8 @@ const components = [BoxPlot, ViolinPlot].map(
     component.__docgenInfo,
 ) as DocGenInfo[];
 
-export default () => <DocPage components={components} readme={StatsReadme} vxPackage="stats" />;
+const examples = [StatsPlotTile];
+
+export default () => (
+  <DocPage components={components} examples={examples} readme={StatsReadme} vxPackage="stats" />
+);
diff --git a/packages/vx-demo/src/pages/docs/Text.tsx b/packages/vx-demo/src/pages/docs/Text.tsx
index af96e5e55..aa263ae53 100644
--- a/packages/vx-demo/src/pages/docs/Text.tsx
+++ b/packages/vx-demo/src/pages/docs/Text.tsx
@@ -3,10 +3,15 @@ import TextReadme from '!!raw-loader!../../../../vx-text/Readme.md';
 import Text from '../../../../vx-text/src/Text';
 import DocPage from '../../components/DocPage';
 import { DocGenInfo } from '../../types';
+import TextTile from '../../components/Gallery/TextTile';
 
 const components = [
   // @ts-ignore
   Text.__docgenInfo,
 ] as DocGenInfo[];
 
-export default () => <DocPage components={components} readme={TextReadme} vxPackage="text" />;
+const examples = [TextTile];
+
+export default () => (
+  <DocPage components={components} examples={examples} readme={TextReadme} vxPackage="text" />
+);
diff --git a/packages/vx-demo/src/pages/docs/Threshold.tsx b/packages/vx-demo/src/pages/docs/Threshold.tsx
index 2763559b4..171935891 100644
--- a/packages/vx-demo/src/pages/docs/Threshold.tsx
+++ b/packages/vx-demo/src/pages/docs/Threshold.tsx
@@ -3,12 +3,20 @@ import ThresholdReadme from '!!raw-loader!../../../../vx-threshold/Readme.md';
 import Threshold from '../../../../vx-threshold/src/Threshold';
 import DocPage from '../../components/DocPage';
 import { DocGenInfo } from '../../types';
+import ThresholdTile from '../../components/Gallery/ThresholdTile';
 
 const components = [
   // @ts-ignore
   Threshold.__docgenInfo,
 ] as DocGenInfo[];
 
+const examples = [ThresholdTile];
+
 export default () => (
-  <DocPage components={components} readme={ThresholdReadme} vxPackage="threshold" />
+  <DocPage
+    components={components}
+    examples={examples}
+    readme={ThresholdReadme}
+    vxPackage="threshold"
+  />
 );
diff --git a/packages/vx-demo/src/pages/docs/Tooltip.tsx b/packages/vx-demo/src/pages/docs/Tooltip.tsx
index 2ffd9ecbb..4851d463a 100644
--- a/packages/vx-demo/src/pages/docs/Tooltip.tsx
+++ b/packages/vx-demo/src/pages/docs/Tooltip.tsx
@@ -1,5 +1,11 @@
 import React from 'react';
 import TooltipReadme from '!!raw-loader!../../../../vx-tooltip/Readme.md';
 import DocPage from '../../components/DocPage';
+import DotsTile from '../../components/Gallery/DotsTile';
+import BarStackHorizontalTile from '../../components/Gallery/BarStackHorizontalTile';
+import StatsPlotTile from '../../components/Gallery/StatsPlotTile';
+import AreaTile from '../../components/Gallery/AreaTile';
 
-export default () => <DocPage readme={TooltipReadme} vxPackage="tooltip" />;
+const examples = [DotsTile, BarStackHorizontalTile, StatsPlotTile, AreaTile];
+
+export default () => <DocPage examples={examples} readme={TooltipReadme} vxPackage="tooltip" />;
diff --git a/packages/vx-demo/src/pages/docs/Voronoi.tsx b/packages/vx-demo/src/pages/docs/Voronoi.tsx
index ac8540483..130df7b22 100644
--- a/packages/vx-demo/src/pages/docs/Voronoi.tsx
+++ b/packages/vx-demo/src/pages/docs/Voronoi.tsx
@@ -4,6 +4,7 @@ import VoronoiPolygon from '../../../../vx-voronoi/src/components/VoronoiPolygon
 import voronoi from '../../../../vx-voronoi/src/voronoi';
 import DocPage from '../../components/DocPage';
 import { DocGenInfo } from '../../types';
+import VoronoiTile from '../../components/Gallery/VoronoiTile';
 
 const components = [
   // @ts-ignore
@@ -12,4 +13,8 @@ const components = [
   VoronoiPolygon.__docgenInfo,
 ] as DocGenInfo[];
 
-export default () => <DocPage components={components} readme={VoronoiReadme} vxPackage="voronoi" />;
+const examples = [VoronoiTile];
+
+export default () => (
+  <DocPage components={components} examples={examples} readme={VoronoiReadme} vxPackage="voronoi" />
+);
diff --git a/packages/vx-demo/src/pages/docs/Zoom.tsx b/packages/vx-demo/src/pages/docs/Zoom.tsx
index ad45a592d..adc9d2ec1 100644
--- a/packages/vx-demo/src/pages/docs/Zoom.tsx
+++ b/packages/vx-demo/src/pages/docs/Zoom.tsx
@@ -3,10 +3,15 @@ import ZoomReadme from '!!raw-loader!../../../../vx-zoom/Readme.md';
 import Zoom from '../../../../vx-zoom/src/Zoom';
 import DocPage from '../../components/DocPage';
 import { DocGenInfo } from '../../types';
+import ZoomITile from '../../components/Gallery/ZoomITile';
 
 const components = [
   // @ts-ignore
   Zoom.__docgenInfo,
 ] as DocGenInfo[];
 
-export default () => <DocPage components={components} readme={ZoomReadme} vxPackage="zoom" />;
+const examples = [ZoomITile];
+
+export default () => (
+  <DocPage components={components} examples={examples} readme={ZoomReadme} vxPackage="zoom" />
+);
diff --git a/packages/vx-demo/src/sandboxes/vx-legend/Example.tsx b/packages/vx-demo/src/sandboxes/vx-legend/Example.tsx
index 833fe986e..2a68493e1 100644
--- a/packages/vx-demo/src/sandboxes/vx-legend/Example.tsx
+++ b/packages/vx-demo/src/sandboxes/vx-legend/Example.tsx
@@ -17,7 +17,7 @@ const oneDecimalFormat = format('.1f');
 
 const sizeScale = scaleLinear<number>({
   domain: [0, 10],
-  range: [10, 30],
+  range: [5, 13],
 });
 
 const sizeColorScale = scaleLinear<string>({
diff --git a/packages/vx-grid/Readme.md b/packages/vx-grid/Readme.md
index eafc1ce95..615a308b2 100644
--- a/packages/vx-grid/Readme.md
+++ b/packages/vx-grid/Readme.md
@@ -7,9 +7,7 @@
 The `@vx/grid` package lets you create gridlines for charts. `<GridRows />` render horizontally,
 `<GridColumns />` render vertically, or you can use a `<Grid />` to get them both at once!
 
-<img style="display:block;" src="https://i.imgur.com/g3rYfSAr.png" width="50%" />
-
-## Example
+## Usage
 
 ```js
 import { Grid } from '@vx/grid';
diff --git a/packages/vx-zoom/src/Zoom.tsx b/packages/vx-zoom/src/Zoom.tsx
index a16f1e6ca..cdf74c770 100644
--- a/packages/vx-zoom/src/Zoom.tsx
+++ b/packages/vx-zoom/src/Zoom.tsx
@@ -57,11 +57,11 @@ export type ZoomProps = {
   /** Initial transform matrix to apply. */
   transformMatrix?: TransformMatrix;
   /**
-   * By default passive is `false`. This will wrap <Zoom> children in a <div> and add an active wheel
-   * event listener (handleWheel). `handleWheel()` will call `event.preventDefault()` before other
-   * execution. This prevents an outer parent from scrolling when the mouse wheel is used to zoom.
+   * When `false` (default), `<Zoom>` `children` are wrapped in a `<div>` with an active wheel
+   * event listener (`handleWheel`). `handleWheel()` will call `event.preventDefault()` before other
+   * execution to prevent an outer parent from scrolling when the mouse wheel is used to zoom.
    *
-   * When passive is `true` it is required to add `<MyComponent onWheel={zoom.handleWheel} />` to handle
+   * When passive is `true` it is **required** to add `<MyComponent onWheel={zoom.handleWheel} />` to handle
    * wheel events. **Note:** By default you do not need to add `<MyComponent onWheel={zoom.handleWheel} />`.
    * This is only necessary when `<Zoom passive={true} />`.
    */