diff --git a/packages/vx-demo/components/tiles/axis.js b/packages/vx-demo/components/tiles/axis.js
index c7eeac4ff..66390ca58 100644
--- a/packages/vx-demo/components/tiles/axis.js
+++ b/packages/vx-demo/components/tiles/axis.js
@@ -4,7 +4,7 @@ import { Group } from '@vx/group';
 import { curveBasis } from '@vx/curve';
 import { GradientOrangeRed } from '@vx/gradient';
 import { genDateValue } from '@vx/mock-data';
-import { AxisLeft, AxisBottom } from '@vx/axis';
+import { AxisLeft, AxisRight, AxisBottom } from '@vx/axis';
 import { AreaClosed, LinePath, Line } from '@vx/shape';
 import { scaleTime, scaleLinear } from '@vx/scale';
 import { extent, max } from 'd3-array';
@@ -88,71 +88,97 @@ export default ({ width, height, margin }) => {
           curve={curveBasis}
         />
       </Group>
-      <AxisLeft
-        top={margin.top}
-        left={margin.left}
-        scale={yScale}
-        hideZero
-        numTicks={numTicksForHeight(height)}
-        label="value"
-        labelProps={{
-          fill: '#8e205f',
-          textAnchor: 'middle',
-          fontSize: 12,
-          fontFamily: 'Arial'
-        }}
-        stroke="#1b1a1e"
-        tickStroke="#8e205f"
-        tickLabelProps={(value, index) => ({
-          fill: '#8e205f',
-          textAnchor: 'end',
-          fontSize: 10,
-          fontFamily: 'Arial',
-          dx: '-0.25em',
-          dy: '0.25em'
-        })}
-        tickComponent={({ formattedValue, ...tickProps }) => (
-          <text {...tickProps}>{formattedValue}</text>
-        )}
-      />
-      <AxisBottom
-        top={height - margin.bottom}
-        left={margin.left}
-        scale={xScale}
-        numTicks={numTicksForWidth(width)}
-        label="time"
-      >
-        {props => {
-          const tickLabelSize = 10;
-          const tickRotate = 45;
-          const tickColor = '#8e205f';
-          const axisCenter = (props.axisToPoint.x - props.axisFromPoint.x) / 2;
-          return (
-            <g className="my-custom-bottom-axis">
-              {props.ticks.map((tick, i) => {
-                const tickX = tick.to.x;
-                const tickY = tick.to.y + tickLabelSize + props.tickLength;
-                return (
-                  <Group key={`vx-tick-${tick.value}-${i}`} className={'vx-axis-tick'}>
-                    <Line from={tick.from} to={tick.to} stroke={tickColor} />
-                    <text
-                      transform={`translate(${tickX}, ${tickY}) rotate(${tickRotate})`}
-                      fontSize={tickLabelSize}
-                      textAnchor="middle"
-                      fill={tickColor}
-                    >
-                      {tick.formattedValue}
-                    </text>
-                  </Group>
-                );
-              })}
-              <text textAnchor="middle" transform={`translate(${axisCenter}, 50)`} fontSize="8">
-                {props.label}
-              </text>
-            </g>
-          );
-        }}
-      </AxisBottom>
+      <Group left={margin.left}>
+        <AxisLeft
+          top={margin.top}
+          left={0}
+          scale={yScale}
+          hideZero
+          numTicks={numTicksForHeight(height)}
+          label="Axis Left Label"
+          labelProps={{
+            fill: '#8e205f',
+            textAnchor: 'middle',
+            fontSize: 12,
+            fontFamily: 'Arial'
+          }}
+          stroke="#1b1a1e"
+          tickStroke="#8e205f"
+          tickLabelProps={(value, index) => ({
+            fill: '#8e205f',
+            textAnchor: 'end',
+            fontSize: 10,
+            fontFamily: 'Arial',
+            dx: '-0.25em',
+            dy: '0.25em'
+          })}
+          tickComponent={({ formattedValue, ...tickProps }) => (
+            <text {...tickProps}>{formattedValue}</text>
+          )}
+        />
+        <AxisRight
+          top={margin.top}
+          left={xMax}
+          scale={yScale}
+          hideZero
+          numTicks={numTicksForHeight(height)}
+          label="Axis Right Label"
+          labelProps={{
+            fill: '#8e205f',
+            textAnchor: 'middle',
+            fontSize: 12,
+            fontFamily: 'Arial'
+          }}
+          stroke="#1b1a1e"
+          tickStroke="#8e205f"
+          tickLabelProps={(value, index) => ({
+            fill: '#8e205f',
+            textAnchor: 'start',
+            fontSize: 10,
+            fontFamily: 'Arial',
+            dx: '0.25em',
+            dy: '0.25em'
+          })}
+        />
+        <AxisBottom
+          top={height - margin.bottom}
+          left={0}
+          scale={xScale}
+          numTicks={numTicksForWidth(width)}
+          label="Time"
+        >
+          {props => {
+            const tickLabelSize = 10;
+            const tickRotate = 45;
+            const tickColor = '#8e205f';
+            const axisCenter = (props.axisToPoint.x - props.axisFromPoint.x) / 2;
+            return (
+              <g className="my-custom-bottom-axis">
+                {props.ticks.map((tick, i) => {
+                  const tickX = tick.to.x;
+                  const tickY = tick.to.y + tickLabelSize + props.tickLength;
+                  return (
+                    <Group key={`vx-tick-${tick.value}-${i}`} className={'vx-axis-tick'}>
+                      <Line from={tick.from} to={tick.to} stroke={tickColor} />
+                      <text
+                        transform={`translate(${tickX}, ${tickY}) rotate(${tickRotate})`}
+                        fontSize={tickLabelSize}
+                        textAnchor="middle"
+                        fill={tickColor}
+                      >
+                        {tick.formattedValue}
+                      </text>
+                    </Group>
+                  );
+                })}
+                <text textAnchor="middle" transform={`translate(${axisCenter}, 50)`} fontSize="8">
+                  {props.label}
+                </text>
+              </g>
+            );
+          }}
+        </AxisBottom>
+      </Group>
     </svg>
   );
 };
