diff --git a/packages/vx-demo/components/tiles/bargroup.js b/packages/vx-demo/components/tiles/bargroup.js
new file mode 100644
index 000000000..5ccf3c91b
--- /dev/null
+++ b/packages/vx-demo/components/tiles/bargroup.js
@@ -0,0 +1,94 @@
+import React from 'react';
+import { BarGroup } from '@vx/shape';
+import { Group } from '@vx/group';
+import { AxisBottom } from '@vx/axis';
+import { cityTemperature } from '@vx/mock-data';
+import { scaleBand, scaleLinear, scaleOrdinal } from '@vx/scale';
+import { timeParse, timeFormat } from 'd3-time-format';
+import { extent, max } from 'd3-array';
+
+const data = cityTemperature.slice(0, 8);
+const keys = Object.keys(data[0]).filter(d => d !== 'date');
+const parseDate = timeParse("%Y%m%d");
+const format = timeFormat("%b %d");
+const formatDate = (date) => format(parseDate(date));
+
+// accessors
+const x0 = d => d.date;
+const y = d => d.value;
+
+export default ({
+  width,
+  height,
+  margin = {
+    top: 40
+  }
+}) => {
+  if (width < 10) return null;
+
+  // bounds
+  const xMax = width;
+  const yMax = height - margin.top - 100;
+
+  // // scales
+  const x0Scale = scaleBand({
+    rangeRound: [0, xMax],
+    domain: data.map(x0),
+    padding: 0.2,
+    tickFormat: () => (val) => formatDate(val)
+  });
+  const x1Scale = scaleBand({
+    rangeRound: [0, x0Scale.bandwidth()],
+    domain: keys,
+    padding: .1
+  });
+  const yScale = scaleLinear({
+    rangeRound: [yMax, 0],
+    domain: [0, max(data, (d) => {
+      return max(keys, (key) => d[key])
+    })],
+  });
+  const zScale = scaleOrdinal({
+    domain: keys,
+    range: ['#aeeef8', '#e5fd3d', '#9caff6']
+  })
+
+  return (
+    <svg width={width} height={height}>
+      <rect
+        x={0}
+        y={0}
+        width={width}
+        height={height}
+        fill={`#612efb`}
+        rx={14}
+      />
+      <BarGroup
+        top={margin.top}
+        data={data}
+        keys={keys}
+        height={yMax}
+        x0={x0}
+        x0Scale={x0Scale}
+        x1Scale={x1Scale}
+        yScale={yScale}
+        zScale={zScale}
+        rx={4}
+      />
+      <AxisBottom
+        scale={x0Scale}
+        top={yMax + margin.top}
+        stroke='#e5fd3d'
+        tickStroke='#e5fd3d'
+        hideAxisLine
+        tickLabelComponent={(
+          <text
+            fill='#e5fd3d'
+            fontSize={11}
+            textAnchor="middle"
+          />
+        )}
+      />
+    </svg>
+  );
+}
diff --git a/packages/vx-demo/components/tiles/barstack.js b/packages/vx-demo/components/tiles/barstack.js
new file mode 100644
index 000000000..63f6e23b0
--- /dev/null
+++ b/packages/vx-demo/components/tiles/barstack.js
@@ -0,0 +1,95 @@
+import React from 'react';
+import { BarStack } from '@vx/shape';
+import { Group } from '@vx/group';
+import { AxisBottom } from '@vx/axis';
+import { cityTemperature } from '@vx/mock-data';
+import { scaleBand, scaleLinear, scaleOrdinal } from '@vx/scale';
+import { timeParse, timeFormat } from 'd3-time-format';
+import { extent, max } from 'd3-array';
+
+const data = cityTemperature.slice(0, 12);
+const keys = Object.keys(data[0]).filter(d => d !== 'date');
+const parseDate = timeParse("%Y%m%d");
+const format = timeFormat("%b %d");
+const formatDate = (date) => format(parseDate(date));
+
+// accessors
+const x = d => d.date;
+const y = d => d.value;
+
+const totals = data.reduce((ret, cur) => {
+  const t = keys.reduce((dailyTotal, k) => {
+    dailyTotal += +cur[k]
+    return dailyTotal;
+  }, 0)
+  ret.push(t)
+  return ret;
+}, [])
+
+export default ({
+  width,
+  height,
+  margin = {
+    top: 40
+  }
+}) => {
+  if (width < 10) return null;
+
+  // bounds
+  const xMax = width;
+  const yMax = height - margin.top - 100;
+
+  // // scales
+  const xScale = scaleBand({
+    rangeRound: [0, xMax],
+    domain: data.map(x),
+    padding: 0.2,
+    tickFormat: () => (val) => formatDate(val)
+  });
+  const yScale = scaleLinear({
+    rangeRound: [yMax, 0],
+    nice: true,
+    domain: [0, max(totals)],
+  });
+  const zScale = scaleOrdinal({
+    domain: keys,
+    range: ['#6c5efb', '#c998ff', '#a44afe']
+  })
+
+  return (
+    <svg width={width} height={height}>
+      <rect
+        x={0}
+        y={0}
+        width={width}
+        height={height}
+        fill={`#eaedff`}
+        rx={14}
+      />
+      <BarStack
+        top={margin.top}
+        data={data}
+        keys={keys}
+        height={yMax}
+        x={x}
+        xScale={xScale}
+        yScale={yScale}
+        zScale={zScale}
+
+      />
+      <AxisBottom
+        scale={xScale}
+        top={yMax + margin.top}
+        stroke='#a44afe'
+        tickStroke='#a44afe'
+        tickLabelComponent={(
+          <text
+            fill='#a44afe'
+            fontSize={11}
+            textAnchor="middle"
+          />
+        )}
+      />
+    </svg>
+  );
+}
diff --git a/packages/vx-demo/pages/bargroup.js b/packages/vx-demo/pages/bargroup.js
new file mode 100644
index 000000000..0defb2d76
--- /dev/null
+++ b/packages/vx-demo/pages/bargroup.js
@@ -0,0 +1,104 @@
+import React from 'react';
+import Show from '../components/show';
+import BarGroup from '../components/tiles/bargroup';
+
+export default () => {
+  return (
+    <Show margin={{top: 80}} component={BarGroup} title="Bar Group">
+{`import React from 'react';
+import { BarGroup } from '@vx/shape';
+import { Group } from '@vx/group';
+import { AxisBottom } from '@vx/axis';
+import { cityTemperature } from '@vx/mock-data';
+import { scaleBand, scaleLinear, scaleOrdinal } from '@vx/scale';
+import { timeParse, timeFormat } from 'd3-time-format';
+import { extent, max } from 'd3-array';
+
+const data = cityTemperature.slice(0, 4);
+const keys = Object.keys(data[0]).filter(d => d !== 'date');
+const parseDate = timeParse("%Y%m%d");
+const format = timeFormat("%b %d");
+const formatDate = (date) => format(parseDate(date));
+
+// accessors
+const x0 = d => d.date;
+const y = d => d.value;
+
+export default ({
+  width,
+  height,
+  margin = {
+    top: 40
+  }
+}) => {
+  if (width < 10) return null;
+
+  // bounds
+  const xMax = width;
+  const yMax = height - margin.top - 100;
+
+  // // scales
+  const x0Scale = scaleBand({
+    rangeRound: [0, xMax],
+    domain: data.map(x0),
+    padding: 0.2,
+    tickFormat: () => (val) => formatDate(val)
+  });
+  const x1Scale = scaleBand({
+    rangeRound: [0, x0Scale.bandwidth()],
+    domain: keys,
+    padding: .1
+  });
+  const yScale = scaleLinear({
+    rangeRound: [yMax, 0],
+    domain: [0, max(data, (d) => {
+      return max(keys, (key) => d[key])
+    })],
+  });
+  const zScale = scaleOrdinal({
+    domain: keys,
+    range: ['#aeeef8', '#e5fd3d', '#9caff6']
+  })
+
+  return (
+    <svg width={width} height={height}>
+      <rect
+        x={0}
+        y={0}
+        width={width}
+        height={height}
+        fill='#612efb'
+        rx={14}
+      />
+      <BarGroup
+        top={margin.top}
+        data={data}
+        keys={keys}
+        height={yMax}
+        x0={x0}
+        y={y}
+        x0Scale={x0Scale}
+        x1Scale={x1Scale}
+        yScale={yScale}
+        zScale={zScale}
+      />
+      <AxisBottom
+        scale={x0Scale}
+        top={yMax + margin.top}
+        stroke='#e5fd3d'
+        tickStroke='#e5fd3d'
+        hideAxisLine
+        tickLabelComponent={(
+          <text
+            fill='#e5fd3d'
+            fontSize={11}
+            textAnchor="middle"
+          />
+        )}
+      />
+    </svg>
+  );
+}`}
+    </Show>
+  );
+}
diff --git a/packages/vx-demo/pages/barstack.js b/packages/vx-demo/pages/barstack.js
new file mode 100644
index 000000000..b27ead461
--- /dev/null
+++ b/packages/vx-demo/pages/barstack.js
@@ -0,0 +1,105 @@
+import React from 'react';
+import Show from '../components/show';
+import BarStack from '../components/tiles/barstack';
+
+export default () => {
+  return (
+    <Show margin={{top: 80}} component={BarStack} title="Bar Stack">
+{`import React from 'react';
+import { BarStack } from '@vx/shape';
+import { Group } from '@vx/group';
+import { AxisBottom } from '@vx/axis';
+import { cityTemperature } from '@vx/mock-data';
+import { scaleBand, scaleLinear, scaleOrdinal } from '@vx/scale';
+import { timeParse, timeFormat } from 'd3-time-format';
+import { extent, max } from 'd3-array';
+
+const data = cityTemperature.slice(0, 12);
+const keys = Object.keys(data[0]).filter(d => d !== 'date');
+const parseDate = timeParse("%Y%m%d");
+const format = timeFormat("%b %d");
+const formatDate = (date) => format(parseDate(date));
+
+// accessors
+const x = d => d.date;
+const y = d => d.value;
+
+const totals = data.reduce((ret, cur) => {
+  const t = keys.reduce((dailyTotal, k) => {
+    dailyTotal += +cur[k]
+    return dailyTotal;
+  }, 0)
+  ret.push(t)
+  return ret;
+}, [])
+
+export default ({
+  width,
+  height,
+  margin = {
+    top: 40
+  }
+}) => {
+  if (width < 10) return null;
+
+  // bounds
+  const xMax = width;
+  const yMax = height - margin.top - 100;
+
+  // // scales
+  const xScale = scaleBand({
+    rangeRound: [0, xMax],
+    domain: data.map(x),
+    padding: 0.2,
+    tickFormat: () => (val) => formatDate(val)
+  });
+  const yScale = scaleLinear({
+    rangeRound: [yMax, 0],
+    nice: true,
+    domain: [0, max(totals)],
+  });
+  const zScale = scaleOrdinal({
+    domain: keys,
+    range: ['#6c5efb', '#c998ff', '#a44afe']
+  })
+
+  return (
+    <svg width={width} height={height}>
+      <rect
+        x={0}
+        y={0}
+        width={width}
+        height={height}
+        fill='#eaedff'
+        rx={14}
+      />
+      <BarStack
+        top={margin.top}
+        data={data}
+        keys={keys}
+        height={yMax}
+        x={x}
+        xScale={xScale}
+        yScale={yScale}
+        zScale={zScale}
+
+      />
+      <AxisBottom
+        scale={xScale}
+        top={yMax + margin.top}
+        stroke='#a44afe'
+        tickStroke='#a44afe'
+        tickLabelComponent={(
+          <text
+            fill='#a44afe'
+            fontSize={11}
+            textAnchor="middle"
+          />
+        )}
+      />
+    </svg>
+  );
+}`}
+    </Show>
+  );
+}
diff --git a/packages/vx-demo/pages/gallery.js b/packages/vx-demo/pages/gallery.js
index 402702608..f4ced70e5 100644
--- a/packages/vx-demo/pages/gallery.js
+++ b/packages/vx-demo/pages/gallery.js
@@ -15,6 +15,8 @@ import Area from '../components/tiles/area';
 import Stacked from '../components/tiles/stacked';
 import MultiLine from '../components/tiles/multiline';
 import Axis from '../components/tiles/axis';
