diff --git a/src/scripts/Tree.js b/src/scripts/Tree.js
deleted file mode 100644
index b90ebedee..000000000
--- a/src/scripts/Tree.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, { Component, Children, cloneElement } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { cleanProps } from './util';
-
-export default class Tree extends Component {
-  constructor() {
-    super();
-
-    this.renderTreeNode = this.renderTreeNode.bind(this);
-  }
-
-  renderTreeNode(tnode) {
-    const {
-      onNodeClick,
-      onNodeToggle,
-      onNodeLabelClick,
-      toggleOnNodeClick,
-    } = this.props;
-    return cloneElement(tnode, {
-      level: 1,
-      onNodeClick,
-      onNodeToggle,
-      onNodeLabelClick,
-      toggleOnNodeClick,
-    });
-  }
-
-  render() {
-    const { className, label, children, ...props } = this.props;
-    const treeClassNames = classnames(className, 'slds-tree-container');
-    const pprops = cleanProps(props, Tree.propTypes);
-    return (
-      <div className={treeClassNames} role='application' {...pprops}>
-        {label ? <h4 className='slds-text-heading--label'>{label}</h4> : null}
-        <ul className='slds-tree' role='tree'>
-          {Children.map(children, this.renderTreeNode)}
-        </ul>
-      </div>
-    );
-  }
-}
-
-Tree.propTypes = {
-  className: PropTypes.string,
-  label: PropTypes.string,
-  onNodeClick: PropTypes.func,
-  onNodeToggle: PropTypes.func,
-  onNodeLabelClick: PropTypes.func,
-  toggleOnNodeClick: PropTypes.bool,
-  children: PropTypes.node,
-};
diff --git a/src/scripts/Tree.tsx b/src/scripts/Tree.tsx
new file mode 100644
index 000000000..77b66a010
--- /dev/null
+++ b/src/scripts/Tree.tsx
@@ -0,0 +1,68 @@
+import React, {
+  Component,
+  Children,
+  cloneElement,
+  HTMLAttributes,
+} from 'react';
+import classnames from 'classnames';
+
+export type TreeProps = {
+  className?: string;
+  label?: string;
+  toggleOnNodeClick?: boolean;
+  onNodeClick?: (...args: any[]) => any;
+  onNodeToggle?: (...args: any[]) => any;
+  onNodeLabelClick?: (...args: any[]) => any;
+};
+
+export class Tree extends Component<
+  TreeProps & HTMLAttributes<HTMLDivElement>,
+  {}
+> {
+  constructor(
+    props: Readonly<TreeProps & React.HTMLAttributes<HTMLDivElement>>
+  ) {
+    super(props);
+    this.renderTreeNode = this.renderTreeNode.bind(this);
+  }
+
+  renderTreeNode(tnode: any) {
+    const {
+      onNodeClick,
+      onNodeToggle,
+      onNodeLabelClick,
+      toggleOnNodeClick,
+    } = this.props;
+    return cloneElement(tnode, {
+      level: 1,
+      onNodeClick,
+      onNodeToggle,
+      onNodeLabelClick,
+      toggleOnNodeClick,
+    });
+  }
+
+  render() {
+    const {
+      className,
+      label,
+      children,
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      onNodeClick,
+      onNodeToggle,
+      onNodeLabelClick,
+      toggleOnNodeClick,
+      /* eslint-enable @typescript-eslint/no-unused-vars */
+      ...props
+    } = this.props;
+    const treeClassNames = classnames(className, 'slds-tree-container');
+    return (
+      <div className={treeClassNames} role='application' {...props}>
+        {label ? <h4 className='slds-text-heading--label'>{label}</h4> : null}
+        <ul className='slds-tree' role='tree'>
+          {Children.map(children, this.renderTreeNode)}
+        </ul>
+      </div>
+    );
+  }
+}
diff --git a/src/scripts/index.js b/src/scripts/index.js
index 48dc9afc0..39aa9c923 100644
--- a/src/scripts/index.js
+++ b/src/scripts/index.js
@@ -21,7 +21,6 @@ import Picklist, { PicklistItem } from './Picklist';
 import DateInput from './DateInput';
 import Lookup from './Lookup';
 import FieldSet from './FieldSet';
-import Tree from './Tree';
 import TreeNode from './TreeNode';
 import Spinner from './Spinner';
 import Grid, { Row, Col } from './Grid';