diff --git a/packages/vx-demo/pages/axis.js b/packages/vx-demo/pages/axis.js
index 9d93ac105..ce6b5aefa 100644
--- a/packages/vx-demo/pages/axis.js
+++ b/packages/vx-demo/pages/axis.js
@@ -9,8 +9,8 @@ export default () => {
       title="Axis"
       margin={{
         top: 20,
-        left: 60,
-        right: 40,
+        left: 70,
+        right: 70,
         bottom: 60
       }}
     >
@@ -20,7 +20,7 @@ import { Group } from '@vx/group';
 import { curveBasis } from '@vx/curve';
 import { GradientOrangeRed } from '@vx/gradient';
 import { genDateValue } from '@vx/mock-data';
-import { AxisLeft, AxisBottom } from '@vx/axis';
+import { AxisLeft, AxisRight, AxisBottom } from '@vx/axis';
 import { AreaClosed, LinePath, Line } from '@vx/shape';
 import { scaleTime, scaleLinear } from '@vx/scale';
 import { extent, max } from 'd3-array';
@@ -54,12 +54,12 @@ export default ({ width, height, margin }) => {
   // scales
   const xScale = scaleTime({
     range: [0, xMax],
-    domain: extent(data, x),
+    domain: extent(data, x)
   });
   const yScale = scaleLinear({
     range: [yMax, 0],
     domain: [0, max(data, y)],
-    nice: true,
+    nice: true
   });
 
   // scale tick formats
@@ -68,20 +68,8 @@ export default ({ width, height, margin }) => {
 
   return (
     <svg width={width} height={height}>
-      <GradientOrangeRed
-        id="linear"
-        vertical={false}
-        fromOpacity={0.8}
-        toOpacity={0.3}
-      />
-      <rect
-        x={0}
-        y={0}
-        width={width}
-        height={height}
-        fill="#f4419f"
-        rx={14}
-      />
+      <GradientOrangeRed id="linear" vertical={false} fromOpacity={0.8} toOpacity={0.3} />
+      <rect x={0} y={0} width={width} height={height} fill="#f4419f" rx={14} />
       <Grid
         top={margin.top}
         left={margin.left}
@@ -116,84 +104,97 @@ export default ({ width, height, margin }) => {
           curve={curveBasis}
         />
       </Group>
-      <AxisLeft
-        top={margin.top}
-        left={margin.left}
-        scale={yScale}
-        hideZero
-        numTicks={numTicksForHeight(height)}
-        label="value"
-        labelProps={{
-          fill: '#8e205f',
-          textAnchor: 'middle',
-          fontSize: 12,
-          fontFamily: 'Arial',
-        }}
-        stroke="#1b1a1e"
-        tickStroke="#8e205f"
-        tickLabelProps={(value, index) => ({
-          fill: '#8e205f',
-          textAnchor: 'end',
-          fontSize: 10,
-          fontFamily: 'Arial',
-          dx: '-0.25em',
-          dy: '0.25em',
-        })}
-        tickComponent={({ formattedValue, ...tickProps}) => (
-          <text {...tickProps}>{formattedValue}</text>
-        )}
-      />
-      <AxisBottom
-        top={height - margin.bottom}
-        left={margin.left}
-        scale={xScale}
-        numTicks={numTicksForWidth(width)}
-        label="time"
-      >
-        {props => {
-          const tickLabelSize = 10;
-          const tickRotate = 45;
-          const tickColor = '#8e205f';
-          const axisCenter =
-            (props.axisToPoint.x - props.axisFromPoint.x) / 2;
-          return (
-            <g className="my-custom-bottom-axis">
-              {props.ticks.map((tick, i) => {
-                const tickX = tick.to.x;
-                const tickY =
-                  tick.to.y + tickLabelSize + props.tickLength;
-                return (
-                  <Group
-                    key={\`vx-tick-\${tick.value}-\${i}\`}
-                    className={'vx-axis-tick'}
-                  >
-                    <Line
-                      from={tick.from}
-                      to={tick.to}
-                      stroke={tickColor}
-                    />
-                    <text
-                      transform={\`translate(\${tickX}, \${tickY}) rotate(\${tickRotate})\`}
-                      fontSize={tickLabelSize}
-                      textAnchor="middle"
-                      fill={tickColor}
-                    >
-                      {tick.formattedValue}
-                    </text>
-                  </Group>
-                );
-              })}
-              <text
-                textAnchor="middle"
-                transform={\`translate(\${axisCenter}, 50)\`}
-                fontSize="8"
-              >
-                {props.label}
-              </text>
-            </g>
-          );
-        }}
-      </AxisBottom>
+      <Group left={margin.left}>
+        <AxisLeft
+          top={margin.top}
+          left={0}
+          scale={yScale}
+          hideZero
+          numTicks={numTicksForHeight(height)}
+          label="Axis Left Label"
+          labelProps={{
+            fill: '#8e205f',
+            textAnchor: 'middle',
+            fontSize: 12,
+            fontFamily: 'Arial'
+          }}
+          stroke="#1b1a1e"
+          tickStroke="#8e205f"
+          tickLabelProps={(value, index) => ({
+            fill: '#8e205f',
+            textAnchor: 'end',
+            fontSize: 10,
+            fontFamily: 'Arial',
+            dx: '-0.25em',
+            dy: '0.25em'
+          })}
+          tickComponent={({ formattedValue, ...tickProps }) => (
+            <text {...tickProps}>{formattedValue}</text>
+          )}
+        />
+        <AxisRight
+          top={margin.top}
+          left={xMax}
+          scale={yScale}
+          hideZero
+          numTicks={numTicksForHeight(height)}
+          label="Axis Right Label"
+          labelProps={{
+            fill: '#8e205f',
+            textAnchor: 'middle',
+            fontSize: 12,
+            fontFamily: 'Arial'
+          }}
+          stroke="#1b1a1e"
+          tickStroke="#8e205f"
+          tickLabelProps={(value, index) => ({
+            fill: '#8e205f',
+            textAnchor: 'start',
+            fontSize: 10,
+            fontFamily: 'Arial',
+            dx: '0.25em',
+            dy: '0.25em'
+          })}
+        />
+        <AxisBottom
+          top={height - margin.bottom}
+          left={0}
+          scale={xScale}
+          numTicks={numTicksForWidth(width)}
+          label="Time"
+        >
+          {props => {
+            const tickLabelSize = 10;
+            const tickRotate = 45;
+            const tickColor = '#8e205f';
+            const axisCenter = (props.axisToPoint.x - props.axisFromPoint.x) / 2;
+            return (
+              <g className="my-custom-bottom-axis">
+                {props.ticks.map((tick, i) => {
+                  const tickX = tick.to.x;
+                  const tickY = tick.to.y + tickLabelSize + props.tickLength;
+                  return (
+                    <Group key={\`vx-tick-\${tick.value}-\${i}\`} className={'vx-axis-tick'}>
+                      <Line from={tick.from} to={tick.to} stroke={tickColor} />
+                      <text
+                        transform={\`translate(\${tickX}, \${tickY}) rotate(\${tickRotate})\`}
+                        fontSize={tickLabelSize}
+                        textAnchor="middle"
+                        fill={tickColor}
+                      >
+                        {tick.formattedValue}
+                      </text>
+                    </Group>
+                  );
+                })}
+                <text textAnchor="middle" transform={\`translate(\${axisCenter}, 50)\`} fontSize="8">
+                  {props.label}
+                </text>
+              </g>
+            );
+          }}
+        </AxisBottom>
+      </Group>
     </svg>
   );
 };`}