diff --git a/demo/Example.js b/demo/Example.js
index 863877c..2a3eb92 100644
--- a/demo/Example.js
+++ b/demo/Example.js
@@ -33,9 +33,7 @@ var Example = React.createClass({
         };
 
         return (
-            <TreePane model={model}>
-                <CustomCellRenderer />
-            </TreePane>
+            <TreePane model={model} cellRenderer={<CustomCellRenderer />} />
         );
     }
 
diff --git a/demo/bundle.js b/demo/bundle.js
index f14228a..fbade1c 100644
--- a/demo/bundle.js
+++ b/demo/bundle.js
@@ -29,11 +29,7 @@ var Example = React.createClass({
             children: [{ name: "react-tree-pane", children: [{ name: "demo", children: [{ name: "bundle.js" }, { name: "Example.js" }] }, { name: "src", children: [{ name: "TreePane.js" }] }, { name: "test", children: [{ name: "TreePane-test.js" }] }, { name: "package.json" }] }]
         };
 
-        return React.createElement(
-            TreePane,
-            { model: model },
-            React.createElement(CustomCellRenderer, null)
-        );
+        return React.createElement(TreePane, { model: model, cellRenderer: React.createElement(CustomCellRenderer, null) });
     }
 
 });
@@ -59,14 +55,12 @@ var TreePane = _reactAddons2["default"].createClass({
     displayName: "TreePane",
 
     render: function render() {
-        var classes = ["TreePane"];
-        var renderer = this.props.children;
-        return _reactAddons2["default"].createElement("div", { className: classes.join(" ") }, _reactAddons2["default"].createElement(Node, { model: this.props.model, renderer: renderer }));
+        return _reactAddons2["default"].createElement("div", { className: "TreePane" }, _reactAddons2["default"].createElement(Node, { model: this.props.model, renderer: this.props.renderer }));
     }
 });
 
-var Cell = _reactAddons2["default"].createClass({
-    displayName: "Cell",
+var DefaultCellRenderer = _reactAddons2["default"].createClass({
+    displayName: "DefaultCellRenderer",
 
     render: function render() {
         return _reactAddons2["default"].createElement("span", null, this.props.model.name);
@@ -109,7 +103,7 @@ var Node = _reactAddons2["default"].createClass({
                 model: this.props.model
             });
         } else {
-            cellRenderer = _reactAddons2["default"].createElement(Cell, { model: this.props.model });
+            cellRenderer = _reactAddons2["default"].createElement(DefaultCellRenderer, { model: this.props.model });
         }
 
         return _reactAddons2["default"].createElement("div", { className: "Node" }, _reactAddons2["default"].createElement("div", { onClick: this.toggle, className: classes.join(" ") }, cellRenderer), childNodes);
diff --git a/src/TreePane.js b/src/TreePane.js
index d5861e0..b961977 100644
--- a/src/TreePane.js
+++ b/src/TreePane.js
@@ -6,15 +6,17 @@ import React from 'react/addons';
 let TreePane = React.createClass({
 
     render() {
-        const classes = ['TreePane'];
-        let renderer = this.props.children;
-        return <div className={classes.join(' ')}><Node model={this.props.model} renderer={renderer} /></div>
+        return (
+            <div className="TreePane">
+                <Node model={this.props.model} renderer={this.props.renderer} />
+            </div>
+        );
     }
 });
 
 
 
-let Cell = React.createClass({
+let DefaultCellRenderer = React.createClass({
     render() {
         return <span>{this.props.model.name}</span>
     }
@@ -60,7 +62,7 @@ let Node = React.createClass({
                 model: this.props.model
             });
         } else {
-            cellRenderer = <Cell model={this.props.model} />;
+            cellRenderer = <DefaultCellRenderer model={this.props.model} />;
         }
 
         return (