diff --git a/.stylelintrc b/.stylelintrc
index 7b73b511d6..a0819dac1a 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -41,7 +41,6 @@
         ]
       }
     ],
-    "@cloudscape-design/no-motion-outside-of-mixin": [true],
     "@cloudscape-design/z-index-value-constraint": [true],
     "plugin/no-unsupported-browser-features": [
       true,
@@ -58,7 +57,8 @@
       ],
       "rules": {
         "property-disallowed-list": ["border", "border-radius", "border-style", "margin", "padding"],
-        "csstools/use-logical": "always"
+        "csstools/use-logical": "always",
+        "@cloudscape-design/no-motion-outside-of-mixin": [true]
       }
     }
   ],
diff --git a/build-tools/utils/pluralize.js b/build-tools/utils/pluralize.js
index c23250be8a..b5308c2a3a 100644
--- a/build-tools/utils/pluralize.js
+++ b/build-tools/utils/pluralize.js
@@ -79,6 +79,7 @@ const pluralizationMap = {
   ToggleButton: 'ToggleButtons',
   TokenGroup: 'TokenGroups',
   TopNavigation: 'TopNavigations',
+  TreeView: 'TreeViews',
   TutorialPanel: 'TutorialPanels',
   Wizard: 'Wizards',
 };
diff --git a/pages/tree-view/basic.page.tsx b/pages/tree-view/basic.page.tsx
new file mode 100644
index 0000000000..93042d884b
--- /dev/null
+++ b/pages/tree-view/basic.page.tsx
@@ -0,0 +1,109 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+import clsx from 'clsx';
+
+import Box from '~components/box';
+import Container from '~components/container';
+import FormField from '~components/form-field';
+import Grid from '~components/grid';
+import Icon from '~components/icon';
+import Select, { SelectProps } from '~components/select';
+import TreeView, { TreeViewProps } from '~components/tree-view';
+
+import ScreenshotArea from '../utils/screenshot-area';
+import { Actions } from './common';
+import { items } from './items/basic-page-items';
+
+import styles from './styles.scss';
+
+export default function BasicTreeView() {
+  const [expandedItems, setExpandedItems] = useState<Array<string>>(['1', '4.1']);
+  const [toggleIconType, setToggleIconType] = useState<SelectProps.Option>({
+    label: 'Default',
+    value: 'default',
+  });
+
+  const renderItemToggleIcon = ({ expanded }: TreeViewProps.ItemToggleRenderIconData) => {
+    if (toggleIconType.value === 'custom') {
+      return <Icon size="small" name={expanded ? 'treeview-collapse' : 'treeview-expand'} ariaLabel="Toggle" />;
+    }
+
+    if (toggleIconType.value === 'custom-with-slow-animation') {
+      return (
+        <Icon
+          size="small"
+          name="angle-down"
+          className={clsx(styles.animation, expanded && styles['animation-expanded'])}
+        />
+      );
+    }
+  };
+
+  return (
+    <ScreenshotArea>
+      <h1>Basic tree view</h1>
+
+      <Grid gridDefinition={[{ colspan: { m: 7, xs: 12 } }]}>
+        <div>
+          <FormField label="Toggle icon" stretch={true}>
+            <Select
+              selectedOption={toggleIconType}
+              onChange={({ detail }) => setToggleIconType(detail.selectedOption)}
+              options={[
+                {
+                  label: 'Default',
+                  value: 'default',
+                },
+                {
+                  label: 'Custom',
+                  value: 'custom',
+                },
+                {
+                  label: 'Custom with slow animation',
+                  value: 'custom-with-slow-animation',
+                },
+              ]}
+            />
+          </FormField>
+
+          <br />
+
+          <Container>
+            <TreeView
+              ariaLabel="Basic tree view"
+              items={items}
+              renderItem={item => {
+                return {
+                  icon: item.hideIcon ? undefined : (
+                    <Icon name={expandedItems.includes(item.id) ? 'folder-open' : 'folder'} ariaLabel="folder" />
+                  ),
+                  content: item.content,
+                  secondaryContent: item.details && <Box color="text-status-inactive">{item.details}</Box>,
+                  actions: item.hasActions ? <Actions actionType="inline-button-dropdown" /> : undefined,
+                };
+              }}
+              getItemId={item => item.id}
+              getItemChildren={item => item.children}
+              onItemToggle={({ detail }: any) => {
+                if (detail.expanded) {
+                  return setExpandedItems(prev => [...prev, detail.item.id]);
+                } else {
+                  return setExpandedItems(prev => prev.filter(id => id !== detail.item.id));
+                }
+              }}
+              expandedItems={expandedItems}
+              i18nStrings={{
+                expandButtonLabel: () => 'Expand item',
+                collapseButtonLabel: () => 'Collapse item',
+              }}
+              renderItemToggleIcon={renderItemToggleIcon}
+            />
+          </Container>
+        </div>
+      </Grid>
+
+      <div style={{ marginTop: '10px' }}>Expanded items: {expandedItems.map(id => `Item ${id}`).join(', ')}</div>
+    </ScreenshotArea>
+  );
+}
diff --git a/pages/tree-view/common.tsx b/pages/tree-view/common.tsx
new file mode 100644
index 0000000000..431e8ed5c4
--- /dev/null
+++ b/pages/tree-view/common.tsx
@@ -0,0 +1,121 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import { SpaceBetween } from '~components';
+import Box from '~components/box';
+import Button from '~components/button';
+import ButtonDropdown from '~components/button-dropdown';
+import ButtonGroup from '~components/button-group';
+import StatusIndicator from '~components/status-indicator/internal';
+
+import { Item } from './items/dynamic-items';
+
+export function Content(item: Item) {
+  if (item.status) {
+    return <StatusIndicator type={item.status}>{item.name}</StatusIndicator>;
+  }
+
+  return (
+    <div style={{ display: 'flex', gap: '10px' }}>
+      {item.name}
+
+      {item.errorCount && item.errorCount > 0 && <StatusIndicator type="error">{item.errorCount}</StatusIndicator>}
+      {item.warningCount && item.warningCount > 0 && (
+        <StatusIndicator type="warning">{item.warningCount}</StatusIndicator>
+      )}
+      {item.successCount && item.successCount > 0 && (
+        <StatusIndicator type="success">{item.successCount}</StatusIndicator>
+      )}
+    </div>
+  );
+}
+
+export function Actions(
+  {
+    actionType,
+  }: {
+    actionType?: 'button-group' | 'button-dropdown' | 'inline-button-dropdown' | 'text' | 'custom-inline-button-group';
+  } = {
+    actionType: 'inline-button-dropdown',
+  }
+) {
+  const [markedAsFavorite, setMarkedAsFavorite] = useState(false);
+
+  if (actionType === 'text') {
+    return <Box color="text-status-inactive">Some metadata</Box>;
+  }
+
+  if (actionType === 'button-group') {
+    return (
+      <ButtonGroup
+        variant="icon"
+        items={[
+          {
+            id: 'settings',
+            iconName: 'settings',
+            type: 'icon-button',
+            text: 'Settings',
+          },
+          {
+            type: 'icon-toggle-button',
+            id: 'favorite',
+            text: 'Favorite',
+            pressed: markedAsFavorite,
+            iconName: 'star',
+            pressedIconName: 'star-filled',
+          },
+          {
+            id: 'menu',
+            type: 'menu-dropdown',
+            text: 'Menu',
+            items: [
+              { id: 'start', text: 'Start' },
+              { id: 'stop', text: 'Stop', disabled: true },
+              {
+                id: 'hibernate',
+                text: 'Hibernate',
+                disabled: true,
+              },
+              { id: 'reboot', text: 'Reboot', disabled: true },
+              { id: 'terminate', text: 'Terminate' },
+            ],
+          },
+        ]}
+        onItemClick={({ detail }) => {
+          if (detail.id === 'favorite') {
+            setMarkedAsFavorite(!markedAsFavorite);
+          }
+        }}
+      />
+    );
+  }
+
+  const buttonDropdownItems = [
+    { id: 'start', text: 'Start' },
+    { id: 'stop', text: 'Stop', disabled: true },
+    {
+      id: 'hibernate',
+      text: 'Hibernate',
+      disabled: true,
+    },
+    { id: 'reboot', text: 'Reboot', disabled: true },
+    { id: 'terminate', text: 'Terminate' },
+  ];
+
+  if (actionType === 'custom-inline-button-group') {
+    return (
+      <SpaceBetween direction="horizontal" size="s">
+        <Button variant="inline-icon" iconName="settings" />
+        <Button variant="inline-icon" iconName="star" />
+        <ButtonDropdown items={buttonDropdownItems} ariaLabel="Control instance" variant="inline-icon" />
+      </SpaceBetween>
+    );
+  }
+
+  if (actionType === 'inline-button-dropdown') {
+    return <ButtonDropdown items={buttonDropdownItems} ariaLabel="Control instance" variant="inline-icon" />;
+  }
+
+  return <ButtonDropdown items={buttonDropdownItems} ariaLabel="Control instance" variant="icon" />;
+}
diff --git a/pages/tree-view/dynamic-items.page.tsx b/pages/tree-view/dynamic-items.page.tsx
new file mode 100644
index 0000000000..5de629062d
--- /dev/null
+++ b/pages/tree-view/dynamic-items.page.tsx
@@ -0,0 +1,87 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import { Button, SpaceBetween } from '~components';
+import Box from '~components/box';
+import Icon from '~components/icon';
+import TreeView from '~components/tree-view';
+
+import { Actions, Content } from './common';
+import { allItems, items } from './items/dynamic-items';
+
+const allExpandableItemIds = allItems.filter(item => item.children && item.children.length > 0).map(item => item.id);
+
+export default function DynamicItemsPage() {
+  const [expandedItems, setExpandedItems] = useState<Array<string>>([]);
+
+  return (
+    <>
+      <h1>Dynamic items page</h1>
+
+      <SpaceBetween size="s">
+        <Button
+          onClick={() => {
+            setExpandedItems(allExpandableItemIds);
+            console.time('expand-all');
+            requestAnimationFrame(() => console.timeEnd('expand-all'));
+          }}
+        >
+          Expand all
+        </Button>
+
+        <Button
+          onClick={() => {
+            setExpandedItems([]);
+            console.time('collapse-all');
+            requestAnimationFrame(() => console.timeEnd('collapse-all'));
+          }}
+        >
+          Collapse all
+        </Button>
+      </SpaceBetween>
+
+      <Box padding="xl">
+        <TreeView
+          items={items}
+          renderItem={item => {
+            const isExpanded = expandedItems.includes(item.id);
+            return {
+              icon: <Icon name={isExpanded ? 'folder-open' : 'folder'} />,
+              content: <Content {...item} />,
+              actions: item.hasActions ? <Actions actionType="button-group" /> : undefined,
+              secondaryContent: item.tagName ? (
+                <Box color="text-status-inactive">
+                  <SpaceBetween size="xxs" direction="horizontal">
+                    <Icon name="ticket" />
+                    <span>{item.tagName}</span>
+                  </SpaceBetween>
+                </Box>
+              ) : undefined,
+            };
+          }}
+          getItemId={item => item.id}
+          getItemChildren={item => item.children}
+          onItemToggle={({ detail }) => {
+            if (detail.expanded) {
+              const logName = `expand-item-${detail.item.name}`;
+              console.time(logName);
+              requestAnimationFrame(() => console.timeEnd(logName));
+              return setExpandedItems(prev => [...prev, detail.id]);
+            } else {
+              const logName = `collapse-item-${detail.item.name}`;
+              console.time(logName);
+              requestAnimationFrame(() => console.timeEnd(logName));
+              return setExpandedItems(prev => prev.filter(id => id !== detail.id));
+            }
+          }}
+          expandedItems={expandedItems}
+          i18nStrings={{
+            expandButtonLabel: () => 'Expand item',
+            collapseButtonLabel: () => 'Collapse item',
+          }}
+        />
+      </Box>
+    </>
+  );
+}
diff --git a/pages/tree-view/items/basic-page-items.tsx b/pages/tree-view/items/basic-page-items.tsx
new file mode 100644
index 0000000000..b7eaced686
--- /dev/null
+++ b/pages/tree-view/items/basic-page-items.tsx
@@ -0,0 +1,199 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Badge from '~components/badge';
+import Popover from '~components/popover';
+import SpaceBetween from '~components/space-between';
+import StatusIndicator from '~components/status-indicator';
+
+const progressiveStepContent = (
+  <div style={{ display: 'flex' }}>
+    <StatusIndicator type="warning">Checked 5 nodes</StatusIndicator>
+    <div style={{ borderLeft: '1px solid grey', marginLeft: '8px', marginRight: '8px' }} />
+    <SpaceBetween direction="horizontal" size="s">
+      <Popover content="There is an item with warning status" dismissButton={false} position="top">
+        <StatusIndicator type="warning">1</StatusIndicator>
+      </Popover>
+      <StatusIndicator type="in-progress">1</StatusIndicator>
+      <StatusIndicator type="error">1</StatusIndicator>
+      <StatusIndicator type="success">2</StatusIndicator>
+    </SpaceBetween>
+  </div>
+);
+
+const progressiveStepItemsContent = [
+  <StatusIndicator key={'warning-child'} type="warning">
+    node-17 (eksclu-node-12345)
+  </StatusIndicator>,
+  <StatusIndicator key={'loading-child'} type="loading">
+    node-18 (eksclu-node-09876)
+  </StatusIndicator>,
+  <StatusIndicator key={'error-child'} type="error">
+    <Popover content="This is an error message" position="top" dismissButton={false}>
+      node-18 (eksclu-node-09876)
+    </Popover>
+  </StatusIndicator>,
+  <StatusIndicator key={'success-child'} type="success">
+    node-19 (eksclu-node-ab123)
+  </StatusIndicator>,
+  <StatusIndicator key={'success-child-2'} type="success">
+    node-20 (eksclu-node-ab124)
+  </StatusIndicator>,
+];
+
+interface Item {
+  id: string;
+  content: React.ReactNode;
+  details?: string;
+  children?: Item[];
+  hasActions?: boolean;
+  hideIcon?: boolean;
+}
+
+export const items: Item[] = [
+  {
+    id: '1',
+    content: 'Item 1',
+    children: [
+      {
+        id: '1.1',
+        content: 'Item 1.1',
+        children: [
+          {
+            id: '1.1.1',
+            content: 'Item 1.1.1',
+          },
+          {
+            id: '1.1.2',
+            content: 'Item 1.1.2',
+          },
+        ],
+      },
+      {
+        id: '1.2',
+        content: 'Item 1.2',
+        hasActions: true,
+        details: 'us-east-1',
+      },
+      {
+        id: '1.3',
+        content: 'Item 1.3',
+        hasActions: true,
+        children: [
+          {
+            id: '1.3.1',
+            content: 'Item 1.3.1',
+            hasActions: true,
+          },
+          {
+            id: '1.3.2',
+            content: 'Item 1.3.2',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: '2',
+    content: 'Item 2',
+    hasActions: true,
+    details: 'us-east-1',
+  },
+  {
+    id: '3',
+    content: 'Item 3',
+    hasActions: true,
+    children: [
+      {
+        id: '3.1',
+        content: 'Item 3.1',
+      },
+    ],
+  },
+  {
+    id: '4',
+    content: (
+      <SpaceBetween direction="horizontal" size="s">
+        <span>Item 4 but imagine this is a longer text</span>
+        <SpaceBetween direction="horizontal" size="xxs">
+          <Badge color="red">1</Badge>
+          <Badge color="blue">1</Badge>
+          <Badge color="green">3</Badge>
+        </SpaceBetween>
+      </SpaceBetween>
+    ),
+    hasActions: true,
+    details: 'Some random description regarding the item and it is a bit long too',
+    children: [
+      {
+        id: '4.1',
+        content: 'Item 4.1',
+        details: 'This item is an end node',
+      },
+      {
+        id: '4.2',
+        content: 'Item 4.2',
+        children: [
+          {
+            id: '4.2.1',
+            content: 'Item 4.2.1',
+          },
+          {
+            id: '4.2.2',
+            content: 'Item 4.2.2',
+            details: 'This item has a single child',
+            children: [
+              {
+                id: '4.2.2.1',
+                content: 'Item 4.2.2.1',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: '4.3',
+        content: 'Item 4.3',
+      },
+    ],
+  },
+
+  {
+    id: '5',
+    content: 'Item 5',
+    details: 'This item is on level 1',
+  },
+  {
+    id: '6',
+    content: progressiveStepContent,
+    hideIcon: true,
+    hasActions: true,
+    children: [
+      {
+        id: '6.1',
+        content: progressiveStepItemsContent[0],
+        hideIcon: true,
+      },
+      {
+        id: '6.2',
+        content: progressiveStepItemsContent[1],
+        hideIcon: true,
+      },
+      {
+        id: '6.3',
+        content: progressiveStepItemsContent[2],
+        hideIcon: true,
+      },
+      {
+        id: '6.4',
+        content: progressiveStepItemsContent[3],
+        hideIcon: true,
+      },
+    ],
+  },
+  {
+    id: '7',
+    content: 'Item 7',
+  },
+];
diff --git a/pages/tree-view/items/dynamic-items.ts b/pages/tree-view/items/dynamic-items.ts
new file mode 100644
index 0000000000..dab51f3f5c
--- /dev/null
+++ b/pages/tree-view/items/dynamic-items.ts
@@ -0,0 +1,186 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import padStart from 'lodash/padStart';
+import range from 'lodash/range';
+
+import pseudoRandom from '../../utils/pseudo-random';
+
+const MAX_LEVEL = 5;
+
+export interface Item {
+  id: string;
+  name: string;
+  level: number;
+  status?: 'error' | 'success' | 'warning';
+  tagName?: string;
+  errorCount?: number;
+  warningCount?: number;
+  successCount?: number;
+  children?: Item[];
+  hasActions?: boolean;
+  parentId: string;
+  isExpanded?: boolean;
+}
+
+function id() {
+  const id = Math.ceil(pseudoRandom() * Math.pow(16, 8)).toString(16);
+  return padStart(id, 8, '0');
+}
+
+function database() {
+  const randomNumber = 1 + Math.floor(pseudoRandom() * 256);
+  return `database-${randomNumber}`;
+}
+
+function tagName() {
+  const randomNumber = 1 + Math.floor(pseudoRandom() * 256);
+  return `tag-${randomNumber}`;
+}
+
+export function subnet() {
+  const randomNumber = 1 + Math.floor(pseudoRandom() * 256);
+  return `subnet-abcdh12345${randomNumber}`;
+}
+
+function yesOrNo() {
+  return Math.random() < 0.5;
+}
+
+function statusCount() {
+  return yesOrNo() ? Math.floor(pseudoRandom() * 5) : 0;
+}
+
+function getChildren({
+  level,
+  parentId,
+  count = 0,
+  errorCount = 0,
+  warningCount = 0,
+  successCount = 0,
+}: {
+  level: number;
+  parentId: string;
+  count?: number;
+  errorCount?: number;
+  warningCount?: number;
+  successCount?: number;
+}): Item[] {
+  if (level + 1 === MAX_LEVEL) {
+    return [];
+  }
+
+  return yesOrNo()
+    ? getStatusIndicatorItems({ level: level + 1, parentId, errorCount, warningCount, successCount })
+    : getSubnetItems({ level: level + 1, parentId, count });
+}
+
+function getStatusIndicatorItems({
+  level,
+  parentId,
+  errorCount = 0,
+  warningCount = 0,
+  successCount = 0,
+}: {
+  level: number;
+  parentId: string;
+  errorCount: number;
+  warningCount: number;
+  successCount: number;
+}) {
+  const items: Item[] = [];
+
+  if (errorCount > 0) {
+    const itemId = `${parentId}-${id()}`;
+    items.push({
+      id: itemId,
+      parentId,
+      name: `${errorCount} error`,
+      level,
+      status: 'error',
+      children: getChildren({ parentId: itemId, level, count: errorCount }),
+    });
+  }
+
+  if (warningCount > 0) {
+    const itemId = `${parentId}-${id()}`;
+    items.push({
+      id: itemId,
+      parentId,
+      name: `${warningCount} warning`,
+      level,
+      status: 'warning',
+      children: getChildren({ parentId: itemId, level, count: warningCount }),
+    });
+  }
+
+  if (successCount > 0) {
+    const itemId = `${parentId}-${id()}`;
+    items.push({
+      id: itemId,
+      parentId,
+      name: `${successCount} success`,
+      level,
+      status: 'success',
+      children: getChildren({ parentId: itemId, level, count: successCount }),
+    });
+  }
+
+  return items;
+}
+
+function getSubnetItems({ level, parentId, count }: { level: number; parentId: string; count: number }) {
+  return range(count).map(() => {
+    const itemId = `${parentId}-${id()}`;
+    return {
+      id: itemId,
+      parentId,
+      name: subnet(),
+      children: yesOrNo() ? getChildren({ parentId: itemId, level, count }) : [],
+      tagName: yesOrNo() ? tagName() : undefined,
+      level,
+      hasActions: yesOrNo(),
+    };
+  });
+}
+
+export default function getItems(rootItemCount = 20): Item[] {
+  return range(rootItemCount).map(() => {
+    const errorCount = statusCount();
+    const warningCount = statusCount();
+    const successCount = statusCount();
+
+    const itemId = id();
+
+    return {
+      id: itemId,
+      parentId: 'root',
+      name: database(),
+      level: 0,
+      tagName: yesOrNo() ? tagName() : undefined,
+      errorCount,
+      warningCount,
+      successCount,
+      hasActions: yesOrNo(),
+      children: yesOrNo()
+        ? getChildren({ level: 0, parentId: itemId, count: rootItemCount / 2, errorCount, warningCount, successCount })
+        : [],
+    };
+  });
+}
+
+function flattenItems(items: Item[]) {
+  const allItems: Item[] = [];
+
+  const pushItem = (item: Item) => {
+    allItems.push(item);
+    if (item.children) {
+      item.children.forEach(pushItem);
+    }
+  };
+
+  items.forEach(pushItem);
+  return allItems;
+}
+
+export const items = getItems(15);
+export const allItems = flattenItems(items);
diff --git a/pages/tree-view/items/permutations-items.tsx b/pages/tree-view/items/permutations-items.tsx
new file mode 100644
index 0000000000..d91a6d30ca
--- /dev/null
+++ b/pages/tree-view/items/permutations-items.tsx
@@ -0,0 +1,256 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Box from '~components/box';
+import Icon from '~components/icon';
+import SpaceBetween from '~components/space-between';
+import StatusIndicator from '~components/status-indicator';
+
+import { Actions } from '../common';
+
+export interface Item {
+  id: string;
+  content: React.ReactNode;
+  secondaryContent?: React.ReactNode;
+  icon?: React.ReactNode;
+  actions?: React.ReactNode;
+  children?: Item[];
+}
+
+export const textItems: Item[] = [
+  {
+    id: '1',
+    content: 'Item 1',
+    secondaryContent: 'Description 1',
+    actions: 'Actions slot',
+    children: [{ id: '1.1', content: 'Item 1.1', secondaryContent: 'Description 1.1', actions: 'Actions slot' }],
+  },
+  {
+    id: '2',
+    content: 'Item 2',
+    secondaryContent: 'Description 2',
+    actions: <Actions actionType="button-group" />,
+  },
+  {
+    id: '3',
+    content: 'Item 3',
+    secondaryContent: 'Description 3',
+    actions: <Actions actionType="button-dropdown" />,
+    children: [
+      { id: '3.1', content: 'Item 3.1', secondaryContent: 'Description 3.1', actions: 'Actions slot' },
+      {
+        id: '3.2',
+        content: 'Item 3.2',
+        secondaryContent: 'Description 3.2',
+        actions: <Actions actionType="inline-button-dropdown" />,
+        children: [{ id: '3.2.1', content: 'Item 3.2.1', secondaryContent: 'Description 3.2.1' }],
+      },
+      { id: '3.3', content: 'Item 3.3', secondaryContent: 'Description 3.3' },
+    ],
+  },
+  {
+    id: '4',
+    content: 'Item 4',
+    secondaryContent: 'Description 4',
+    actions: <Actions actionType="custom-inline-button-group" />,
+  },
+];
+
+export const longTextItems: Item[] = [
+  {
+    id: 'long-text-1',
+    content:
+      'This item and its children all have long texts such as; Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+    secondaryContent: (
+      <Box color="text-status-inactive">
+        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Sed ut
+        perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Sed ut perspiciatis
+        unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
+      </Box>
+    ),
+    icon: <Icon name="file" />,
+    actions: <Actions actionType="text" />,
+  },
+  {
+    id: 'long-text-2',
+    content:
+      'Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt',
+    secondaryContent: (
+      <Box color="text-status-inactive">
+        Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non
+        numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem, Neque porro quisquam
+        est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
+        incidunt ut labore et dolore magnam aliquam quaerat voluptatem
+      </Box>
+    ),
+    icon: <Icon name="file" />,
+    actions: <Actions actionType="button-group" />,
+    children: [
+      {
+        id: 'long-text-2.1',
+        content:
+          'Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt',
+        icon: <Icon name="file" />,
+        secondaryContent: (
+          <Box color="text-status-inactive">
+            Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non
+            numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem, Neque porro
+            quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius
+            modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem
+          </Box>
+        ),
+      },
+      {
+        id: 'long-text-2.2',
+        content:
+          'Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt',
+        secondaryContent: (
+          <Box color="text-status-inactive">
+            Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non
+            numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem, Neque porro
+            quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius
+            modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem
+          </Box>
+        ),
+        icon: <Icon name="file" />,
+        children: [
+          {
+            id: 'long-text-2.2.1',
+            content:
+              'Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt',
+            secondaryContent:
+              'Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem',
+            icon: <Icon name="file" />,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'long-text-3',
+    content:
+      'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque',
+    secondaryContent:
+      'Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam',
+    icon: <Icon name="file" />,
+    actions: <Actions actionType="custom-inline-button-group" />,
+    children: [
+      {
+        id: 'long-text-3.1',
+        content:
+          'Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt',
+        secondaryContent:
+          'Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem',
+      },
+    ],
+  },
+  {
+    id: 'long-text-4',
+    content:
+      'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque',
+    secondaryContent:
+      'Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam',
+    icon: <Icon name="file" />,
+    actions: <Actions actionType="inline-button-dropdown" />,
+  },
+];
+
+export const statusIndicatorItems: Item[] = [
+  {
+    id: 'status-indicator-1',
+    content: <StatusIndicator type="success">Evaluated</StatusIndicator>,
+    secondaryContent: 'Successful',
+  },
+  {
+    id: 'status-indicator-2',
+    content: (
+      <div style={{ display: 'flex' }}>
+        <StatusIndicator type="warning">Checked 5 nodes</StatusIndicator>
+        <div style={{ borderLeft: '1px solid grey', marginLeft: '8px', marginRight: '8px' }} />
+        <SpaceBetween direction="horizontal" size="s">
+          <StatusIndicator type="success">1</StatusIndicator>
+          <StatusIndicator type="in-progress">1</StatusIndicator>
+          <StatusIndicator type="warning">1</StatusIndicator>
+          <StatusIndicator type="error">1</StatusIndicator>
+        </SpaceBetween>
+      </div>
+    ),
+    children: [
+      {
+        id: 'status-indicator-2.1',
+        content: <StatusIndicator type="success">node-17 (eksclu-node-12345)</StatusIndicator>,
+      },
+      {
+        id: 'status-indicator-2.2',
+        content: <StatusIndicator type="in-progress">node-18 (eksclu-node-09876)</StatusIndicator>,
+        secondaryContent: 'In progress',
+      },
+      {
+        id: 'status-indicator-2.3',
+        content: <StatusIndicator type="warning">node-20 (eksclu-node-wx456)</StatusIndicator>,
+        children: [
+          {
+            id: 'status-indicator-2.3.1',
+            content: <StatusIndicator type="warning">Checked resource utilization</StatusIndicator>,
+            secondaryContent: 'CPU utilization threshold exceeded.',
+          },
+          {
+            id: 'status-indicator-2.3.2',
+            content: <StatusIndicator type="success">Checked network connectivity</StatusIndicator>,
+          },
+        ],
+      },
+      {
+        id: 'status-indicator-2.4',
+        content: <StatusIndicator type="error">node-19 (eksclu-node-ab123)</StatusIndicator>,
+      },
+    ],
+  },
+  {
+    id: 'status-indicator-3',
+    content: <StatusIndicator type="success">Checked EKS clusters</StatusIndicator>,
+  },
+  {
+    id: 'status-indicator-4',
+    content: (
+      <div style={{ display: 'flex' }}>
+        <StatusIndicator type="in-progress">Running automation</StatusIndicator>
+        <div style={{ borderLeft: '1px solid grey', marginLeft: '8px', marginRight: '8px' }} />
+        <SpaceBetween direction="horizontal" size="s">
+          <StatusIndicator type="error">1</StatusIndicator>
+          <StatusIndicator type="in-progress">1</StatusIndicator>
+          <StatusIndicator type="success">1</StatusIndicator>
+        </SpaceBetween>
+      </div>
+    ),
+    children: [
+      {
+        id: 'status-indicator-4.1',
+        content: <StatusIndicator type="success">First action</StatusIndicator>,
+      },
+      {
+        id: 'status-indicator-4.2',
+        content: <StatusIndicator type="error">Second action</StatusIndicator>,
+      },
+      {
+        id: 'status-indicator-4.3',
+        content: <StatusIndicator type="loading">Third action</StatusIndicator>,
+      },
+    ],
+  },
+];
+
+export function getAllExpandableItemIds(items: Item[]) {
+  const expandableItemIds: string[] = [];
+
+  const pushItem = (item: Item) => {
+    if (item.children) {
+      expandableItemIds.push(item.id);
+      item.children.forEach(pushItem);
+    }
+  };
+
+  items.forEach(pushItem);
+  return expandableItemIds;
+}
diff --git a/pages/tree-view/permutations.page.tsx b/pages/tree-view/permutations.page.tsx
new file mode 100644
index 0000000000..41de83d2cd
--- /dev/null
+++ b/pages/tree-view/permutations.page.tsx
@@ -0,0 +1,101 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useContext, useState } from 'react';
+
+import Box from '~components/box';
+import Checkbox from '~components/checkbox';
+import TreeView from '~components/tree-view';
+
+import AppContext, { AppContextType } from '../app/app-context';
+import ScreenshotArea from '../utils/screenshot-area';
+import {
+  getAllExpandableItemIds,
+  Item,
+  longTextItems,
+  statusIndicatorItems,
+  textItems,
+} from './items/permutations-items';
+
+type PageContext = React.Context<
+  AppContextType<{
+    expandAll?: boolean;
+  }>
+>;
+
+interface Permutation {
+  title: string;
+  items: Item[];
+}
+
+const textPermutation: Permutation = {
+  title: 'Tree view with only text',
+  items: textItems,
+};
+
+const longTextPermutation: Permutation = {
+  title: 'Tree view with long text',
+  items: longTextItems,
+};
+
+const statusIndicatorPermutation: Permutation = {
+  title: 'Tree view with status indicators',
+  items: statusIndicatorItems,
+};
+
+export default function TreeViewPermuations() {
+  const { urlParams, setUrlParams } = useContext(AppContext as PageContext);
+
+  return (
+    <ScreenshotArea>
+      <h1>Tree view permutations</h1>
+
+      <Checkbox
+        checked={urlParams.expandAll ?? false}
+        onChange={event => {
+          setUrlParams({ expandAll: event.detail.checked });
+          window.location.reload();
+        }}
+      >
+        Expand all
+      </Checkbox>
+
+      {[textPermutation, longTextPermutation, statusIndicatorPermutation].map((permutation, index) => (
+        <Permutation key={index} {...permutation} expandAll={urlParams.expandAll} />
+      ))}
+    </ScreenshotArea>
+  );
+}
+
+function Permutation({ title, items, expandAll }: Permutation & { expandAll?: boolean }) {
+  const [expandedItems, setExpandedItems] = useState(expandAll ? getAllExpandableItemIds(items) : []);
+
+  return (
+    <div>
+      <h2>{title}</h2>
+      <TreeView
+        ariaLabel={title}
+        items={items}
+        renderItem={item => ({
+          ...item,
+          secondaryContent: item.secondaryContent ? (
+            <Box color="text-status-inactive">{item.secondaryContent}</Box>
+          ) : undefined,
+        })}
+        getItemId={item => item.id}
+        getItemChildren={item => item.children}
+        i18nStrings={{
+          expandButtonLabel: () => 'Expand item',
+          collapseButtonLabel: () => 'Collapse item',
+        }}
+        expandedItems={expandedItems}
+        onItemToggle={({ detail }: any) => {
+          if (detail.expanded) {
+            return setExpandedItems(prev => [...prev, detail.item.id]);
+          } else {
+            return setExpandedItems(prev => prev.filter(id => id !== detail.item.id));
+          }
+        }}
+      />
+    </div>
+  );
+}
diff --git a/pages/tree-view/styles.scss b/pages/tree-view/styles.scss
new file mode 100644
index 0000000000..e73a037ffd
--- /dev/null
+++ b/pages/tree-view/styles.scss
@@ -0,0 +1,13 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.animation {
+  transform: rotate(-90deg);
+
+  transition: transform 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
+
+  &-expanded {
+    transform: rotate(0deg);
+  }
+}
diff --git a/src/__tests__/required-props-for-components.ts b/src/__tests__/required-props-for-components.ts
index e28ba9b28b..b47d81ce12 100644
--- a/src/__tests__/required-props-for-components.ts
+++ b/src/__tests__/required-props-for-components.ts
@@ -88,6 +88,12 @@ const defaultProps: Record<string, Record<string, any>> = {
     },
     tutorials: [],
   },
+  'tree-view': {
+    items: [],
+    renderItem: () => ({ content: '' }),
+    getItemId: () => '',
+    getItemChildren: () => [],
+  },
   'annotation-context': {
     i18nStrings: {},
   },
diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index 0a0999f68e..3f9e703997 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -20552,6 +20552,203 @@ The following properties are supported across all utility types:
 }
 `;
 
+exports[`Documenter definition for tree-view matches the snapshot: tree-view 1`] = `
+{
+  "dashCaseName": "tree-view",
+  "events": [
+    {
+      "cancelable": false,
+      "description": "Called when an item expands or collapses.",
+      "detailInlineType": {
+        "name": "TreeViewProps.ItemToggleDetail<T>",
+        "properties": [
+          {
+            "name": "expanded",
+            "optional": false,
+            "type": "boolean",
+          },
+          {
+            "name": "id",
+            "optional": false,
+            "type": "string",
+          },
+          {
+            "name": "item",
+            "optional": false,
+            "type": "T",
+          },
+        ],
+        "type": "object",
+      },
+      "detailType": "TreeViewProps.ItemToggleDetail<T>",
+      "name": "onItemToggle",
+    },
+  ],
+  "functions": [],
+  "name": "TreeView",
+  "properties": [
+    {
+      "description": "Sets the \`aria-describedby\` property on the tree view.",
+      "name": "ariaDescribedby",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "description": "Provides an \`aria-label\` to the tree view that screen readers can read (for accessibility).
+Don't use \`ariaLabel\` and \`ariaLabelledby\` at the same time.",
+      "name": "ariaLabel",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "description": "Sets the \`aria-labelledby\` property on the tree view.
+If there's a visible label element that you can reference, use this instead of \`ariaLabel\`.
+Don't use \`ariaLabel\` and \`ariaLabelledby\` at the same time.",
+      "name": "ariaLabelledby",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
+      "description": "Adds the specified classes to the root element of the component.",
+      "name": "className",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "description": "Provides the IDs of the expanded tree view items. It controls whether an item is expanded or collapsed.",
+      "name": "expandedItems",
+      "optional": true,
+      "type": "ReadonlyArray<string>",
+    },
+    {
+      "description": "Specifies the nested items that are displayed when a tree view item gets expanded.",
+      "inlineType": {
+        "name": "(item: T, index: number) => ReadonlyArray<T>",
+        "parameters": [
+          {
+            "name": "item",
+            "type": "T",
+          },
+          {
+            "name": "index",
+            "type": "number",
+          },
+        ],
+        "returnType": "ReadonlyArray<T>",
+        "type": "function",
+      },
+      "name": "getItemChildren",
+      "optional": false,
+      "type": "(item: T, index: number) => ReadonlyArray<T>",
+    },
+    {
+      "description": "Provides a unique identifier for each tree view item.",
+      "inlineType": {
+        "name": "(item: T, index: number) => string",
+        "parameters": [
+          {
+            "name": "item",
+            "type": "T",
+          },
+          {
+            "name": "index",
+            "type": "number",
+          },
+        ],
+        "returnType": "string",
+        "type": "function",
+      },
+      "name": "getItemId",
+      "optional": false,
+      "type": "(item: T, index: number) => string",
+    },
+    {
+      "description": "An object containing all the necessary localized strings required by the component.",
+      "i18nTag": true,
+      "inlineType": {
+        "name": "TreeViewProps.I18nStrings<T>",
+        "properties": [
+          {
+            "name": "collapseButtonLabel",
+            "optional": true,
+            "type": "((item: T) => string)",
+          },
+          {
+            "name": "expandButtonLabel",
+            "optional": true,
+            "type": "((item: T) => string)",
+          },
+        ],
+        "type": "object",
+      },
+      "name": "i18nStrings",
+      "optional": true,
+      "type": "TreeViewProps.I18nStrings<T>",
+    },
+    {
+      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
+use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
+use the \`id\` attribute, consider setting it on a parent element instead.",
+      "description": "Adds the specified ID to the root element of the component.",
+      "name": "id",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "description": "Specifies the items to display in the tree view.",
+      "name": "items",
+      "optional": false,
+      "type": "ReadonlyArray<T>",
+    },
+    {
+      "description": "Use this property to map your data to tree view items. This property must return an object with the following properties:
+* \`content\` (ReactNode) - The content of the item.
+* \`icon\` (optional, ReactNode) - The leading icon of the item.
+* \`secondaryContent\` (optional, ReactNode) - Secondary content of the item, displayed below \`content\`.
+* \`actions\` (optional, ReactNode) - Actions related to the item. Use [button](/components/button/?tabId=playground&example=inline-icon-button) with inline-icon or inline-link variants. For items with multiple actions, use [button dropdown](/components/button-dropdown/?tabId=playground&example=inline-icon-button-dropdown) with the inline-icon variant.",
+      "inlineType": {
+        "name": "(item: T, index: number) => TreeViewProps.TreeItem",
+        "parameters": [
+          {
+            "name": "item",
+            "type": "T",
+          },
+          {
+            "name": "index",
+            "type": "number",
+          },
+        ],
+        "returnType": "TreeViewProps.TreeItem",
+        "type": "function",
+      },
+      "name": "renderItem",
+      "optional": false,
+      "type": "(item: T, index: number) => TreeViewProps.TreeItem",
+    },
+    {
+      "description": "Use this property to display a custom icon in the toggle button.",
+      "inlineType": {
+        "name": "({ expanded }: TreeViewProps.ItemToggleRenderIconData) => React.ReactNode",
+        "parameters": [
+          {
+            "name": "__0",
+            "type": "TreeViewProps.ItemToggleRenderIconData",
+          },
+        ],
+        "returnType": "React.ReactNode",
+        "type": "function",
+      },
+      "name": "renderItemToggleIcon",
+      "optional": true,
+      "type": "(({ expanded }: TreeViewProps.ItemToggleRenderIconData) => React.ReactNode)",
+    },
+  ],
+  "regions": [],
+  "releaseStatus": "stable",
+}
+`;
+
 exports[`Documenter definition for tutorial-panel matches the snapshot: tutorial-panel 1`] = `
 {
   "dashCaseName": "tutorial-panel",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap
index e10ee226d8..5669111bfc 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap
@@ -348,6 +348,7 @@ exports[`test-utils selectors 1`] = `
     "awsui_root_2rhyz",
   ],
   "internal": [
+    "awsui_actions_x6dl3",
     "awsui_application_1fcus",
     "awsui_axis-label--x_f0fot",
     "awsui_axis-label--y_f0fot",
@@ -355,6 +356,7 @@ exports[`test-utils selectors 1`] = `
     "awsui_button-trigger_18eso",
     "awsui_button_m5h9f",
     "awsui_chart-filter_1px7g",
+    "awsui_content_x6dl3",
     "awsui_control_1wepg",
     "awsui_description_1p2cx",
     "awsui_description_1wepg",
@@ -365,6 +367,7 @@ exports[`test-utils selectors 1`] = `
     "awsui_direction-button-visible_8k1rt",
     "awsui_disabled_15o6u",
     "awsui_dropdown_qwoo0",
+    "awsui_expand-toggle_1xe88",
     "awsui_filter-container_z5mul",
     "awsui_filtering-match-highlight_1p2cx",
     "awsui_footer_dgs8z",
@@ -372,6 +375,7 @@ exports[`test-utils selectors 1`] = `
     "awsui_has-background_15o6u",
     "awsui_header_dgs8z",
     "awsui_highlighted_15o6u",
+    "awsui_icon_x6dl3",
     "awsui_inner-list-item_10ipo",
     "awsui_key_10ipo",
     "awsui_label-tag_1p2cx",
@@ -395,6 +399,7 @@ exports[`test-utils selectors 1`] = `
     "awsui_root_qwoo0",
     "awsui_root_vrgzu",
     "awsui_screenreader-content_15o6u",
+    "awsui_secondary_x6dl3",
     "awsui_select-all_15o6u",
     "awsui_selectable-item_15o6u",
     "awsui_selected_15o6u",
@@ -579,7 +584,6 @@ exports[`test-utils selectors 1`] = `
     "awsui_body-cell-editor_c6tup",
     "awsui_body-cell_c6tup",
     "awsui_empty_wih1l",
-    "awsui_expand-toggle_1ss49",
     "awsui_header-cell-ascending_1spae",
     "awsui_header-cell-descending_1spae",
     "awsui_header-controls_wih1l",
@@ -665,6 +669,12 @@ exports[`test-utils selectors 1`] = `
     "awsui_utility-wrapper_1ca1i",
     "awsui_utility-wrapper_k5dlb",
   ],
+  "tree-view": [
+    "awsui_expandable_1js4f",
+    "awsui_expanded_1js4f",
+    "awsui_root_1js4f",
+    "awsui_treeitem_1js4f",
+  ],
   "tutorial-panel": [
     "awsui_collapse-button_ig8mp",
     "awsui_completed_ig8mp",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap
index cdfb9b922f..9be09c8f8d 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap
@@ -87,6 +87,7 @@ import ToggleWrapper from './toggle';
 import ToggleButtonWrapper from './toggle-button';
 import TokenGroupWrapper from './token-group';
 import TopNavigationWrapper from './top-navigation';
+import TreeViewWrapper from './tree-view';
 import TutorialPanelWrapper from './tutorial-panel';
 import WizardWrapper from './wizard';
 
@@ -169,6 +170,7 @@ export { ToggleWrapper };
 export { ToggleButtonWrapper };
 export { TokenGroupWrapper };
 export { TopNavigationWrapper };
+export { TreeViewWrapper };
 export { TutorialPanelWrapper };
 export { WizardWrapper };
 
@@ -1657,6 +1659,25 @@ findTopNavigation(selector?: string): TopNavigationWrapper | null;
  * @returns {Array<TopNavigationWrapper>}
  */
 findAllTopNavigations(selector?: string): Array<TopNavigationWrapper>;
+/**
+ * Returns the wrapper of the first TreeView that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first TreeView.
+ * If no matching TreeView is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TreeViewWrapper | null}
+ */
+findTreeView(selector?: string): TreeViewWrapper | null;
+
+/**
+ * Returns an array of TreeView wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the TreeViews inside the current wrapper.
+ * If no matching TreeView is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<TreeViewWrapper>}
+ */
+findAllTreeViews(selector?: string): Array<TreeViewWrapper>;
 /**
  * Returns the wrapper of the first TutorialPanel that matches the specified CSS selector.
  * If no CSS selector is specified, returns the wrapper of the first TutorialPanel.
@@ -2479,6 +2500,16 @@ ElementWrapper.prototype.findTopNavigation = function(selector) {
 ElementWrapper.prototype.findAllTopNavigations = function(selector) {
   return this.findAllComponents(TopNavigationWrapper, selector);
 };
+ElementWrapper.prototype.findTreeView = function(selector) {
+  const rootSelector = \`.\${TreeViewWrapper.rootSelector}\`;
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TreeViewWrapper);
+};
+
+ElementWrapper.prototype.findAllTreeViews = function(selector) {
+  return this.findAllComponents(TreeViewWrapper, selector);
+};
 ElementWrapper.prototype.findTutorialPanel = function(selector) {
   const rootSelector = \`.\${TutorialPanelWrapper.rootSelector}\`;
   // casting to 'any' is needed to avoid this issue with generics
@@ -2597,6 +2628,7 @@ import ToggleWrapper from './toggle';
 import ToggleButtonWrapper from './toggle-button';
 import TokenGroupWrapper from './token-group';
 import TopNavigationWrapper from './top-navigation';
+import TreeViewWrapper from './tree-view';
 import TutorialPanelWrapper from './tutorial-panel';
 import WizardWrapper from './wizard';
 
@@ -2679,6 +2711,7 @@ export { ToggleWrapper };
 export { ToggleButtonWrapper };
 export { TokenGroupWrapper };
 export { TopNavigationWrapper };
+export { TreeViewWrapper };
 export { TutorialPanelWrapper };
 export { WizardWrapper };
 
@@ -4011,6 +4044,23 @@ findTopNavigation(selector?: string): TopNavigationWrapper;
  * @returns {MultiElementWrapper<TopNavigationWrapper>}
  */
 findAllTopNavigations(selector?: string): MultiElementWrapper<TopNavigationWrapper>;
+/**
+ * Returns a wrapper that matches the TreeViews with the specified CSS selector.
+ * If no CSS selector is specified, returns a wrapper that matches TreeViews.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {TreeViewWrapper}
+ */
+findTreeView(selector?: string): TreeViewWrapper;
+
+/**
+ * Returns a multi-element wrapper that matches TreeViews with the specified CSS selector.
+ * If no CSS selector is specified, returns a multi-element wrapper that matches TreeViews.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {MultiElementWrapper<TreeViewWrapper>}
+ */
+findAllTreeViews(selector?: string): MultiElementWrapper<TreeViewWrapper>;
 /**
  * Returns a wrapper that matches the TutorialPanels with the specified CSS selector.
  * If no CSS selector is specified, returns a wrapper that matches TutorialPanels.
@@ -4829,6 +4879,16 @@ ElementWrapper.prototype.findTopNavigation = function(selector) {
 ElementWrapper.prototype.findAllTopNavigations = function(selector) {
   return this.findAllComponents(TopNavigationWrapper, selector);
 };
+ElementWrapper.prototype.findTreeView = function(selector) {
+  const rootSelector = \`.\${TreeViewWrapper.rootSelector}\`;
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TreeViewWrapper);
+};
+
+ElementWrapper.prototype.findAllTreeViews = function(selector) {
+  return this.findAllComponents(TreeViewWrapper, selector);
+};
 ElementWrapper.prototype.findTutorialPanel = function(selector) {
   const rootSelector = \`.\${TutorialPanelWrapper.rootSelector}\`;
   // casting to 'any' is needed to avoid this issue with generics
diff --git a/src/table/expandable-rows/expand-toggle-button.tsx b/src/internal/components/expand-toggle-button/index.tsx
similarity index 58%
rename from src/table/expandable-rows/expand-toggle-button.tsx
rename to src/internal/components/expand-toggle-button/index.tsx
index bed2c3c291..ed705e924a 100644
--- a/src/table/expandable-rows/expand-toggle-button.tsx
+++ b/src/internal/components/expand-toggle-button/index.tsx
@@ -4,8 +4,8 @@
 import React, { useRef } from 'react';
 import clsx from 'clsx';
 
-import InternalIcon from '../../icon/internal';
-import { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context';
+import InternalIcon from '../../../icon/internal';
+import { useSingleTabStopNavigation } from '../../../internal/context/single-tab-stop-navigation-context';
 
 import styles from './styles.css.js';
 
@@ -14,11 +14,15 @@ export function ExpandToggleButton({
   onExpandableItemToggle,
   expandButtonLabel,
   collapseButtonLabel,
+  customIcon,
+  hasLargeFocusOffset,
 }: {
   isExpanded?: boolean;
   onExpandableItemToggle?: () => void;
   expandButtonLabel?: string;
   collapseButtonLabel?: string;
+  customIcon?: React.ReactNode;
+  hasLargeFocusOffset?: boolean;
 }) {
   const buttonRef = useRef<HTMLButtonElement>(null);
   const { tabIndex } = useSingleTabStopNavigation(buttonRef);
@@ -29,14 +33,16 @@ export function ExpandToggleButton({
       tabIndex={tabIndex}
       aria-label={isExpanded ? collapseButtonLabel : expandButtonLabel}
       aria-expanded={isExpanded}
-      className={styles['expand-toggle']}
+      className={clsx(styles['expand-toggle'], hasLargeFocusOffset && styles['focus-offset-large'])}
       onClick={onExpandableItemToggle}
     >
-      <InternalIcon
-        size="small"
-        name="caret-down-filled"
-        className={clsx(styles['expand-toggle-icon'], isExpanded && styles['expand-toggle-icon-expanded'])}
-      />
+      {customIcon ?? (
+        <InternalIcon
+          size="small"
+          name="caret-down-filled"
+          className={clsx(styles['expand-toggle-icon'], isExpanded && styles['expand-toggle-icon-expanded'])}
+        />
+      )}
     </button>
   );
 }
diff --git a/src/table/expandable-rows/motion.scss b/src/internal/components/expand-toggle-button/motion.scss
similarity index 74%
rename from src/table/expandable-rows/motion.scss
rename to src/internal/components/expand-toggle-button/motion.scss
index 692206fb56..4d460c5850 100644
--- a/src/table/expandable-rows/motion.scss
+++ b/src/internal/components/expand-toggle-button/motion.scss
@@ -3,8 +3,8 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-@use '../../internal/styles' as styles;
-@use '../../internal/styles/tokens' as tokens;
+@use '../../../internal/styles' as styles;
+@use '../../../internal/styles/tokens' as tokens;
 
 .expand-toggle-icon {
   @include styles.with-motion {
diff --git a/src/table/expandable-rows/styles.scss b/src/internal/components/expand-toggle-button/styles.scss
similarity index 80%
rename from src/table/expandable-rows/styles.scss
rename to src/internal/components/expand-toggle-button/styles.scss
index d723555fa5..e67546dcee 100644
--- a/src/table/expandable-rows/styles.scss
+++ b/src/internal/components/expand-toggle-button/styles.scss
@@ -3,8 +3,8 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-@use '../../internal/styles/index' as styles;
-@use '../../internal/styles/tokens' as awsui;
+@use '../../../internal/styles/index' as styles;
+@use '../../../internal/styles/tokens' as awsui;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 @use './motion';
@@ -44,6 +44,12 @@
     @include styles.focus-highlight(awsui.$space-button-inline-icon-focus-outline-gutter);
   }
 
+  &.focus-offset-large {
+    @include focus-visible.when-visible {
+      @include styles.focus-highlight(awsui.$space-button-focus-outline-gutter);
+    }
+  }
+
   &:hover {
     color: awsui.$color-text-interactive-hover;
   }
diff --git a/src/internal/components/structured-item/__tests__/structured-item.test.tsx b/src/internal/components/structured-item/__tests__/structured-item.test.tsx
new file mode 100644
index 0000000000..c2eb1b1aac
--- /dev/null
+++ b/src/internal/components/structured-item/__tests__/structured-item.test.tsx
@@ -0,0 +1,13 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+// import React from 'react';
+// import { render } from '@testing-library/react';
+
+// import StructuredItem from '../../../lib/components/structured-item';
+// import createWrapper from '../../../lib/components/test-utils/dom';
+
+test('renders items', () => {
+  // const { container } = render(<StructuredItem items={[{ text: 'one' }, { text: 'two' }]} />);
+  // const wrapper = createWrapper(container).findStructuredItem()!;
+  // expect(wrapper.findAll('li')).toHaveLength(2);
+});
diff --git a/src/internal/components/structured-item/index.tsx b/src/internal/components/structured-item/index.tsx
new file mode 100644
index 0000000000..961cf525de
--- /dev/null
+++ b/src/internal/components/structured-item/index.tsx
@@ -0,0 +1,32 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+
+import { StructuredItemProps } from './interfaces';
+
+import styles from './styles.css.js';
+import testClasses from './test-classes/styles.css.js';
+
+export { StructuredItemProps };
+
+export default function InternalStructuredItem({
+  content,
+  icon,
+  actions,
+  secondaryContent,
+  disablePaddings,
+}: StructuredItemProps) {
+  return (
+    <div className={clsx(styles.root, testClasses.root, disablePaddings && styles['disable-paddings'])}>
+      {icon && <div className={clsx(styles.icon, testClasses.icon)}>{icon}</div>}
+      <div className={clsx(styles.main)}>
+        <div className={styles['content-wrap']}>
+          <div className={clsx(styles.content, testClasses.content)}>{content}</div>
+          {actions && <div className={clsx(styles.actions, testClasses.actions)}>{actions}</div>}
+        </div>
+        {secondaryContent && <div className={clsx(styles.secondary, testClasses.secondary)}>{secondaryContent}</div>}
+      </div>
+    </div>
+  );
+}
diff --git a/src/internal/components/structured-item/interfaces.ts b/src/internal/components/structured-item/interfaces.ts
new file mode 100644
index 0000000000..fec17a312d
--- /dev/null
+++ b/src/internal/components/structured-item/interfaces.ts
@@ -0,0 +1,12 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { ReactNode } from 'react';
+
+export interface StructuredItemProps {
+  content: ReactNode;
+  icon?: ReactNode;
+  actions?: ReactNode;
+  secondaryContent?: ReactNode;
+  disablePaddings?: boolean;
+}
diff --git a/src/internal/components/structured-item/styles.scss b/src/internal/components/structured-item/styles.scss
new file mode 100644
index 0000000000..b6ef758d3c
--- /dev/null
+++ b/src/internal/components/structured-item/styles.scss
@@ -0,0 +1,47 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+@use '../../styles' as styles;
+@use '../../styles/tokens' as awsui;
+
+.root {
+  @include styles.styles-reset;
+  @include styles.text-wrapping;
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  align-items: baseline;
+  column-gap: awsui.$space-xs;
+  &.disable-paddings {
+    column-gap: 0;
+  }
+}
+
+.main {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.content-wrap {
+  flex-grow: 1;
+  display: flex;
+  align-items: baseline;
+  flex-direction: row;
+  flex-wrap: wrap;
+  column-gap: awsui.$space-xs;
+
+  .disable-paddings > .main > & {
+    column-gap: 0;
+  }
+}
+
+.content {
+  flex-grow: 1;
+}
+
+.actions {
+  flex-shrink: 0;
+  margin-inline-start: auto;
+}
diff --git a/src/internal/components/structured-item/test-classes/styles.scss b/src/internal/components/structured-item/test-classes/styles.scss
new file mode 100644
index 0000000000..e72f938351
--- /dev/null
+++ b/src/internal/components/structured-item/test-classes/styles.scss
@@ -0,0 +1,12 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.root,
+.content,
+.icon,
+.actions,
+.secondary {
+  /* used in test-utils */
+}
diff --git a/src/internal/styles/utils/styles-reset.scss b/src/internal/styles/utils/styles-reset.scss
index 86f1c19cdf..77040e56b9 100644
--- a/src/internal/styles/utils/styles-reset.scss
+++ b/src/internal/styles/utils/styles-reset.scss
@@ -37,3 +37,11 @@
   margin-inline-start: 0;
   margin-inline-end: 0;
 }
+
+@mixin styles-reset-ul {
+  margin-block: 0;
+  margin-inline: 0;
+
+  padding-block: 0;
+  padding-inline: 0;
+}
diff --git a/src/table/body-cell/td-element.tsx b/src/table/body-cell/td-element.tsx
index 6232e43ede..4dfbd4a10c 100644
--- a/src/table/body-cell/td-element.tsx
+++ b/src/table/body-cell/td-element.tsx
@@ -6,10 +6,10 @@ import clsx from 'clsx';
 import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
 import { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 
+import { ExpandToggleButton } from '../../internal/components/expand-toggle-button';
 import { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context';
 import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
 import { ColumnWidthStyle } from '../column-widths-utils';
-import { ExpandToggleButton } from '../expandable-rows/expand-toggle-button';
 import { TableProps } from '../interfaces.js';
 import { StickyColumnsModel, useStickyCellStyles } from '../sticky-columns';
 import { getTableCellRoleProps, TableRole } from '../table-role';
diff --git a/src/test-utils/dom/table/index.ts b/src/test-utils/dom/table/index.ts
index 7c7508aaaa..941c386ac2 100644
--- a/src/test-utils/dom/table/index.ts
+++ b/src/test-utils/dom/table/index.ts
@@ -8,8 +8,8 @@ import PaginationWrapper from '../pagination';
 import PropertyFilterWrapper from '../property-filter';
 import TextFilterWrapper from '../text-filter';
 
+import expandToggleStyles from '../../../internal/components/expand-toggle-button/styles.selectors.js';
 import bodyCellStyles from '../../../table/body-cell/styles.selectors.js';
-import expandableRowsStyles from '../../../table/expandable-rows/styles.selectors.js';
 import headerCellStyles from '../../../table/header-cell/styles.selectors.js';
 import progressiveLoadingStyles from '../../../table/progressive-loading/styles.selectors.js';
 import resizerStyles from '../../../table/resizer/styles.selectors.js';
@@ -177,7 +177,7 @@ export default class TableWrapper extends ComponentWrapper {
    * @param rowIndex 1-based index of the row.
    */
   findExpandToggle(rowIndex: number): ElementWrapper | null {
-    return this.findNativeTable().find(`tbody tr:nth-child(${rowIndex}) .${expandableRowsStyles['expand-toggle']}`);
+    return this.findNativeTable().find(`tbody tr:nth-child(${rowIndex}) .${expandToggleStyles['expand-toggle']}`);
   }
 
   /**
diff --git a/src/test-utils/dom/tree-view/index.ts b/src/test-utils/dom/tree-view/index.ts
new file mode 100644
index 0000000000..87e23c223c
--- /dev/null
+++ b/src/test-utils/dom/tree-view/index.ts
@@ -0,0 +1,106 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { ComponentWrapper, ElementWrapper } from '@cloudscape-design/test-utils-core/dom';
+
+import expandToggleStyles from '../../../internal/components/expand-toggle-button/styles.selectors.js';
+import structuredItemTestUtilStyles from '../../../internal/components/structured-item/test-classes/styles.selectors.js';
+import testUtilStyles from '../../../tree-view/test-classes/styles.selectors.js';
+
+class TreeViewItemWrapper extends ComponentWrapper {
+  /**
+   * Finds the content slot of the tree view item.
+   */
+  findContent(): ElementWrapper | null {
+    return this.findByClassName(structuredItemTestUtilStyles.content);
+  }
+
+  /**
+   * Finds the icon slot of the tree view item.
+   */
+  findIcon(): ElementWrapper | null {
+    return this.findByClassName(structuredItemTestUtilStyles.icon);
+  }
+
+  /**
+   * Finds the secondary content slot of the tree view item.
+   */
+  findSecondaryContent(): ElementWrapper | null {
+    return this.findByClassName(structuredItemTestUtilStyles.secondary);
+  }
+
+  /**
+   * Finds the actions slot of the tree view item.
+   */
+  findActions(): ElementWrapper | null {
+    return this.findByClassName(structuredItemTestUtilStyles.actions);
+  }
+
+  /**
+   * Finds the expand toggle of the tree view item.
+   */
+  findItemToggle(): ElementWrapper | null {
+    return this.findByClassName(expandToggleStyles['expand-toggle']);
+  }
+
+  /**
+   * Finds all visible child items of the tree view item.
+   * @param options
+   * * expanded (optional, boolean) - Use it to find all visible expanded or collapsed child items.
+   */
+  findChildItems(options: { expanded?: boolean } = {}): Array<TreeViewItemWrapper> {
+    const selector = getTreeItemSelector(options);
+
+    return this.findAll(selector).map(item => new TreeViewItemWrapper(item.getElement()));
+  }
+
+  /**
+   * Finds a visible child item by its ID.
+   * @param id of the item to find
+   * @param options
+   * * expanded (optional, boolean) - Use it to find the visible expanded or collapsed child item.
+   */
+  findChildItemById(id: string, options: { expanded?: boolean } = {}): TreeViewItemWrapper | null {
+    const selector = `${getTreeItemSelector(options)}[data-testid="awsui-treeitem-${id}"]`;
+    const item = this.find(selector);
+    return item ? new TreeViewItemWrapper(item.getElement()) : null;
+  }
+}
+
+export default class TreeViewWrapper extends ComponentWrapper {
+  static rootSelector: string = testUtilStyles.root;
+
+  /**
+   * Finds all visible tree view items.
+   * @param options
+   * * expanded (optional, boolean) - Use it to find all visible expanded or collapsed items.
+   */
+  findItems(options: { expanded?: boolean } = {}): Array<TreeViewItemWrapper> {
+    const selector = getTreeItemSelector(options);
+
+    return this.findAll(selector).map(item => new TreeViewItemWrapper(item.getElement()));
+  }
+
+  /**
+   * Finds a visible tree view item by its ID.
+   * @param id of the item to find
+   * @param options
+   * * expanded (optiona, boolean) - Use it to find the visible expanded or collapsed item.
+   */
+  findItemById(id: string, options: { expanded?: boolean } = {}): TreeViewItemWrapper | null {
+    const selector = `${getTreeItemSelector(options)}[data-testid="awsui-treeitem-${id}"]`;
+    const item = this.find(selector);
+    return item ? new TreeViewItemWrapper(item.getElement()) : null;
+  }
+}
+
+function getTreeItemSelector({ expanded }: { expanded?: boolean }): string {
+  let selector = `.${testUtilStyles.treeitem}`;
+
+  if (expanded === true) {
+    selector += `.${testUtilStyles.expanded}`;
+  } else if (expanded === false) {
+    selector += `.${testUtilStyles.expandable}:not(.${testUtilStyles.expanded})`;
+  }
+
+  return selector;
+}
diff --git a/src/tree-view/__integ__/tree-view.test.ts b/src/tree-view/__integ__/tree-view.test.ts
new file mode 100644
index 0000000000..e10049d0b3
--- /dev/null
+++ b/src/tree-view/__integ__/tree-view.test.ts
@@ -0,0 +1,47 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
+import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
+import { createWrapper } from '@cloudscape-design/test-utils-core/selectors';
+
+import '../../../lib/components/test-utils/selectors';
+
+const wrapper = createWrapper().findTreeView();
+
+test(
+  'Expands and collapses item',
+  useBrowser(async browser => {
+    await browser.url('#/light/tree-view/basic');
+    const page = new BasePageObject(browser);
+
+    const itemsSelector = wrapper.findItems().toSelector();
+    await expect(await browser.$$(itemsSelector)).toHaveLength(10);
+
+    const expandedItemsSelector = wrapper.findItems({ expanded: true }).toSelector();
+    await expect(await browser.$$(expandedItemsSelector)).toHaveLength(1); // The test page expands "Item 1" by default
+
+    const collapsedItemsSelector = wrapper.findItems({ expanded: false }).toSelector();
+    await expect(await browser.$$(collapsedItemsSelector)).toHaveLength(5); // non-expandable items are not included
+
+    // expand
+    const expandableItem = wrapper.findItemById('4')!;
+
+    await page.click(expandableItem.findItemToggle().toSelector());
+
+    await expect(await browser.$$(expandableItem.findChildItems().toSelector())).toHaveLength(3);
+    await expect(await browser.$$(expandableItem.findChildItems({ expanded: false }).toSelector())).toHaveLength(1);
+    await expect(await browser.$$(itemsSelector)).toHaveLength(13);
+    await expect(await browser.$$(expandedItemsSelector)).toHaveLength(2);
+    await expect(await browser.$$(collapsedItemsSelector)).toHaveLength(5); // one item expanded, it has one collapsed child item so the number doesn't change
+
+    // collapse
+    const collapsibleItem = wrapper.findItemById('4', { expanded: true })!;
+
+    await page.click(collapsibleItem.findItemToggle().toSelector());
+
+    await expect(await browser.$$(expandableItem.findChildItems().toSelector())).toHaveLength(0);
+    await expect(await browser.$$(itemsSelector)).toHaveLength(10); // 1 expanded, 5 collapsed, rest are not expandable
+    await expect(await browser.$$(expandedItemsSelector)).toHaveLength(1);
+    await expect(await browser.$$(collapsedItemsSelector)).toHaveLength(5);
+  })
+);
diff --git a/src/tree-view/__tests__/a11y.test.tsx b/src/tree-view/__tests__/a11y.test.tsx
new file mode 100644
index 0000000000..64888a7359
--- /dev/null
+++ b/src/tree-view/__tests__/a11y.test.tsx
@@ -0,0 +1,94 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import TestI18nProvider from '../../../lib/components/i18n/testing';
+import createWrapper from '../../../lib/components/test-utils/dom';
+import TreeView, { TreeViewProps } from '../../../lib/components/tree-view';
+import { defaultProps, Item } from './common';
+
+import styles from '../../../lib/components/tree-view/styles.css.js';
+
+function renderTreeView(props: Partial<TreeViewProps<Item>> = {}) {
+  const { container } = render(<TreeView {...defaultProps} {...props} />);
+  const wrapper = createWrapper(container).findTreeView()!;
+  return { wrapper };
+}
+
+function renderTreeViewWithI18NProvider(props: Partial<TreeViewProps<Item>> = {}) {
+  const { container } = render(
+    <TestI18nProvider
+      messages={{
+        'tree-view': {
+          'i18nStrings.expandButtonLabel': 'Expand item',
+          'i18nStrings.collapseButtonLabel': 'Collapse item',
+        },
+      }}
+    >
+      <TreeView {...defaultProps} {...props} />
+    </TestI18nProvider>
+  );
+  const wrapper = createWrapper(container).findTreeView()!;
+  return { wrapper };
+}
+
+test('sets aria-label', () => {
+  const ariaLabel = 'This is the aria label for this tree view';
+  const { wrapper } = renderTreeView({ ariaLabel });
+
+  expect(wrapper.findByClassName(styles.tree)!.getElement().getAttribute('aria-label')).toEqual(ariaLabel);
+});
+
+test('sets aria-expanded on expandable items', () => {
+  const { wrapper } = renderTreeView();
+
+  expect(wrapper.findItemById('1')!.getElement().getAttribute('aria-expanded')).toEqual('false');
+  wrapper.findItemById('1')!.findItemToggle()!.getElement().click();
+  expect(wrapper.findItemById('1')!.getElement().getAttribute('aria-expanded')).toEqual('true');
+
+  expect(wrapper.findItemById('2')!.getElement().getAttribute('aria-expanded')).toBeNull();
+});
+
+test('i18n provider adds label to expand/collapse toggle', () => {
+  const { wrapper } = renderTreeViewWithI18NProvider();
+
+  const collapsedItem = wrapper.findItemById('1', { expanded: false })!;
+  expect(collapsedItem.findItemToggle()!.getElement()).toHaveAccessibleName('Expand item');
+
+  collapsedItem.findItemToggle()!.getElement().click();
+  const expandedItem = wrapper.findItemById('1', { expanded: true })!;
+  expect(expandedItem.findItemToggle()!.getElement()).toHaveAccessibleName('Collapse item');
+});
+
+test('i18nStrings adds custom label to expand/collapse toggle', () => {
+  const { wrapper } = renderTreeViewWithI18NProvider({
+    i18nStrings: {
+      expandButtonLabel: item => `Expand ${item.title}`,
+      collapseButtonLabel: item => `Collapse ${item.title}`,
+    },
+  });
+
+  const collapsedItem = wrapper.findItemById('1', { expanded: false })!;
+  expect(collapsedItem.findItemToggle()!.getElement()).toHaveAccessibleName('Expand Item 1');
+
+  collapsedItem.findItemToggle()!.getElement().click();
+  const expandedItem = wrapper.findItemById('1', { expanded: true })!;
+  expect(expandedItem.findItemToggle()!.getElement()).toHaveAccessibleName('Collapse Item 1');
+});
+
+test('correct aria-level is set', () => {
+  const { wrapper } = renderTreeView();
+
+  const rootLevelItem = wrapper.findItemById('1')!;
+  rootLevelItem.findItemToggle()!.getElement().click();
+
+  const level2Item = wrapper.findItemById('1.2')!;
+  level2Item.findItemToggle()!.getElement().click();
+
+  const level3Item = wrapper.findItemById('1.2.1')!;
+
+  expect(rootLevelItem.getElement().getAttribute('aria-level')).toEqual('1');
+  expect(level2Item.getElement().getAttribute('aria-level')).toEqual('2');
+  expect(level3Item.getElement().getAttribute('aria-level')).toEqual('3');
+});
diff --git a/src/tree-view/__tests__/common.ts b/src/tree-view/__tests__/common.ts
new file mode 100644
index 0000000000..86408845ff
--- /dev/null
+++ b/src/tree-view/__tests__/common.ts
@@ -0,0 +1,45 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { TreeViewProps } from '../../../lib/components/tree-view';
+
+export interface Item {
+  id: string;
+  title: string;
+  items?: Item[];
+}
+
+export const items: Item[] = [
+  {
+    id: '1',
+    title: 'Item 1',
+    items: [
+      {
+        id: '1.1',
+        title: 'Item 1.1',
+      },
+      {
+        id: '1.2',
+        title: 'Item 1.2',
+        items: [
+          {
+            id: '1.2.1',
+            title: 'Item 1.2.1',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: '2',
+    title: 'Item 2',
+  },
+];
+
+export const defaultProps: TreeViewProps<Item> = {
+  items: items,
+  getItemId: item => item.id,
+  getItemChildren: item => item.items,
+  renderItem: item => ({
+    content: item.title,
+  }),
+};
diff --git a/src/tree-view/__tests__/tree-item.test.tsx b/src/tree-view/__tests__/tree-item.test.tsx
new file mode 100644
index 0000000000..200b3f0208
--- /dev/null
+++ b/src/tree-view/__tests__/tree-item.test.tsx
@@ -0,0 +1,74 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import * as React from 'react';
+import { render } from '@testing-library/react';
+
+import createWrapper from '../../../lib/components/test-utils/dom';
+import TreeView, { TreeViewProps } from '../../../lib/components/tree-view';
+import { defaultProps, Item, items } from './common';
+
+function renderTreeView(props: Partial<TreeViewProps<Item>> = {}) {
+  const { container } = render(<TreeView {...defaultProps} {...props} />);
+  const wrapper = createWrapper(container).findTreeView()!;
+  return { wrapper };
+}
+
+test('expand toggle is only added to expandable items', () => {
+  const { wrapper } = renderTreeView();
+
+  const expandableItem = wrapper.findItemById('1')!;
+  const nonExpandableItem = wrapper.findItemById('2')!;
+
+  expect(expandableItem.findItemToggle()!.getElement()).toBeVisible();
+  expect(nonExpandableItem.findItemToggle()).toBeNull();
+});
+
+test('onItemToggle is fired when toggle is clicked', () => {
+  const onItemToggle = jest.fn();
+  const { wrapper } = renderTreeView({ onItemToggle });
+
+  const itemToggle = wrapper.findItemById('1')!.findItemToggle()!.getElement();
+
+  // expand
+  itemToggle.click();
+  expect(onItemToggle).toHaveBeenCalledTimes(1);
+  expect(onItemToggle).toHaveBeenCalledWith(
+    expect.objectContaining({ detail: { id: items[0].id, item: items[0], expanded: true } })
+  );
+
+  // collapse
+  itemToggle.click();
+  expect(onItemToggle).toHaveBeenCalledTimes(2);
+  expect(onItemToggle).toHaveBeenCalledWith(
+    expect.objectContaining({ detail: { id: items[0].id, item: items[0], expanded: false } })
+  );
+});
+
+test('children items are rendered only when item is expanded', () => {
+  const { wrapper } = renderTreeView();
+
+  const expandableItem = wrapper.findItemById('1')!;
+  expect(expandableItem.findChildItemById('1.1')).toBeNull();
+
+  // expand
+  expandableItem.findItemToggle()!.getElement().click();
+  expect(expandableItem.findChildItems().length).toBe(2);
+  expect(wrapper.findItemById('1', { expanded: true })!.getElement()).toBeVisible();
+  expect(expandableItem.findChildItemById('1.1')!.getElement()).toBeVisible();
+
+  // collapse
+  expandableItem.findItemToggle()!.getElement().click();
+  expect(expandableItem.findChildItems().length).toBe(0);
+  expect(wrapper.findItemById('1', { expanded: false })!.getElement()).toBeVisible();
+  expect(expandableItem.findChildItemById('1.1')).toBeNull();
+});
+
+test("expanding an item shouldn't expand its child item", () => {
+  const { wrapper } = renderTreeView();
+
+  const expandableItem = wrapper.findItemById('1')!;
+
+  expandableItem.findItemToggle()!.getElement().click();
+  expect(expandableItem.findChildItemById('1.2', { expanded: false })!.getElement()).toBeVisible();
+  expect(expandableItem.findChildItemById('1.2.1')).toBeNull();
+});
diff --git a/src/tree-view/__tests__/tree-view.test.tsx b/src/tree-view/__tests__/tree-view.test.tsx
new file mode 100644
index 0000000000..7677823a22
--- /dev/null
+++ b/src/tree-view/__tests__/tree-view.test.tsx
@@ -0,0 +1,203 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import * as React from 'react';
+import { render } from '@testing-library/react';
+
+import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
+
+import ButtonDropdown from '../../../lib/components/button-dropdown';
+import Icon from '../../../lib/components/icon';
+import Link from '../../../lib/components/link';
+import Popover from '../../../lib/components/popover';
+import createWrapper from '../../../lib/components/test-utils/dom';
+import TreeView, { TreeViewProps } from '../../../lib/components/tree-view';
+
+jest.mock('@cloudscape-design/component-toolkit/internal', () => ({
+  ...jest.requireActual('@cloudscape-design/component-toolkit/internal'),
+  warnOnce: jest.fn(),
+}));
+
+afterEach(() => {
+  (warnOnce as jest.Mock).mockReset();
+});
+
+interface Item {
+  id: string;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  hasActions?: boolean;
+  items?: Item[];
+}
+
+const defaultActions = (
+  <ButtonDropdown
+    items={[
+      { id: 'start', text: 'Start' },
+      { id: 'stop', text: 'Stop', disabled: true },
+      { id: 'terminate', text: 'Terminate' },
+    ]}
+    ariaLabel="Control instance"
+    variant="icon"
+  />
+);
+
+const defaultData: Item[] = [
+  {
+    id: '1',
+    title: 'Item 1',
+    description: 'Description 1',
+    hasActions: true,
+    items: [
+      {
+        id: '1.1',
+        title: 'Item 1.1',
+        description: 'Description 1.1',
+        hasActions: true,
+      },
+      {
+        id: '1.2',
+        title: 'Item 1.2',
+        description: 'Description 1.2',
+        items: [
+          {
+            id: '1.2.1',
+            title: 'Item 1.2.1',
+            description: 'Description 1.2.1',
+            hasActions: true,
+          },
+        ],
+      },
+      {
+        id: '1.3',
+        title: 'Item 1.3',
+        description: 'Description 1.3',
+        items: [
+          {
+            id: '1.3.1',
+            title: 'Item 1.3.1',
+            description: 'Description 1.3.1',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: '2',
+    title: (
+      <Popover content="This is a popover" dismissButton={false}>
+        Item 2
+      </Popover>
+    ),
+    hasActions: true,
+    description: <Link href="#">Link in description</Link>,
+  },
+  {
+    id: '3',
+    title: 'Item 3',
+    description: 'Description 3',
+  },
+];
+
+const defaultProps: TreeViewProps<Item> = {
+  items: defaultData,
+  getItemId: item => item.id,
+  getItemChildren: item => item.items,
+  renderItem: item => ({
+    icon: <Icon name="folder" />,
+    content: item.title,
+    secondaryContent: item.description,
+    actions: item.hasActions ? defaultActions : undefined,
+    children: item.items,
+  }),
+};
+
+function renderTreeView(props: Partial<TreeViewProps<Item>> = {}) {
+  const { container, rerender } = render(<TreeView {...defaultProps} {...props} />);
+  const wrapper = createWrapper(container).findTreeView()!;
+  return { wrapper, rerender };
+}
+
+test('should render with only content', () => {
+  const { wrapper } = renderTreeView({ renderItem: item => ({ content: item.title }) });
+
+  const items = wrapper.findItems();
+  expect(items).toHaveLength(3);
+
+  items.forEach((item, index) => {
+    expect(item.findContent()?.getElement()).toHaveTextContent(`Item ${index + 1}`);
+    expect(item.findIcon()).toBeNull();
+    expect(item.findSecondaryContent()).toBeNull();
+    expect(item.findActions()).toBeNull();
+  });
+});
+
+test('should render with various slots', () => {
+  const { wrapper } = renderTreeView();
+
+  const items = wrapper.findItems();
+  expect(items).toHaveLength(3);
+
+  defaultData.forEach((data, index) => {
+    const item = items[index];
+
+    expect(item.findContent()!.getElement()).toHaveTextContent(`Item ${index + 1}`);
+    expect(item.findIcon()!.getElement()).toBeVisible();
+    if (data.description) {
+      expect(item.findSecondaryContent()!.getElement()).toBeVisible();
+
+      if (index !== 1) {
+        // index 1 (item 2)'s description is a link
+        expect(item.findSecondaryContent()!.getElement()).toHaveTextContent(`Description ${index + 1}`);
+      }
+    }
+    if (data.hasActions) {
+      expect(item.findActions()!.findButtonDropdown()!.getElement()).toBeVisible();
+    }
+  });
+});
+
+test('should render with other components inside', () => {
+  const { wrapper } = renderTreeView();
+
+  const item = wrapper.findItemById('2')!;
+
+  const contentPopover = item.findContent()!.findPopover()!;
+  const descriptionLink = item.findSecondaryContent()!.findLink()!;
+  const actionsButtonDropdown = item.findActions()!.findButtonDropdown()!;
+
+  expect(contentPopover.getElement()).toBeVisible();
+  expect(descriptionLink.getElement()).toBeVisible();
+  expect(actionsButtonDropdown.getElement()).toBeVisible();
+
+  contentPopover.findTrigger().click();
+  expect(contentPopover.findContent()?.getElement()).toHaveTextContent('This is a popover');
+
+  actionsButtonDropdown.findNativeButton().click();
+  expect(actionsButtonDropdown.findItems()).toHaveLength(3);
+});
+
+test('expand/collapse state should be controlled by expandedItems', () => {
+  const expandedItems = ['1', '1.2'];
+  const { wrapper, rerender } = renderTreeView({
+    expandedItems,
+    onItemToggle: () => {},
+  });
+  expect(wrapper.findItems({ expanded: true })).toHaveLength(2);
+
+  rerender(<TreeView {...defaultProps} expandedItems={[...expandedItems, '1.3']} />);
+  expect(wrapper.findItems({ expanded: true })).toHaveLength(3);
+
+  rerender(<TreeView {...defaultProps} expandedItems={['1']} />);
+  expect(wrapper.findItems({ expanded: true })).toHaveLength(1);
+});
+
+test('should warn when expandedItems is provided without onItemToggle', () => {
+  renderTreeView({
+    expandedItems: [],
+  });
+
+  expect(warnOnce).toHaveBeenCalledWith(
+    'TreeView',
+    'You provided a `expandedItems` prop without an `onItemToggle` handler. This will render a non-interactive component.'
+  );
+});
diff --git a/src/tree-view/index.tsx b/src/tree-view/index.tsx
new file mode 100644
index 0000000000..b6c27b48b4
--- /dev/null
+++ b/src/tree-view/index.tsx
@@ -0,0 +1,23 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import { getBaseProps } from '../internal/base-component';
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import { getExternalProps } from '../internal/utils/external-props';
+import { TreeViewProps } from './interfaces';
+import InternalTreeView from './internal';
+
+export { TreeViewProps };
+
+const TreeView = <T,>({ items, ...rest }: TreeViewProps<T>) => {
+  const baseProps = getBaseProps(rest);
+  const baseComponentProps = useBaseComponent('TreeView');
+  const externalProps = getExternalProps(rest);
+
+  return <InternalTreeView {...baseProps} {...baseComponentProps} {...externalProps} items={items} {...rest} />;
+};
+
+applyDisplayName(TreeView, 'TreeView');
+export default TreeView;
diff --git a/src/tree-view/interfaces.ts b/src/tree-view/interfaces.ts
new file mode 100644
index 0000000000..ab7a665719
--- /dev/null
+++ b/src/tree-view/interfaces.ts
@@ -0,0 +1,95 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import { BaseComponentProps } from '../internal/base-component';
+import { NonCancelableEventHandler } from '../internal/events';
+
+export interface TreeViewProps<T = any> extends BaseComponentProps {
+  /**
+   * Specifies the items to display in the tree view.
+   */
+  items: ReadonlyArray<T>;
+
+  /**
+   * Use this property to map your data to tree view items. This property must return an object with the following properties:
+   * * `content` (ReactNode) - The content of the item.
+   * * `icon` (optional, ReactNode) - The leading icon of the item.
+   * * `secondaryContent` (optional, ReactNode) - Secondary content of the item, displayed below `content`.
+   * * `actions` (optional, ReactNode) - Actions related to the item. Use [button](/components/button/?tabId=playground&example=inline-icon-button) with inline-icon or inline-link variants. For items with multiple actions, use [button dropdown](/components/button-dropdown/?tabId=playground&example=inline-icon-button-dropdown) with the inline-icon variant.
+   */
+  renderItem: (item: T, index: number) => TreeViewProps.TreeItem;
+
+  /**
+   * Provides a unique identifier for each tree view item.
+   */
+  getItemId: (item: T, index: number) => string;
+
+  /**
+   * Specifies the nested items that are displayed when a tree view item gets expanded.
+   */
+  getItemChildren: (item: T, index: number) => ReadonlyArray<T> | undefined;
+
+  /**
+   * Provides the IDs of the expanded tree view items. It controls whether an item is expanded or collapsed.
+   */
+  expandedItems?: ReadonlyArray<string>;
+
+  /**
+   * Provides an `aria-label` to the tree view that screen readers can read (for accessibility).
+   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.
+   */
+  ariaLabel?: string;
+
+  /**
+   * Sets the `aria-labelledby` property on the tree view.
+   * If there's a visible label element that you can reference, use this instead of `ariaLabel`.
+   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.
+   */
+  ariaLabelledby?: string;
+
+  /**
+   * Sets the `aria-describedby` property on the tree view.
+   */
+  ariaDescribedby?: string;
+
+  /**
+   * Called when an item expands or collapses.
+   */
+  onItemToggle?: NonCancelableEventHandler<TreeViewProps.ItemToggleDetail<T>>;
+
+  /**
+   * An object containing all the necessary localized strings required by the component.
+   * @i18n
+   */
+  i18nStrings?: TreeViewProps.I18nStrings<T>;
+
+  /**
+   * Use this property to display a custom icon in the toggle button.
+   */
+  renderItemToggleIcon?: ({ expanded }: TreeViewProps.ItemToggleRenderIconData) => React.ReactNode;
+}
+
+export namespace TreeViewProps {
+  export interface TreeItem {
+    content: React.ReactNode;
+    icon?: React.ReactNode;
+    secondaryContent?: React.ReactNode;
+    actions?: React.ReactNode;
+  }
+
+  export interface ItemToggleDetail<T> {
+    id: string;
+    item: T;
+    expanded: boolean;
+  }
+
+  export interface ItemToggleRenderIconData {
+    expanded: boolean;
+  }
+
+  export interface I18nStrings<T> {
+    collapseButtonLabel?: (item: T) => string;
+    expandButtonLabel?: (item: T) => string;
+  }
+}
diff --git a/src/tree-view/internal.tsx b/src/tree-view/internal.tsx
new file mode 100644
index 0000000000..120f779420
--- /dev/null
+++ b/src/tree-view/internal.tsx
@@ -0,0 +1,81 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+
+import { getBaseProps } from '../internal/base-component';
+import { fireNonCancelableEvent } from '../internal/events';
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+import { useControllable } from '../internal/hooks/use-controllable';
+import { TreeViewProps } from './interfaces';
+import InternalTreeItem from './tree-item';
+
+import styles from './styles.css.js';
+import testUtilStyles from './test-classes/styles.css.js';
+
+type InternalTreeViewProps<T> = TreeViewProps<T> & InternalBaseComponentProps;
+
+const InternalTreeView = <T,>({
+  expandedItems: controlledExpandedItems,
+  items,
+  renderItem,
+  getItemId,
+  getItemChildren,
+  onItemToggle,
+  renderItemToggleIcon,
+  ariaLabel,
+  ariaLabelledby,
+  ariaDescribedby,
+  i18nStrings,
+  __internalRootRef,
+  ...rest
+}: InternalTreeViewProps<T>) => {
+  const baseProps = getBaseProps(rest);
+
+  const [expandedItems, setExpandedItems] = useControllable(controlledExpandedItems, onItemToggle, [], {
+    componentName: 'TreeView',
+    controlledProp: 'expandedItems',
+    changeHandler: 'onItemToggle',
+  });
+
+  const onToggle = ({ id, item, expanded }: TreeViewProps.ItemToggleDetail<T>) => {
+    if (expanded) {
+      setExpandedItems([...(expandedItems || []), id]);
+    } else {
+      setExpandedItems((expandedItems || []).filter(expandedId => expandedId !== id));
+    }
+    fireNonCancelableEvent(onItemToggle, { id, item, expanded });
+  };
+
+  return (
+    <div {...baseProps} ref={__internalRootRef} className={clsx(baseProps.className, styles.root, testUtilStyles.root)}>
+      {/* Role `tree` isn't used in the initial release per discussion with A11Y team. It requires focus management to be implemented so they will be added as a follow up together. */}
+      <ul
+        className={clsx(styles.tree, testUtilStyles.tree)}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledby}
+        aria-describedby={ariaDescribedby}
+      >
+        {items.map((item, index) => {
+          return (
+            <InternalTreeItem
+              key={index}
+              item={item}
+              level={1}
+              index={index}
+              expandedItems={expandedItems}
+              i18nStrings={i18nStrings}
+              onItemToggle={onToggle}
+              renderItem={renderItem}
+              getItemId={getItemId}
+              getItemChildren={getItemChildren}
+              renderItemToggleIcon={renderItemToggleIcon}
+            />
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+export default InternalTreeView;
diff --git a/src/tree-view/styles.scss b/src/tree-view/styles.scss
new file mode 100644
index 0000000000..04e55e9a9b
--- /dev/null
+++ b/src/tree-view/styles.scss
@@ -0,0 +1,18 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+@use '../internal/styles/tokens' as awsui;
+@use '../internal/styles' as styles;
+
+.root {
+  @include styles.styles-reset;
+
+  font-family: awsui.$font-family-base;
+  font-size: awsui.$font-size-body-m;
+  line-height: awsui.$line-height-heading-m;
+}
+
+.tree {
+  @include styles.styles-reset-ul;
+}
diff --git a/src/tree-view/test-classes/styles.scss b/src/tree-view/test-classes/styles.scss
new file mode 100644
index 0000000000..0f66d2c9d9
--- /dev/null
+++ b/src/tree-view/test-classes/styles.scss
@@ -0,0 +1,11 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.root,
+.tree,
+.treeitem,
+.expandable,
+.expanded {
+  /* used in test-utils */
+}
diff --git a/src/tree-view/tree-item/index.tsx b/src/tree-view/tree-item/index.tsx
new file mode 100644
index 0000000000..c8998782dd
--- /dev/null
+++ b/src/tree-view/tree-item/index.tsx
@@ -0,0 +1,109 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+
+import { useInternalI18n } from '../../i18n/context';
+import { ExpandToggleButton } from '../../internal/components/expand-toggle-button';
+import InternalStructuredItem from '../../internal/components/structured-item';
+import { TreeViewProps } from '../interfaces';
+
+import testUtilStyles from '../test-classes/styles.css.js';
+import styles from './styles.css.js';
+
+interface InternalTreeItemProps<T>
+  extends Pick<
+    TreeViewProps,
+    'expandedItems' | 'renderItem' | 'getItemId' | 'getItemChildren' | 'renderItemToggleIcon' | 'i18nStrings'
+  > {
+  item: T;
+  index: number;
+  level: number;
+  onItemToggle: (detail: TreeViewProps.ItemToggleDetail<T>) => void;
+}
+
+const InternalTreeItem = <T,>({
+  item,
+  index,
+  level,
+  i18nStrings,
+  expandedItems = [],
+  renderItemToggleIcon,
+  renderItem,
+  getItemId,
+  getItemChildren,
+  onItemToggle,
+}: InternalTreeItemProps<T>) => {
+  const i18n = useInternalI18n('tree-view');
+
+  const { icon, content, secondaryContent, actions } = renderItem(item, index);
+  const id = getItemId(item, index);
+  const children = getItemChildren(item, index) || [];
+  const isExpandable = children.length > 0;
+  const isExpanded = isExpandable && expandedItems.includes(id);
+  const nextLevel = level + 1;
+
+  let customIcon = null;
+  if (isExpandable && renderItemToggleIcon) {
+    customIcon = renderItemToggleIcon({ expanded: isExpanded });
+  }
+
+  //  Role `treeitem` isn't used in the initial release per discussion with A11Y team. It requires focus management to be implemented so they will be added as a follow up together.
+  return (
+    <li
+      id={id}
+      className={clsx(
+        styles.treeitem,
+        testUtilStyles.treeitem,
+        isExpandable && [testUtilStyles.expandable],
+        isExpanded && [testUtilStyles.expanded]
+      )}
+      aria-expanded={isExpandable ? isExpanded : undefined}
+      aria-level={level}
+      data-testid={`awsui-treeitem-${id}`}
+    >
+      <div className={styles['expand-toggle-wrapper']}>
+        {isExpandable && (
+          <div className={styles.toggle}>
+            <ExpandToggleButton
+              isExpanded={isExpanded}
+              customIcon={customIcon}
+              hasLargeFocusOffset={true}
+              expandButtonLabel={i18n('i18nStrings.expandButtonLabel', i18nStrings?.expandButtonLabel?.(item))}
+              collapseButtonLabel={i18n('i18nStrings.collapseButtonLabel', i18nStrings?.collapseButtonLabel?.(item))}
+              onExpandableItemToggle={() => onItemToggle({ id, item, expanded: !isExpanded })}
+            />
+          </div>
+        )}
+      </div>
+
+      <div className={styles['structured-item-wrapper']}>
+        <InternalStructuredItem icon={icon} content={content} secondaryContent={secondaryContent} actions={actions} />
+      </div>
+
+      {isExpanded && children.length && (
+        <ul className={styles['treeitem-group']}>
+          {children.map((child, index) => {
+            return (
+              <InternalTreeItem
+                item={child}
+                index={index}
+                key={`${nextLevel}-${index}`}
+                level={nextLevel}
+                expandedItems={expandedItems}
+                i18nStrings={i18nStrings}
+                onItemToggle={onItemToggle}
+                renderItem={renderItem}
+                getItemId={getItemId}
+                getItemChildren={getItemChildren}
+                renderItemToggleIcon={renderItemToggleIcon}
+              />
+            );
+          })}
+        </ul>
+      )}
+    </li>
+  );
+};
+
+export default InternalTreeItem;
diff --git a/src/tree-view/tree-item/styles.scss b/src/tree-view/tree-item/styles.scss
new file mode 100644
index 0000000000..1227766c19
--- /dev/null
+++ b/src/tree-view/tree-item/styles.scss
@@ -0,0 +1,48 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+@use '../../internal/styles/tokens' as awsui;
+@use '../../internal/styles' as styles;
+
+$item-toggle-column-width: 28px;
+$item-min-height: 32px;
+
+.treeitem-group {
+  @include styles.styles-reset-ul;
+}
+
+.treeitem {
+  position: relative;
+
+  @include styles.styles-reset-ul;
+
+  align-items: baseline;
+  padding-block: awsui.$space-scaled-xxs;
+
+  display: grid;
+  grid-template-columns: $item-toggle-column-width 1fr;
+  column-gap: awsui.$space-scaled-xxs;
+  grid-template-rows: repeat(auto, 3);
+
+  > .expand-toggle-wrapper {
+    grid-column: 1;
+    grid-row: 1;
+
+    > .toggle {
+      position: absolute;
+      inset-block-start: awsui.$space-static-xxs;
+      inset-inline-start: awsui.$space-static-xxs;
+    }
+  }
+
+  > .structured-item-wrapper {
+    grid-column: 2;
+    grid-row: 1 / span 2;
+  }
+
+  > .treeitem-group {
+    grid-column: 2;
+    grid-row: 3;
+  }
+}