+import BarGroup from '../components/tiles/bargroup';
+import BarStack from '../components/tiles/barstack';
 
 const items = [
   "#242424",
@@ -69,6 +71,8 @@ export default class Gallery extends React.Component {
     const t7 = this.state.dimensions[6] || [8, 300];
     const t8 = this.state.dimensions[7] || [8, 300];
     const t9 = this.state.dimensions[8] || [8, 300];
+    const t10 = this.state.dimensions[9] || [8, 300];
+    const t11 = this.state.dimensions[10] || [8, 300];
 
     return (
       <Page title="gallery">
@@ -310,12 +314,54 @@ export default class Gallery extends React.Component {
               </div>
             </Link>
           </Tilt>
-          <div>
-            <br/>
-            <h1 style={{textAlign: 'center', lineHeight: '.8em'}}>
-              More on the way!
-            </h1>
-          </div>
+          <Tilt
+            className="tilt"
+            options={{ max: 8, scale: 1 }}
+          >
+            <Link prefetch href="/bargroup">
+              <div className="gallery-item" style={{ background: '#612efb' }} ref={d => this.nodes.add(d)}>
+                <div className="image">
+                  <BarGroup
+                    width={t10[0]}
+                    height={t10[1]}
+                  />
+                </div>
+                <div className="details" style={{ color: '#e5fd3d'}}>
+                  <div className="title">Bar Group</div>
+                  <div className="description">
+                    <pre>{`<Shape.BarGroup />`}</pre>
+                  </div>
+                </div>
+              </div>
+            </Link>
+          </Tilt>
+          <Tilt
+            className="tilt"
+            options={{ max: 8, scale: 1 }}
+          >
+            <Link prefetch href="/barstack">
+              <div className="gallery-item" style={{ background: '#eaedff' }} ref={d => this.nodes.add(d)}>
+                <div className="image">
+                  <BarStack
+                    width={t11[0]}
+                    height={t11[1]}
+                  />
+                </div>
+                <div className="details" style={{ color: '#a44afe'}}>
+                  <div className="title">Bar Stack</div>
+                  <div className="description">
+                    <pre>{`<Shape.BarStack />`}</pre>
+                  </div>
+                </div>
+              </div>
+            </Link>
+          </Tilt>
+        </div>
+
+        <div>
+          <h1 style={{textAlign: 'center', lineHeight: '.8em'}}>
+            More on the way!
+          </h1>
         </div>
 
         <Footer />
diff --git a/packages/vx-scale/src/scales/band.js b/packages/vx-scale/src/scales/band.js
index eddb2d5ea..97409f41b 100644
--- a/packages/vx-scale/src/scales/band.js
+++ b/packages/vx-scale/src/scales/band.js
@@ -8,6 +8,7 @@ export default ({
   paddingInner,
   paddingOuter,
   align,
+  tickFormat,
 }) => {
   const scale = scaleBand();
 
@@ -18,6 +19,7 @@ export default ({
   if (paddingInner) scale.paddingInner(paddingInner);
   if (paddingOuter) scale.paddingOuter(paddingOuter);
   if (align) scale.align(align);
+  if (tickFormat) scale.tickFormat = tickFormat;
 
   return scale;
 }
diff --git a/packages/vx-shape/build/index.js b/packages/vx-shape/build/index.js
index 2ea0e1b04..d8fe3d23e 100644
--- a/packages/vx-shape/build/index.js
+++ b/packages/vx-shape/build/index.js
@@ -49,4 +49,31 @@ Object.defineProperty(exports, 'Bar', {
   }
 });
 
+var _BarGroup = require('./shapes/BarGroup');
+
+Object.defineProperty(exports, 'BarGroup', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_BarGroup).default;
+  }
+});
+
+var _BarStack = require('./shapes/BarStack');
+
+Object.defineProperty(exports, 'BarStack', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_BarStack).default;
+  }
+});
+
+var _callOrValue = require('./util/callOrValue');
+
+Object.defineProperty(exports, 'callOrValue', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_callOrValue).default;
+  }
+});
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
\ No newline at end of file
diff --git a/packages/vx-shape/package.json b/packages/vx-shape/package.json
index e0a726e29..ce107661f 100644
--- a/packages/vx-shape/package.json
+++ b/packages/vx-shape/package.json
@@ -23,9 +23,11 @@
   "license": "MIT",
   "dependencies": {
     "@vx/curve": "0.0.112",
+    "@vx/group": "0.0.113",
     "@vx/point": "0.0.112",
     "classnames": "^2.2.5",
     "d3-shape": "^1.0.6",
+    "prop-types": "^15.5.10",
     "react": "^15.4.2"
   },
   "devDependencies": {
diff --git a/packages/vx-shape/src/index.js b/packages/vx-shape/src/index.js
index a7564a0d3..f8a30dc56 100644
--- a/packages/vx-shape/src/index.js
+++ b/packages/vx-shape/src/index.js
@@ -3,3 +3,6 @@ export { default as LinePath } from './shapes/LinePath';
 export { default as AreaClosed } from './shapes/AreaClosed';
 export { default as AreaStack } from './shapes/AreaStack';
 export { default as Bar } from './shapes/Bar';
+export { default as BarGroup } from './shapes/BarGroup';
+export { default as BarStack } from './shapes/BarStack';
+export { default as callOrValue } from './util/callOrValue';
diff --git a/packages/vx-shape/src/shapes/AreaStack.js b/packages/vx-shape/src/shapes/AreaStack.js
index f18a5705b..e97474b08 100644
--- a/packages/vx-shape/src/shapes/AreaStack.js
+++ b/packages/vx-shape/src/shapes/AreaStack.js
@@ -1,15 +1,8 @@
 import React from 'react';
 import cx from 'classnames';
+import callOrValue from '../util/callOrValue';
 import { area, stack as d3stack } from 'd3-shape';
 
-function callOrValue(maybeFn, d, i) {
-  if (typeof maybeFn === 'function') {
-    return maybeFn(d,i);
-  }
-  return maybeFn;
-}
-
-
 export default ({
   className,
   top = 0,
diff --git a/packages/vx-shape/src/shapes/Bar.js b/packages/vx-shape/src/shapes/Bar.js
index 27d93edd0..34ab7a75b 100644
--- a/packages/vx-shape/src/shapes/Bar.js
+++ b/packages/vx-shape/src/shapes/Bar.js
@@ -1,8 +1,10 @@
 import React from 'react';
 import cx from 'classnames';
+import callOrValue from '../util/callOrValue';
 
 export default ({
   className,
+  data,
   x = 0,
   y = 0,
   width,
@@ -18,6 +20,7 @@ export default ({
   strokeLinejoin,
   strokeMiterlimit,
   strokeOpacity,
+  ...restProps,
 }) => {
   return (
     <rect
@@ -37,6 +40,10 @@ export default ({
       strokeLinejoin={strokeLinejoin}
       strokeMiterlimit={strokeMiterlimit}
       strokeOpacity={strokeOpacity}
+      {...Object.keys(restProps).reduce((ret, cur) => {
+        ret[cur] = callOrValue(restProps[cur], data);
+        return ret;
+      }, {})}
     />
   );
 }
diff --git a/packages/vx-shape/src/shapes/BarGroup.js b/packages/vx-shape/src/shapes/BarGroup.js
new file mode 100644
index 000000000..9c48d3d5f
--- /dev/null
+++ b/packages/vx-shape/src/shapes/BarGroup.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { Group } from '@vx/group';
+import Bar from './Bar';
+import callOrValue from '../util/callOrValue';
+
+export default function BarGroup({
+  data,
+  className,
+  top,
+  left,
+  x0,
+  x0Scale,
+  x1Scale,
+  yScale,
+  zScale,
+  keys,
+  height,
+  ...restProps
+}) {
+  return (
+    <Group
+      className={cx('vx-bar-group', className)}
+      top={top}
+      left={left}
+    >
+      {data && data.map((d, i) => {
+        return (
+          <Group
+            key={`bar-group-${i}-${x0(d)}`}
+            left={x0Scale(x0(d))}
+          >
+            {keys && keys.map((key, i) => {
+              const value = d[key];
+              return (
+                <Bar
+                  key={`bar-group-bar-${i}-${value}-${key}`}
+                  x={x1Scale(key)}
+                  y={yScale(value)}
+                  width={x1Scale.bandwidth()}
+                  height={height - yScale(value)}
+                  fill={zScale(key)}
+                  {...Object.keys(restProps).reduce((ret, cur) => {
+                    ret[cur] = callOrValue(restProps[cur], data);
+                    return ret;
+                  }, {})}
+                />
+              );
+            })}
+          </Group>
+        );
+      })}
+    </Group>
+  );
+}
+
+BarGroup.propTypes = {
+  data: PropTypes.array.isRequired,
+  x0: PropTypes.func.isRequired,
+  x0Scale: PropTypes.func.isRequired,
+  x1Scale: PropTypes.func.isRequired,
+  yScale: PropTypes.func.isRequired,
+  zScale: PropTypes.func.isRequired,
+  keys: PropTypes.array.isRequired,
+  height: PropTypes.number.isRequired,
+  className: PropTypes.string,
+  top: PropTypes.number,
+  left: PropTypes.number,
+};
diff --git a/packages/vx-shape/src/shapes/BarStack.js b/packages/vx-shape/src/shapes/BarStack.js
new file mode 100644
index 000000000..ab9400326
--- /dev/null
+++ b/packages/vx-shape/src/shapes/BarStack.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { Group } from '@vx/group';
+import Bar from './Bar';
+import { stack as d3stack } from 'd3-shape';
+import callOrValue from '../util/callOrValue';
+
+export default function BarStack({
+  data,
+  className,
+  top,
+  left,
+  x,
+  xScale,
+  yScale,
+  zScale,
+  keys,
+  height,
+  ...restProps
+}) {
+  const series = d3stack().keys(keys)(data);
+  return (
+    <Group
+      className={cx('vx-bar-stack', className)}
+      top={top}
+      left={left}
+    >
+      {series && series.map((s, i) => {
+        return (
+          <Group key={`vx-bar-stack-${i}`}>
+            {s.map((d, ii) => {
+              return (
+                <Bar
+                  key={`bar-group-bar-${i}-${ii}-${s.key}`}
+                  x={xScale(x(d.data))}
+                  y={yScale(d[1])}
+                  width={xScale.bandwidth()}
+                  height={yScale(d[0]) - yScale(d[1])}
+                  fill={zScale(s.key)}
+                  {...Object.keys(restProps).reduce((ret, cur) => {
+                    ret[cur] = callOrValue(restProps[cur], data);
+                    return ret;
+                  }, {})}
+                />
+              );
+            })}
+          </Group>
+        );
+      })}
+    </Group>
+  );
+}
+
+BarStack.propTypes = {
+  data: PropTypes.array.isRequired,
+  x: PropTypes.func.isRequired,
+  xScale: PropTypes.func.isRequired,
+  yScale: PropTypes.func.isRequired,
+  zScale: PropTypes.func.isRequired,
+  keys: PropTypes.array.isRequired,
+  className: PropTypes.string,
+  top: PropTypes.number,
+  left: PropTypes.number,
+};
diff --git a/packages/vx-shape/src/util/callOrValue.js b/packages/vx-shape/src/util/callOrValue.js
new file mode 100644
index 000000000..b72965089
--- /dev/null
+++ b/packages/vx-shape/src/util/callOrValue.js
@@ -0,0 +1,6 @@
+export default function callOrValue(maybeFn, d, i) {
+  if (typeof maybeFn === 'function') {
+    return maybeFn(d,i);
+  }
+  return maybeFn;
+}
diff --git a/packages/vx-shape/test/BarGroup.test.js b/packages/vx-shape/test/BarGroup.test.js
new file mode 100644
index 000000000..3666abb22
--- /dev/null
+++ b/packages/vx-shape/test/BarGroup.test.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { BarGroup } from '../src';
+import { shallow, mount } from 'enzyme';
+
+describe('<BarGroup />', () => {
+  beforeEach(() => {
+    global.console.error = jest.fn()
+  })
+
+  test('it should be defined', () => {
+    expect(BarGroup).toBeDefined()
+  })
+
+  test('it should have className .vx-bar-group', () => {
+    const wrapper = shallow(<BarGroup data={[]} />)
+    expect(wrapper.prop('className')).toEqual('vx-bar-group')
+  })
+
+  test('it should set className prop', () => {
+    const wrapper = shallow(<BarGroup className='test' data={[]} />)
+    expect(wrapper.prop('className')).toEqual('vx-bar-group test')
+  })
+
+  test('it should require a data prop', () => {
+    const wrapper = shallow(<BarGroup />);
+    expect(console.error).toBeCalled()
+    expect(console.error.mock.calls[0][0]).toEqual("Warning: Failed prop type: The prop `data` is marked as required in `BarGroup`, but its value is `undefined`.\n    in BarGroup")
+  })
+
+  test('it should set top & left props', () => {
+    const wrapper = shallow(<BarGroup className='test' data={[]} top={2} left={3} />)
+    expect(wrapper.prop('top')).toEqual(2)
+    expect(wrapper.prop('left')).toEqual(3)
+  })
+})
diff --git a/packages/vx-shape/test/BarStack.test.js b/packages/vx-shape/test/BarStack.test.js
new file mode 100644
index 000000000..c8662efad
--- /dev/null
+++ b/packages/vx-shape/test/BarStack.test.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import { BarStack } from '../src';
+import { shallow } from 'enzyme';
+
+describe('<BarStack />', () => {
+  test('it should be defined', () => {
+    expect(BarStack).toBeDefined()
+  })
+
+  test('it should have className .vx-bar-stack', () => {
+    const wrapper = shallow(
+      <BarStack
+        data={[]}
+        top={2}
+        left={3}
+        x={d => d}
+        xScale={d => d}
+        yScale={d => d}
+        zScale={d => d}
+        keys={[]}
+      />
+    )
+    expect(wrapper.prop('className')).toEqual('vx-bar-stack')
+  })
+
+  test('it should set className prop', () => {
+    const wrapper = shallow(
+      <BarStack
+        className='test'
+        data={[]}
+        top={2}
+        left={3}
+        x={d => d}
+        xScale={d => d}
+        yScale={d => d}
+        zScale={d => d}
+        keys={[]}
+      />
+    )
+    expect(wrapper.prop('className')).toEqual('vx-bar-stack test')
+  })
+
+  test('it should set top & left props', () => {
+    const wrapper = shallow(
+      <BarStack
+        className='test'
+        data={[]}
+        top={2}
+        left={3}
+        x={d => d}
+        xScale={d => d}
+        yScale={d => d}
+        zScale={d => d}
+        keys={[]}
+      />
+    )
+    expect(wrapper.prop('top')).toEqual(2)
+    expect(wrapper.prop('left')).toEqual(3)
+  })
+})
\ No newline at end of file