@@ -75,7 +74,6 @@ export {
   DateInput,
   Lookup,
   FieldSet,
-  Tree,
   TreeNode,
   Spinner,
   Grid,
@@ -116,4 +114,5 @@ export * from './Form';
 export * from './FormElement';
 export * from './Text';
 export * from './Textarea';
+export * from './Tree';
 export * from './ComponentSettings';
diff --git a/stories/TreeStories.js b/stories/TreeStories.tsx
similarity index 55%
rename from stories/TreeStories.js
rename to stories/TreeStories.tsx
index ca3e3adee..1d8d94ffa 100644
--- a/stories/TreeStories.js
+++ b/stories/TreeStories.tsx
@@ -12,57 +12,57 @@ storiesOf('Tree', module).add(
       onNodeClick={action('nodeClick')}
       onNodeToggle={action('nodeToggle')}
       onNodeLabelClick={action('nodeLabelClick')}
-      toggleOnNodeClick={boolean('toggleOnNodeClick')}
+      toggleOnNodeClick={boolean('toggleOnNodeClick', false)}
     >
       <TreeNode
         label={text('label item #1', 'Item #1')}
         opened={boolean('opened item #1', true)}
         selected={boolean('selected item #1', true)}
-        loading={boolean('loading item #1')}
-        leaf={boolean('leaf item #1')}
+        loading={boolean('loading item #1', false)}
+        leaf={boolean('leaf item #1', false)}
       >
         <TreeNode
           label={text('label item #1-1', 'Item #1-1')}
-          opened={boolean('opened item #1-1')}
-          selected={boolean('selected item #1-1')}
-          loading={boolean('loading item #1-1')}
+          opened={boolean('opened item #1-1', false)}
+          selected={boolean('selected item #1-1', false)}
+          loading={boolean('loading item #1-1', false)}
           leaf={boolean('leaf item #1-1', true)}
         />
         <TreeNode
           label={text('label item #1-2', 'Item #1-2')}
-          opened={boolean('opened item #1-2')}
-          selected={boolean('selected item #1-2')}
-          loading={boolean('loading item #1-2')}
-          leaf={boolean('leaf item #1-2')}
+          opened={boolean('opened item #1-2', false)}
+          selected={boolean('selected item #1-2', false)}
+          loading={boolean('loading item #1-2', false)}
+          leaf={boolean('leaf item #1-2', false)}
         >
           <TreeNode
             label={text('label item #1-2-1', 'Item #1-2-1')}
-            opened={boolean('opened item #1-2-1')}
-            selected={boolean('selected item #1-2-1')}
-            loading={boolean('loading item #1-2-1')}
+            opened={boolean('opened item #1-2-1', false)}
+            selected={boolean('selected item #1-2-1', false)}
+            loading={boolean('loading item #1-2-1', false)}
             leaf={boolean('leaf item #1-2-1', true)}
           />
           <TreeNode
             label={text('label item #1-2-2', 'Item #1-2-2')}
-            opened={boolean('opened item #1-2-2')}
-            selected={boolean('selected item #1-2-2')}
-            loading={boolean('loading item #1-2-2')}
+            opened={boolean('opened item #1-2-2', false)}
+            selected={boolean('selected item #1-2-2', false)}
+            loading={boolean('loading item #1-2-2', false)}
             leaf={boolean('leaf item #1-2-2', true)}
           />
         </TreeNode>
         <TreeNode
           label={text('label item #1-3', 'Item #1-3')}
-          opened={boolean('opened item #1-3')}
-          selected={boolean('selected item #1-3')}
-          loading={boolean('loading item #1-3')}
+          opened={boolean('opened item #1-3', false)}
+          selected={boolean('selected item #1-3', false)}
+          loading={boolean('loading item #1-3', false)}
           leaf={boolean('leaf item #1-3', true)}
         />
       </TreeNode>
       <TreeNode
         label={text('label item #2', 'Item #2')}
-        opened={boolean('opened item #2')}
-        selected={boolean('selected item #2')}
-        loading={boolean('loading item #2')}
+        opened={boolean('opened item #2', false)}
+        selected={boolean('selected item #2', false)}
+        loading={boolean('loading item #2', false)}
         leaf={boolean('leaf item #2', true)}
       />
     </Tree>
diff --git a/test/storyshots/__snapshots__/storyshots.test.js.snap b/test/storyshots/__snapshots__/storyshots.test.js.snap
index 5620f3203..90865d996 100644
--- a/test/storyshots/__snapshots__/storyshots.test.js.snap
+++ b/test/storyshots/__snapshots__/storyshots.test.js.snap
@@ -45815,6 +45815,7 @@ exports[`Storyshots Tree Controlled with knobs 1`] = `
                 </div>
               </li>
               <li
+                aria-expanded={false}
                 aria-level={2}
                 role="treeitem"
               >