diff --git a/packages/clay-core/package.json b/packages/clay-core/package.json
index 0f62d54217..8903bcaf85 100644
--- a/packages/clay-core/package.json
+++ b/packages/clay-core/package.json
@@ -30,7 +30,9 @@
 		"@clayui/drop-down": "^3.35.3",
 		"@clayui/icon": "^3.32.0",
 		"@clayui/modal": "^3.35.3",
-		"@clayui/provider": "^3.35.3"
+		"@clayui/provider": "^3.35.3",
+		"@clayui/layout": "^3.32.0",
+		"classnames": "^2.2.6"
 	},
 	"peerDependencies": {
 		"@clayui/css": "3.x",
diff --git a/packages/clay-core/src/tree-view/TreeView.tsx b/packages/clay-core/src/tree-view/TreeView.tsx
new file mode 100644
index 0000000000..e0f090032e
--- /dev/null
+++ b/packages/clay-core/src/tree-view/TreeView.tsx
@@ -0,0 +1,71 @@
+/**
+ * SPDX-FileCopyrightText: © 2021 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import classNames from 'classnames';
+import React from 'react';
+
+import {TreeViewGroup} from './TreeViewGroup';
+import {TreeViewItem, TreeViewItemStack} from './TreeViewItem';
+import {TreeViewContext} from './context';
+import type {IExpandable, IMultipleSelection} from './useTree';
+
+type ChildrenFunction<T> = (item: T) => React.ReactElement;
+
+interface ITreeViewProps<T>
+	extends React.HTMLAttributes<HTMLUListElement>,
+		IMultipleSelection,
+		IExpandable {
+	children: React.ReactNode | ChildrenFunction<T>;
+	displayType?: 'light' | 'dark';
+	items?: Array<T>;
+	showExpanderOnHover?: boolean;
+}
+
+export function TreeView<T>(
+	props: ITreeViewProps<T>
+): JSX.Element & {
+	Item: typeof TreeViewItem;
+	Group: typeof TreeViewGroup;
+	ItemStack: typeof TreeViewItemStack;
+};
+
+export function TreeView<T>({
+	children,
+	className,
+	displayType = 'light',
+	items,
+	showExpanderOnHover = true,
+	...otherProps
+}: ITreeViewProps<T>) {
+	return (
+		<ul
+			{...otherProps}
+			className={classNames('treeview', className, {
+				[`treeview-${displayType}`]: displayType,
+				'show-component-expander-on-hover': showExpanderOnHover,
+			})}
+			role="tree"
+		>
+			<TreeViewContext.Provider value={{showExpanderOnHover}}>
+				{items
+					? items.map((item, index) => {
+							if (typeof children === 'function') {
+								return React.cloneElement(
+									children(item) as React.ReactElement,
+									{key: index}
+								);
+							}
+
+							return null;
+					  })
+					: children}
+			</TreeViewContext.Provider>
+		</ul>
+	);
+}
+
+TreeView.Item = TreeViewItem;
+TreeView.Group = TreeViewGroup;
+TreeView.ItemStack = TreeViewItemStack;
diff --git a/packages/clay-core/src/tree-view/TreeViewGroup.tsx b/packages/clay-core/src/tree-view/TreeViewGroup.tsx
new file mode 100644
index 0000000000..b0c0bc971b
--- /dev/null
+++ b/packages/clay-core/src/tree-view/TreeViewGroup.tsx
@@ -0,0 +1,42 @@
+/**
+ * SPDX-FileCopyrightText: © 2021 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import React from 'react';
+
+type ChildrenFunction<T> = (item: T) => React.ReactElement;
+
+type TreeViewItemProps<T> = {
+	children: React.ReactNode | ChildrenFunction<T>;
+	items?: Array<T>;
+};
+
+export function TreeViewGroup<T>(
+	props: TreeViewItemProps<T>
+): JSX.Element & {
+	displayName: string;
+};
+
+export function TreeViewGroup<T>({children, items}: TreeViewItemProps<T>) {
+	return (
+		<div className="collapse show">
+			<ul className="treeview-group" role="group">
+				{items
+					? items.map((item, index) => {
+							if (typeof children === 'function') {
+								return React.cloneElement(
+									children(item) as React.ReactElement,
+									{key: index}
+								);
+							}
+
+							return null;
+					  })
+					: children}
+			</ul>
+		</div>
+	);
+}
+
+TreeViewGroup.displayName = 'ClayTreeViewGroup';
diff --git a/packages/clay-core/src/tree-view/TreeViewItem.tsx b/packages/clay-core/src/tree-view/TreeViewItem.tsx
new file mode 100644
index 0000000000..cfce988887
--- /dev/null
+++ b/packages/clay-core/src/tree-view/TreeViewItem.tsx
@@ -0,0 +1,117 @@
+/**
+ * SPDX-FileCopyrightText: © 2021 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import Button from '@clayui/button';
+import Icon from '@clayui/icon';
+import Layout from '@clayui/layout';
+import React, {useContext} from 'react';
+
+type TreeViewItemProps = {
+	children: React.ReactNode;
+};
+
+const SpacingContext = React.createContext(0);
+
+export function TreeViewItem({children}: TreeViewItemProps) {
+	const spacing = useContext(SpacingContext);
+
+	const [left, right] = React.Children.toArray(children);
+
+	const group =
+		// @ts-ignore
+		right?.type?.displayName === 'ClayTreeViewGroup' ? right : null;
+
+	return (
+		<SpacingContext.Provider value={spacing + 24}>
+			<li className="treeview-item" role="none">
+				<div
+					aria-expanded="true"
+					className="treeview-link"
+					data-toggle="collapse"
+					role="treeitem"
+					style={{paddingLeft: `${spacing}px`}}
+					tabIndex={0}
+				>
+					<span
+						className="c-inner"
+						style={{marginLeft: `-${spacing}px`}}
+						tabIndex={-2}
+					>
+						{typeof left === 'string' ? (
+							<Layout.ContentRow>
+								<Layout.ContentCol expand>
+									<div className="component-text">{left}</div>
+								</Layout.ContentCol>
+							</Layout.ContentRow>
+						) : group ? (
+							left
+						) : (
+							<TreeViewItemStack expandable={false}>
+								{children}
+							</TreeViewItemStack>
+						)}
+					</span>
+				</div>
+				{group}
+			</li>
+		</SpacingContext.Provider>
+	);
+}
+
+type TreeViewItemStackProps = {
+	children: React.ReactNode;
+	expandable?: boolean;
+};
+
+export function TreeViewItemStack({
+	children,
+	expandable = true,
+}: TreeViewItemStackProps) {
+	const childrenArray = React.Children.toArray(children);
+
+	return (
+		<Layout.ContentRow>
+			{expandable && (
+				<Layout.ContentCol>
+					<Button
+						aria-expanded="true"
+						className="component-expander"
+						data-toggle="collapse"
+						displayType={null}
+						monospaced
+					>
+						<span className="c-inner" tabIndex={-2}>
+							<Icon symbol="angle-down" />
+							<Icon
+								className="component-expanded-d-none"
+								symbol="angle-right"
+							/>
+						</span>
+					</Button>
+				</Layout.ContentCol>
+			)}
+
+			{React.Children.map(children, (child, index) => {
+				let content = child;
+
+				if (typeof child === 'string') {
+					content = <div className="component-text">{child}</div>;
+
+					// @ts-ignore
+				} else if (child?.type.displayName === 'ClayIcon') {
+					content = <div className="component-icon">{child}</div>;
+				}
+
+				return (
+					<Layout.ContentCol
+						expand={index === childrenArray.length - 1}
+					>
+						{content}
+					</Layout.ContentCol>
+				);
+			})}
+		</Layout.ContentRow>
+	);
+}
diff --git a/packages/clay-core/src/tree-view/context.ts b/packages/clay-core/src/tree-view/context.ts
new file mode 100644
index 0000000000..a226f8820b
--- /dev/null
+++ b/packages/clay-core/src/tree-view/context.ts
@@ -0,0 +1,16 @@
+/**
+ * SPDX-FileCopyrightText: © 2021 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import React, {useContext} from 'react';
+
+export interface ITreeViewContext {
+	showExpanderOnHover?: boolean;
+}
+
+export const TreeViewContext = React.createContext<ITreeViewContext>({});
+
+export function useTreeViewContext(): ITreeViewContext {
+	return useContext(TreeViewContext);
+}
diff --git a/packages/clay-core/src/tree-view/index.ts b/packages/clay-core/src/tree-view/index.ts
new file mode 100644
index 0000000000..879aea88b8
--- /dev/null
+++ b/packages/clay-core/src/tree-view/index.ts
@@ -0,0 +1,6 @@
+/**
+ * SPDX-FileCopyrightText: © 2021 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+export * from './TreeView';
diff --git a/packages/clay-core/src/tree-view/useTree.ts b/packages/clay-core/src/tree-view/useTree.ts
new file mode 100644
index 0000000000..474ca63226
--- /dev/null
+++ b/packages/clay-core/src/tree-view/useTree.ts
@@ -0,0 +1,28 @@
+/**
+ * SPDX-FileCopyrightText: © 2021 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+export interface IExpandable {
+	/**
+	 * The currently expanded keys in the collection.
+	 */
+	expandedKeys?: Set<string>;
+
+	/**
+	 * Handler that is called when items are expanded or collapsed.
+	 */
+	onExpandedChange?: (keys: Set<string>) => void;
+}
+
+export interface IMultipleSelection {
+	/**
+	 * The currently selected keys in the collection.
+	 */
+	selectedKeys?: Set<string>;
+
+	/**
+	 * Handler that is called when the selection changes.
+	 */
+	onSelectionChange?: (keys: Set<string>) => void;
+}
diff --git a/packages/clay-core/stories/TreeView.stories.tsx b/packages/clay-core/stories/TreeView.stories.tsx
new file mode 100644
index 0000000000..515e91cf89
--- /dev/null
+++ b/packages/clay-core/stories/TreeView.stories.tsx
@@ -0,0 +1,152 @@
+/**
+ * SPDX-FileCopyrightText: © 2021 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import '@clayui/css/lib/css/atlas.css';
+
+import '@clayui/css/src/scss/cadmin.scss';
+const spritemap = require('@clayui/css/lib/images/icons/icons.svg');
+import Icon from '@clayui/icon';
+import {Provider} from '@clayui/provider';
+import Sticker from '@clayui/sticker';
+import {storiesOf} from '@storybook/react';
+import React from 'react';
+
+import {TreeView} from '../src/tree-view';
+
+storiesOf('Components|ClayTreeView', module)
+	.add('light', () => (
+		<Provider spritemap={spritemap} theme="cadmin">
+			<TreeView displayType="light">
+				<TreeView.Item>
+					<TreeView.ItemStack>
+						<Icon symbol="folder" />
+						{'Root'}
+					</TreeView.ItemStack>
+					<TreeView.Group>
+						<TreeView.Item>{'Item'}</TreeView.Item>
+					</TreeView.Group>
+				</TreeView.Item>
+			</TreeView>
+		</Provider>
+	))
+	.add('dark', () => (
+		<Provider spritemap={spritemap} theme="cadmin">
+			<TreeView className="bg-dark" displayType="dark">
+				<TreeView.Item>
+					<TreeView.ItemStack>
+						<Icon symbol="folder" />
+						{'Root'}
+					</TreeView.ItemStack>
+					<TreeView.Group>
+						<TreeView.Item>{'Item'}</TreeView.Item>
+					</TreeView.Group>
+				</TreeView.Item>
+			</TreeView>
+		</Provider>
+	))
+	.add('dynamic', () => (
+		<Provider spritemap={spritemap} theme="cadmin">
+			<TreeView
+				items={[
+					{
+						children: [
+							{name: 'Blogs'},
+							{name: 'Documents and Media'},
+						],
+						name: 'Liferay Drive',
+					},
+					{
+						children: [
+							{name: 'Blogs'},
+							{name: 'Documents and Media'},
+						],
+						name: 'Repositories',
+					},
+					{
+						children: [{name: 'PDF'}, {name: 'Word'}],
+						name: 'Documents and Media',
+					},
+				]}
+			>
+				{(item) => (
+					<TreeView.Item>
+						<TreeView.ItemStack>
+							<Icon symbol="folder" />
+							{item.name}
+						</TreeView.ItemStack>
+						<TreeView.Group items={item.children}>
+							{(item) => (
+								<TreeView.Item>{item.name}</TreeView.Item>
+							)}
+						</TreeView.Group>
+					</TreeView.Item>
+				)}
+			</TreeView>
+		</Provider>
+	))
+	.add('sticker', () => (
+		<Provider spritemap={spritemap} theme="cadmin">
+			<TreeView showExpanderOnHover={false}>
+				<TreeView.Item>
+					<TreeView.ItemStack>
+						<Sticker
+							displayType="primary"
+							shape="user-icon"
+							size="sm"
+						>
+							{'JH'}
+						</Sticker>
+						{'Juan Hidalgo'}
+					</TreeView.ItemStack>
+					<TreeView.Group>
+						<TreeView.Item>
+							<TreeView.ItemStack>
+								<Sticker
+									displayType="primary"
+									shape="user-icon"
+									size="sm"
+								>
+									{'VV'}
+								</Sticker>
+								{'Victor Valle'}
+							</TreeView.ItemStack>
+							<TreeView.Group>
+								<TreeView.Item>
+									<Sticker
+										displayType="primary"
+										shape="user-icon"
+										size="sm"
+									>
+										{'SV'}
+									</Sticker>
+									{'Susana Vázquez'}
+								</TreeView.Item>
+								<TreeView.Item>
+									<Sticker
+										displayType="primary"
+										shape="user-icon"
+										size="sm"
+									>
+										{'MM'}
+									</Sticker>
+									{'Myriam Manso'}
+								</TreeView.Item>
+							</TreeView.Group>
+						</TreeView.Item>
+						<TreeView.Item>
+							<Sticker
+								displayType="primary"
+								shape="user-icon"
+								size="sm"
+							>
+								{'EY'}
+							</Sticker>
+							{'Emily Young'}
+						</TreeView.Item>
+					</TreeView.Group>
+				</TreeView.Item>
+			</TreeView>
+		</Provider>
+	));
diff --git a/packages/clay-provider/src/Provider.tsx b/packages/clay-provider/src/Provider.tsx
index 43849f2f77..173088107a 100644
--- a/packages/clay-provider/src/Provider.tsx
+++ b/packages/clay-provider/src/Provider.tsx
@@ -33,11 +33,14 @@ Context.displayName = 'ClayProviderContext';
 export const Provider = ({
 	children,
 	spritemap,
+	theme,
 	...otherProps
 }: IProviderProps) => (
-	<Context.Provider value={otherProps}>
+	<Context.Provider value={{theme, ...otherProps}}>
 		<ClayIconSpriteContext.Provider value={spritemap}>
-			<ClayModalProvider>{children}</ClayModalProvider>
+			<ClayModalProvider>
+				{theme ? <div className={theme}>{children}</div> : children}
+			</ClayModalProvider>
 		</ClayIconSpriteContext.Provider>
 	</Context.Provider>
 );