diff --git a/packages/@react-aria/tabs/src/index.ts b/packages/@react-aria/tabs/src/index.ts
index 903442d05fa..6908022969f 100644
--- a/packages/@react-aria/tabs/src/index.ts
+++ b/packages/@react-aria/tabs/src/index.ts
@@ -10,4 +10,6 @@
  * governing permissions and limitations under the License.
  */
 
-export * from './useTabs';
+export * from './useTab';
+export * from './useTabPanel';
+export * from './useTabList';
diff --git a/packages/@react-aria/tabs/src/useTab.ts b/packages/@react-aria/tabs/src/useTab.ts
new file mode 100644
index 00000000000..abac01f391f
--- /dev/null
+++ b/packages/@react-aria/tabs/src/useTab.ts
@@ -0,0 +1,59 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {AriaTabProps} from '@react-types/tabs';
+import {generateId} from './utils';
+import {HTMLAttributes, RefObject} from 'react';
+import {SingleSelectListState} from '@react-stately/list';
+import {usePress} from '@react-aria/interactions';
+import {useSelectableItem} from '@react-aria/selection';
+
+interface TabAria {
+  /** Props for the tab element. */
+  tabProps: HTMLAttributes<HTMLElement>
+}
+
+export function useTab<T>(
+  props: AriaTabProps,
+  state: SingleSelectListState<T>,
+  ref: RefObject<HTMLElement>
+): TabAria {
+  let {key, isDisabled: propsDisabled} = props;
+  let {selectionManager: manager, selectedKey} = state;
+
+  let isSelected = key === selectedKey;
+
+  let {itemProps} = useSelectableItem({
+    selectionManager: manager,
+    key,
+    ref
+  });
+  let isDisabled = propsDisabled || state.disabledKeys.has(key);
+
+  let {pressProps} = usePress({...itemProps, isDisabled});
+  let tabId = generateId(state, key, 'tab');
+  let tabPanelId = generateId(state, key, 'tabpanel');
+  let {tabIndex} = pressProps;
+
+  return {
+    tabProps: {
+      ...pressProps,
+      id: tabId,
+      'aria-selected': isSelected,
+      'aria-disabled': isDisabled || undefined,
+      'aria-controls': isSelected ? tabPanelId : undefined,
+      tabIndex: isDisabled ? undefined : tabIndex,
+      role: 'tab'
+    }
+  };
+}
+
diff --git a/packages/@react-aria/tabs/src/useTabList.ts b/packages/@react-aria/tabs/src/useTabList.ts
new file mode 100644
index 00000000000..386c0b9fbb6
--- /dev/null
+++ b/packages/@react-aria/tabs/src/useTabList.ts
@@ -0,0 +1,66 @@
+/*
+* Copyright 2020 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+
+import {AriaTabListProps} from '@react-types/tabs';
+import {HTMLAttributes, useMemo} from 'react';
+import {mergeProps, useId, useLabels} from '@react-aria/utils';
+import {TabListState} from '@react-stately/tabs';
+import {tabsIds} from './utils';
+import {TabsKeyboardDelegate} from './TabsKeyboardDelegate';
+import {useLocale} from '@react-aria/i18n';
+import {useSelectableCollection} from '@react-aria/selection';
+
+interface TabListAria {
+  /** Props for the tablist container. */
+  tabListProps: HTMLAttributes<HTMLElement>
+}
+
+export function useTabList<T>(props: AriaTabListProps<T>, state: TabListState<T>, ref): TabListAria {
+  let {
+    orientation = 'horizontal',
+    keyboardActivation = 'automatic'
+  } = props;
+  let {
+    collection,
+    selectionManager: manager,
+    disabledKeys
+  } = state;
+  let {direction} = useLocale();
+  let delegate = useMemo(() => new TabsKeyboardDelegate(
+    collection,
+    direction,
+    orientation,
+    disabledKeys), [collection, disabledKeys, orientation, direction]);
+
+  let {collectionProps} = useSelectableCollection({
+    ref,
+    selectionManager: manager,
+    keyboardDelegate: delegate,
+    selectOnFocus: keyboardActivation === 'automatic',
+    disallowEmptySelection: true
+  });
+
+  // Compute base id for all tabs
+  let tabsId = useId();
+  tabsIds.set(state, tabsId);
+
+  let tabListLabelProps = useLabels({...props, id: tabsId});
+
+  return {
+    tabListProps: {
+      ...mergeProps(collectionProps, tabListLabelProps),
+      role: 'tablist',
+      'aria-orientation': orientation,
+      tabIndex: undefined
+    }
+  };
+}
diff --git a/packages/@react-aria/tabs/src/useTabPanel.ts b/packages/@react-aria/tabs/src/useTabPanel.ts
new file mode 100644
index 00000000000..ffcc6f334ac
--- /dev/null
+++ b/packages/@react-aria/tabs/src/useTabPanel.ts
@@ -0,0 +1,33 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {AriaTabPanelProps} from '@react-types/tabs';
+import {generateId} from './utils';
+import {HTMLAttributes} from 'react';
+import {mergeProps} from '@react-aria/utils';
+import {TabListState} from '@react-stately/tabs';
+
+interface TabPanelAria {
+  /** Props for the tab panel element. */
+  tabPanelProps: HTMLAttributes<HTMLElement>
+}
+    
+export function useTabPanel<T>(props: AriaTabPanelProps, state: TabListState<T>): TabPanelAria {
+  return {
+    tabPanelProps: mergeProps(props, {
+      id: generateId(state, state?.selectedKey, 'tabpanel'),
+      'aria-labelledby': generateId(state, state?.selectedKey, 'tab'),
+      tabIndex: 0,
+      role: 'tabpanel'
+    })
+  };
+}
diff --git a/packages/@react-aria/tabs/src/useTabs.ts b/packages/@react-aria/tabs/src/useTabs.ts
deleted file mode 100644
index 2684c889786..00000000000
--- a/packages/@react-aria/tabs/src/useTabs.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {AriaTabProps, AriaTabsProps} from '@react-types/tabs';
-import {HTMLAttributes, Key, RefObject, useMemo} from 'react';
-import {mergeProps, useId, useLabels} from '@react-aria/utils';
-import {SingleSelectListState} from '@react-stately/list';
-import {TabsKeyboardDelegate} from './TabsKeyboardDelegate';
-import {TabsState} from '@react-stately/tabs';
-import {useLocale} from '@react-aria/i18n';
-import {usePress} from '@react-aria/interactions';
-import {useSelectableCollection, useSelectableItem} from '@react-aria/selection';
-
-interface TabsAria {
-  /** Props for the tablist container. */
-  tabListProps: HTMLAttributes<HTMLElement>,
-  /** Props for the associated tabpanel element. */
-  tabPanelProps: HTMLAttributes<HTMLElement>
-}
-
-const tabsIds = new WeakMap<SingleSelectListState<unknown>, string>();
-
-export function useTabs<T>(props: AriaTabsProps<T>, state: TabsState<T>, ref): TabsAria {
-  let {
-    orientation = 'horizontal',
-    keyboardActivation = 'automatic'
-  } = props;
-  let {
-    collection,
-    selectionManager: manager,
-    disabledKeys,
-    selectedKey
-  } = state;
-  let {direction} = useLocale();
-  let delegate = useMemo(() => new TabsKeyboardDelegate(
-    collection,
-    direction,
-    orientation,
-    disabledKeys), [collection, disabledKeys, orientation, direction]);
-
-  let {collectionProps} = useSelectableCollection({
-    ref,
-    selectionManager: manager,
-    keyboardDelegate: delegate,
-    selectOnFocus: keyboardActivation === 'automatic',
-    disallowEmptySelection: true
-  });
-
-  // Compute base id for all tabs
-  let tabsId = useId();
-  tabsIds.set(state, tabsId);
-
-  let tabListLabelProps = useLabels({...props, id: tabsId});
-
-  return {
-    tabListProps: {
-      ...mergeProps(collectionProps, tabListLabelProps),
-      role: 'tablist',
-      'aria-orientation': orientation,
-      tabIndex: undefined
-    },
-    tabPanelProps: {
-      id: generateId(state, selectedKey, 'tabpanel'),
-      'aria-labelledby': generateId(state, selectedKey, 'tab'),
-      tabIndex: 0,
-      role: 'tabpanel'
-    }
-  };
-}
-
-interface TabAria {
-  /** Props for the tab element. */
-  tabProps: HTMLAttributes<HTMLElement>
-}
-
-export function useTab<T>(
-  props: AriaTabProps<T>,
-  state: SingleSelectListState<T>,
-  ref: RefObject<HTMLElement>
-): TabAria {
-  let {item, isDisabled: propsDisabled} = props;
-  let {key} = item;
-  let {selectionManager: manager, selectedKey} = state;
-
-  let isSelected = key === selectedKey;
-
-  let {itemProps} = useSelectableItem({
-    selectionManager: manager,
-    key,
-    ref
-  });
-  let isDisabled = propsDisabled || state.disabledKeys.has(key);
-
-  let {pressProps} = usePress({...itemProps, isDisabled});
-  let tabId = generateId(state, key, 'tab');
-  let tabPanelId = generateId(state, key, 'tabpanel');
-  let {tabIndex} = pressProps;
-
-  // selected tab should have tabIndex=0, when it initializes
-  if (isSelected && !isDisabled) {
-    tabIndex = 0;
-  }
-
-  return {
-    tabProps: {
-      ...pressProps,
-      id: tabId,
-      'aria-selected': isSelected,
-      'aria-disabled': isDisabled || undefined,
-      'aria-controls': isSelected ? tabPanelId : undefined,
-      tabIndex: isDisabled ? undefined : tabIndex,
-      role: 'tab'
-    }
-  };
-}
-
-function generateId<T>(state: SingleSelectListState<T>, key: Key, role: string) {
-  if (typeof key === 'string') {
-    key = key.replace(/\s+/g, '');
-  }
-
-  let baseId = tabsIds.get(state);
-  return `${baseId}-${role}-${key}`;
-}
diff --git a/packages/@react-aria/tabs/src/utils.ts b/packages/@react-aria/tabs/src/utils.ts
new file mode 100644
index 00000000000..3c125a0d303
--- /dev/null
+++ b/packages/@react-aria/tabs/src/utils.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Key} from 'react';
+import {SingleSelectListState} from '@react-stately/list';
+
+export const tabsIds = new WeakMap<SingleSelectListState<unknown>, string>();
+
+export function generateId<T>(state: SingleSelectListState<T>, key: Key, role: string) {
+  if (typeof key === 'string') {
+    key = key.replace(/\s+/g, '');
+  }
+  
+  let baseId = tabsIds.get(state);
+  return `${baseId}-${role}-${key}`;
+}
+  
diff --git a/packages/@react-spectrum/tabs/src/Tabs.tsx b/packages/@react-spectrum/tabs/src/Tabs.tsx
index 75f188dbe5e..b65b270b6b9 100644
--- a/packages/@react-spectrum/tabs/src/Tabs.tsx
+++ b/packages/@react-spectrum/tabs/src/Tabs.tsx
@@ -14,26 +14,44 @@ import {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useStyleProps, useVal
 import {DOMProps, DOMRef, Node, Orientation} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import {Item, Picker} from '@react-spectrum/picker';
+import {ListCollection, SingleSelectListState} from '@react-stately/list';
 import {mergeProps, useId, useLayoutEffect} from '@react-aria/utils';
-import React, {HTMLAttributes, Key, MutableRefObject, ReactElement, useCallback, useEffect, useRef, useState} from 'react';
-import {SingleSelectListState} from '@react-stately/list';
+import React, {Key, MutableRefObject, ReactElement, useCallback, useContext, useEffect, useRef, useState} from 'react';
 import {SpectrumPickerProps} from '@react-types/select';
-import {SpectrumTabsProps} from '@react-types/tabs';
+import {SpectrumTabListProps, SpectrumTabPanelsProps, SpectrumTabsProps} from '@react-types/tabs';
 import styles from '@adobe/spectrum-css-temp/components/tabs/vars.css';
+import {TabListState, useTabListState} from '@react-stately/tabs';
 import {Text} from '@react-spectrum/text';
+import {useCollection} from '@react-stately/collections';
 import {useHover} from '@react-aria/interactions';
 import {useLocale} from '@react-aria/i18n';
 import {useProvider, useProviderProps} from '@react-spectrum/provider';
 import {useResizeObserver} from '@react-aria/utils';
-import {useTab, useTabs} from '@react-aria/tabs';
-import {useTabsState} from '@react-stately/tabs';
+import {useTab, useTabList, useTabPanel} from '@react-aria/tabs';
+
+interface TabsContext<T> {
+  tabProps: SpectrumTabsProps<T>,
+  tabState: {
+    tabListState: TabListState<T>,
+    setTabListState: (state: TabListState<T>) => void,
+    selectedTab: HTMLElement,
+    collapse: boolean
+  },
+  refs: {
+    wrapperRef: MutableRefObject<HTMLDivElement>,
+    tablistRef: MutableRefObject<HTMLDivElement>
+  },
+  tabPanelProps: {
+    'aria-labelledby': string
+  }
+}
+
+const TabContext = React.createContext<TabsContext<any>>(null);
 
 function Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDivElement>) {
   props = useProviderProps(props);
   let {
     orientation = 'horizontal' as Orientation,
-    isDisabled,
-    isQuiet,
     density = 'regular',
     children,
     ...otherProps
@@ -42,24 +60,23 @@ function Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDiv
   let domRef = useDOMRef(ref);
   let tablistRef = useRef<HTMLDivElement>();
   let wrapperRef = useRef<HTMLDivElement>();
-  let state = useTabsState(props);
 
   let {direction} = useLocale();
   let {styleProps} = useStyleProps(otherProps);
-  let {tabListProps, tabPanelProps} = useTabs(props, state, tablistRef);
   let [collapse, setCollapse] = useValueEffect(false);
   let [selectedTab, setSelectedTab] = useState<HTMLElement>();
+  const [tabListState, setTabListState] = useState<TabListState<T>>(null);
 
   useEffect(() => {
     if (tablistRef.current) {
-      let selectedTab: HTMLElement = tablistRef.current.querySelector(`[data-key="${state.selectedKey}"]`);
+      let selectedTab: HTMLElement = tablistRef.current.querySelector(`[data-key="${tabListState?.selectedKey}"]`);
 
       if (selectedTab != null) {
         setSelectedTab(selectedTab);
       }
     }
     // collapse is in the dep array so selectedTab can be updated for TabLine positioning
-  }, [children, state.selectedKey, collapse, tablistRef]);
+  }, [children, tabListState?.selectedKey, collapse, tablistRef]);
 
   let checkShouldCollapse = useCallback(() => {
     let computeShouldCollapse = () => {
@@ -94,48 +111,35 @@ function Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDiv
 
   useResizeObserver({ref: wrapperRef, onResize: checkShouldCollapse});
 
+  let tabPanelProps = {
+    'aria-labelledby': undefined
+  };
+
   // When the tabs are collapsed, the tabPanel should be labelled by the Picker button element.
   let collapsibleTabListId = useId();
   if (collapse && orientation !== 'vertical') {
     tabPanelProps['aria-labelledby'] = collapsibleTabListId;
   }
-
   return (
-    <div
-      {...styleProps}
-      ref={domRef}
-      className={classNames(
-        styles,
-        'spectrum-TabsPanel',
-        `spectrum-TabsPanel--${orientation}`,
-        styleProps.className
-      )}>
-      {orientation === 'vertical' &&
-        <TabList
-          {...tabListProps}
-          ref={tablistRef}
-          orientation={orientation}
-          density={density}
-          isQuiet={isQuiet}
-          isDisabled={isDisabled}
-          state={state}
-          selectedTab={selectedTab} />
-      }
-      {orientation !== 'vertical' &&
-        <CollapsibleTabList
-          {...props}
-          id={collapsibleTabListId}
-          wrapperRef={wrapperRef}
-          collapse={collapse}
-          tabListProps={tabListProps}
-          state={state}
-          selectedTab={selectedTab}
-          ref={tablistRef} />
-      }
-      <div {...tabPanelProps} className={classNames(styles, 'spectrum-TabsPanel-tabpanel')}>
-        {state.selectedItem && state.selectedItem.props.children}
+    <TabContext.Provider
+      value={{
+        tabProps: {...props, orientation, density},
+        tabState: {tabListState, setTabListState, selectedTab, collapse},
+        refs: {tablistRef, wrapperRef},
+        tabPanelProps
+      }}>
+      <div
+        {...styleProps}
+        ref={domRef}
+        className={classNames(
+          styles,
+          'spectrum-TabsPanel',
+          `spectrum-TabsPanel--${orientation}`,
+          styleProps.className
+        )}>
+        {props.children}
       </div>
-    </div>
+    </TabContext.Provider>
   );
 }
 
@@ -146,13 +150,14 @@ interface TabProps<T> extends DOMProps {
   orientation?: Orientation
 }
 
-export function Tab<T>(props: TabProps<T>) {
+// @private
+function Tab<T>(props: TabProps<T>) {
   let {item, state, isDisabled: propsDisabled} = props;
   let {key, rendered} = item;
   let isDisabled = propsDisabled || state.disabledKeys.has(key);
 
   let ref = useRef<HTMLDivElement>();
-  let {tabProps} = useTab({item, isDisabled}, state, ref);
+  let {tabProps} = useTab({key, isDisabled}, state, ref);
 
   let {hoverProps, isHovered} = useHover({
     ...props
@@ -198,6 +203,7 @@ interface TabLineProps {
   selectedKey?: Key
 }
 
+// @private
 function TabLine(props: TabLineProps) {
   let {
     orientation,
@@ -238,77 +244,31 @@ function TabLine(props: TabLineProps) {
   return <div className={classNames(styles, 'spectrum-Tabs-selectionIndicator')} role="presentation" style={style} />;
 }
 
-interface CollapsibleTabListProps<T> extends TabListProps<T>, TabPickerProps<T> {
-  tabListProps?: HTMLAttributes<HTMLElement>,
-  wrapperRef: MutableRefObject<HTMLDivElement>,
-  collapse?: boolean,
-  tabListclassName?: string
-}
-
-const CollapsibleTabList = React.forwardRef(function <T> (props: CollapsibleTabListProps<T>, ref: MutableRefObject<HTMLDivElement>) {
-  let {
-    tabListProps,
-    density,
-    isQuiet,
-    isDisabled,
-    state,
-    selectedTab,
-    wrapperRef,
-    collapse
-  } = props;
-
-  let tabListclassName = classNames(styles, 'spectrum-TabsPanel-tabs');
-
-  return (
-    <div
-      ref={wrapperRef}
-      className={classNames(
-        styles,
-        'spectrum-TabsPanel-collapseWrapper'
-      )}>
-      {collapse && <TabPicker {...props} className={tabListclassName} />}
-      {!collapse && (
-        <TabList
-          {...tabListProps}
-          density={density}
-          isQuiet={isQuiet}
-          isDisabled={isDisabled}
-          state={state}
-          selectedTab={selectedTab}
-          ref={ref}
-          orientation="horizontal"
-          className={tabListclassName} />
-      )}
-    </div>
-  );
-});
+/**
+ * A TabList is used within Tabs to group tabs that a user can switch between.
+ * The keys of the items within the <TabList> must match up with a corresponding item inside the <TabPanels>.
+ */
+export function TabList<T>(props: SpectrumTabListProps<T>) {
+  const tabContext = useContext(TabContext);
+  const {refs, tabState, tabProps, tabPanelProps} = tabContext;
+  const {isQuiet, density, isDisabled, orientation} = tabProps;
+  const {selectedTab, collapse, setTabListState} = tabState;
+  const {tablistRef, wrapperRef} = refs;
+  // Pass original Tab props but override children to create the collection.
+  const state = useTabListState({...tabProps, children: props.children});
 
-interface TabListProps<T> {
-  isQuiet?: boolean,
-  density?: 'compact' | 'regular',
-  isDisabled?: boolean,
-  orientation?: Orientation,
-  state: SingleSelectListState<T>,
-  selectedTab: HTMLElement,
-  className?: string
-}
+  const {tabListProps} = useTabList({...tabProps, ...props}, state, tablistRef);
 
-const TabList = React.forwardRef(function <T> (props: TabListProps<T>, ref: MutableRefObject<HTMLDivElement>) {
-  let {
-    isQuiet,
-    density,
-    state,
-    isDisabled,
-    orientation,
-    selectedTab,
-    className,
-    ...otherProps
-  } = props;
+  useEffect(() => {
+    // Passing back to root as useTabPanel needs the TabListState
+    setTabListState(state);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.disabledKeys, state.selectedItem, state.selectedKey, props.children]);
 
-  return (
+  const tabContent = (
     <div
-      {...otherProps}
-      ref={ref}
+      {...tabListProps}
+      ref={tablistRef}
       className={classNames(
         styles,
         'spectrum-Tabs',
@@ -316,16 +276,55 @@ const TabList = React.forwardRef(function <T> (props: TabListProps<T>, ref: Muta
         {
           'spectrum-Tabs--quiet': isQuiet,
           ['spectrum-Tabs--compact']: density === 'compact'
-        },
-        className
-      )}>
+        })}>
       {[...state.collection].map((item) => (
         <Tab key={item.key} item={item} state={state} isDisabled={isDisabled} orientation={orientation} />
       ))}
       <TabLine orientation={orientation} selectedTab={selectedTab} />
     </div>
   );
-});
+
+
+  if (orientation === 'vertical') {
+    return tabContent;
+  } else {
+    let tabListclassName = classNames(styles, 'spectrum-TabsPanel-tabs');
+    return (
+      <div
+        ref={wrapperRef}
+        className={classNames(
+            styles,
+            'spectrum-TabsPanel-collapseWrapper'
+          )}>
+        {collapse ? <TabPicker {...props} {...tabProps} id={tabPanelProps['aria-labelledby']} state={state} className={tabListclassName} /> : tabContent}
+      </div>
+    );
+  }
+}
+
+/**
+ * TabPanels is used within Tabs as a container for the content of each tab.
+ * The keys of the items within the <TabPanels> must match up with a corresponding item inside the <TabList>.
+ */
+export function TabPanels<T>(props: SpectrumTabPanelsProps<T>) {
+  const {tabState, tabProps, tabPanelProps: ctxTabPanelProps} = useContext(TabContext);
+  const {tabListState} = tabState;
+  const {tabPanelProps} = useTabPanel(props, tabListState);
+
+  if (ctxTabPanelProps['aria-labelledby']) {
+    tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby'];
+  }
+
+  const factory = nodes => new ListCollection(nodes);
+  const collection = useCollection({items: tabProps.items, ...props}, factory);
+  const selectedItem = tabListState ? collection.getItem(tabListState.selectedKey) : null;
+
+  return (
+    <div {...tabPanelProps} className={classNames(styles, 'spectrum-TabsPanel-tabpanel')}>
+      {selectedItem && selectedItem.props.children}
+    </div>
+  );
+}
 
 interface TabPickerProps<T> extends SpectrumPickerProps<T> {
   density?: 'compact' | 'regular',
diff --git a/packages/@react-spectrum/tabs/stories/Tabs.stories.js b/packages/@react-spectrum/tabs/stories/Tabs.stories.js
index 87a3ba006c4..8aaaff3d958 100644
--- a/packages/@react-spectrum/tabs/stories/Tabs.stories.js
+++ b/packages/@react-spectrum/tabs/stories/Tabs.stories.js
@@ -11,13 +11,13 @@
  */
 
 import {action} from '@storybook/addon-actions';
+import {ActionGroup, Content, Flex, Heading, Text} from '@adobe/react-spectrum';
 import Bookmark from '@spectrum-icons/workflow/Bookmark';
 import {Button} from '@react-spectrum/button';
 import {ButtonGroup} from '@react-spectrum/buttongroup';
 import Calendar from '@spectrum-icons/workflow/Calendar';
-import {Content, Flex, Heading, Text} from '@adobe/react-spectrum';
 import Dashboard from '@spectrum-icons/workflow/Dashboard';
-import {Item, Tabs} from '..';
+import {Item, TabList, TabPanels, Tabs} from '..';
 import React from 'react';
 import {storiesOf} from '@storybook/react';
 
@@ -118,16 +118,22 @@ storiesOf('Tabs', module)
     () => (
       <Flex minHeight={400} minWidth={400} UNSAFE_style={{borderWidth: 1, borderStyle: 'solid', borderColor: 'var(--spectrum-global-color-gray-800)', padding: '10px'}}>
         <Tabs>
-          <Item title="Tab 1">
-            <Content>
-              <Text>Hello World</Text>
-            </Content>
-          </Item>
-          <Item title="Tab 2">
-            <Content>
-              <Text>Goodbye World</Text>
-            </Content>
-          </Item>
+          <TabList>
+            <Item title="Tab 1" />
+            <Item title="Tab 2" />
+          </TabList>
+          <TabPanels>
+            <Item title="Tab 1">
+              <Content>
+                <Text>Hello World</Text>
+              </Content>
+            </Item>
+            <Item title="Tab 2">
+              <Content>
+                <Text>Goodbye World</Text>
+              </Content>
+            </Item>
+          </TabPanels>
         </Tabs>
       </Flex>
     )
@@ -137,74 +143,97 @@ storiesOf('Tabs', module)
     () => (
       (
         <Tabs maxWidth={500}>
-          <Item title="Tab 1 long long long name">
-            <Content margin="size-160">
-              <Text>Text</Text>
-            </Content>
-          </Item>
-          <Item title="Tab 2">
-            <Content margin="size-160">
-              <Text>Text 2</Text>
-            </Content>
-          </Item>
+          <TabList>
+            <Item>
+              <Text>Tab 1 long long long name</Text>
+            </Item>
+            <Item>
+              <Text>Tab 2</Text>
+            </Item>
+          </TabList>
+          <TabPanels>
+            <Item>
+              <Content margin="size-160">
+                <Text>Text</Text>
+              </Content>
+            </Item>
+            <Item>
+              <Content margin="size-160">
+                <Text>Text 2</Text>
+              </Content>
+            </Item>
+          </TabPanels>
         </Tabs>
       )
     )
+  )
+  .add(
+    'Tab with flex container in between',
+    () => <DynamicTabsWithDecoration />
   );
 
 function render(props = {}) {
   return (
     <Tabs {...props} aria-label="Tab example" maxWidth={500} onSelectionChange={action('onSelectionChange')}>
-      <Item title="Tab 1" key="val1">
-        <Content margin="size-160">
-          <Heading>Tab Body 1</Heading>
-          <Text>
-            Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-            Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-            Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-          </Text>
-        </Content>
-      </Item>
-      <Item title="Tab 2" key="val2">
-        <Content margin="size-160">
-          <Heading>Tab Body 2</Heading>
-          <Text>
-            Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-            Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-            Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-          </Text>
-        </Content>
-      </Item>
-      <Item title="Tab 3" key="val3">
-        <Content margin="size-160">
-          <Heading>Tab Body 3</Heading>
-          <Text>
-            Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-            Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-            Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-          </Text>
-        </Content>
-      </Item>
-      <Item title="Tab 4" key="val4">
-        <Content margin="size-160">
-          <Heading>Tab Body 4</Heading>
-          <Text>
-            Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-            Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-            Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-          </Text>
-        </Content>
-      </Item>
-      <Item title="Tab 5" key="val5">
-        <Content margin="size-160">
-          <Heading>Tab Body 5</Heading>
-          <Text>
-            Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-            Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-            Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-          </Text>
-        </Content>
-      </Item>
+      <TabList>
+        <Item title="Tab 1" key="val1" />
+        <Item title="Tab 2" key="val2" />
+        <Item title="Tab 3" key="val3" />
+        <Item title="Tab 4" key="val4" />
+        <Item title="Tab 5" key="val5" />
+      </TabList>
+      <TabPanels>
+        <Item title="Tab 1" key="val1">
+          <Content margin="size-160">
+            <Heading>Tab Body 1</Heading>
+            <Text>
+              Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+              Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+              Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+            </Text>
+          </Content>
+        </Item>
+        <Item title="Tab 2" key="val2">
+          <Content margin="size-160">
+            <Heading>Tab Body 2</Heading>
+            <Text>
+              Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+              Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+              Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+            </Text>
+          </Content>
+        </Item>
+        <Item title="Tab 3" key="val3">
+          <Content margin="size-160">
+            <Heading>Tab Body 3</Heading>
+            <Text>
+              Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+              Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+              Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+            </Text>
+          </Content>
+        </Item>
+        <Item title="Tab 4" key="val4">
+          <Content margin="size-160">
+            <Heading>Tab Body 4</Heading>
+            <Text>
+              Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+              Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+              Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+            </Text>
+          </Content>
+        </Item>
+        <Item title="Tab 5" key="val5">
+          <Content margin="size-160">
+            <Heading>Tab Body 5</Heading>
+            <Text>
+              Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+              Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+              Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+            </Text>
+          </Content>
+        </Item>
+      </TabPanels>
     </Tabs>
   );
 }
@@ -212,60 +241,52 @@ function render(props = {}) {
 function renderWithIcons(props = {}) {
   return (
     <Tabs {...props} aria-label="Tab example" maxWidth={500} onSelectionChange={action('onSelectionChange')}>
-      <Item
-        key="dashboard"
-        textValue="Dashboard"
-        title={
-          <>
-            <Dashboard />
-            <Text>Dashboard</Text>
-          </>
-        }>
-        <Content margin="size-160">
-          <Heading>Dashboard</Heading>
-          <Text>
-            Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-            Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-            Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-          </Text>
-        </Content>
-      </Item>
-      <Item
-        key="calendar"
-        textValue="Calendar"
-        title={
-          <>
-            <Calendar />
-            <Text>Calendar</Text>
-          </>
-        }>
-        <Content margin="size-160">
-          <Heading>Calendar</Heading>
-          <Text>
-            Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-            Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-            Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-          </Text>
-        </Content>
-      </Item>
-      <Item
-        key="bookmark"
-        textValue="Bookmark"
-        title={
-          <>
-            <Bookmark />
-            <Text>Bookmark</Text>
-          </>
-        }>
-        <Content margin="size-160">
-          <Heading>Bookmark</Heading>
-          <Text>
-            Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-            Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-            Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-          </Text>
-        </Content>
-      </Item>
+      <TabList>
+        <Item key="dashboard" textValue="Dashboard">
+          <Dashboard />
+          <Text>Dashboard</Text>
+        </Item>
+        <Item key="calendar" textValue="Calendar">
+          <Calendar />
+          <Text>Calendar</Text>
+        </Item>
+        <Item key="bookmark" textValue="Bookmark">
+          <Bookmark />
+          <Text>Bookmark</Text>
+        </Item>
+      </TabList>
+      <TabPanels>
+        <Item key="dashboard">
+          <Content margin="size-160">
+            <Heading>Dashboard</Heading>
+            <Text>
+              Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+              Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+              Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+            </Text>
+          </Content>
+        </Item>
+        <Item key="calendar" textValue="Calendar">
+          <Content margin="size-160">
+            <Heading>Calendar</Heading>
+            <Text>
+              Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+              Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+              Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+            </Text>
+          </Content>
+        </Item>
+        <Item key="bookmark">
+          <Content margin="size-160">
+            <Heading>Bookmark</Heading>
+            <Text>
+              Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+              Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+              Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+            </Text>
+          </Content>
+        </Item>
+      </TabPanels>
     </Tabs>
   );
 }
@@ -273,56 +294,65 @@ function renderWithIcons(props = {}) {
 function renderWithFalsyKey(props = {}) {
   return (
     <Tabs {...props} aria-label="Tab example" maxWidth={500} onSelectionChange={action('onSelectionChange')}>
-      <Item title="Tab 1" key="">
-        <Content margin="size-160">
-          <Heading>Tab Body 1</Heading>
-          <Text>
-            Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-            Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-            Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-          </Text>
-        </Content>
-      </Item>
-      <Item title="Tab 2" key="val2">
-        <Content margin="size-160">
-          <Heading>Tab Body 2</Heading>
-          <Text>
-            Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-            Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-            Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-          </Text>
-        </Content>
-      </Item>
-      <Item title="Tab 3" key="val3">
-        <Content margin="size-160">
-          <Heading>Tab Body 3</Heading>
-          <Text>
-            Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-            Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-            Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-          </Text>
-        </Content>
-      </Item>
-      <Item title="Tab 4" key="val4">
-        <Content margin="size-160">
-          <Heading>Tab Body 4</Heading>
-          <Text>
-            Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-            Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-            Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-          </Text>
-        </Content>
-      </Item>
-      <Item title="Tab 5" key="val5">
-        <Content margin="size-160">
-          <Heading>Tab Body 5</Heading>
-          <Text>
-            Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-            Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-            Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-          </Text>
-        </Content>
-      </Item>
+      <TabList>
+        <Item title="Tab 1" key="" />
+        <Item title="Tab 2" key="val2" />
+        <Item title="Tab 3" key="val3" />
+        <Item title="Tab 4" key="val4" />
+        <Item title="Tab 5" key="val5" />
+      </TabList>
+      <TabPanels>
+        <Item title="Tab 1" key="">
+          <Content margin="size-160">
+            <Heading>Tab Body 1</Heading>
+            <Text>
+              Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+              Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+              Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+            </Text>
+          </Content>
+        </Item>
+        <Item title="Tab 2" key="val2">
+          <Content margin="size-160">
+            <Heading>Tab Body 2</Heading>
+            <Text>
+              Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+              Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+              Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+            </Text>
+          </Content>
+        </Item>
+        <Item title="Tab 3" key="val3">
+          <Content margin="size-160">
+            <Heading>Tab Body 3</Heading>
+            <Text>
+              Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+              Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+              Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+            </Text>
+          </Content>
+        </Item>
+        <Item title="Tab 4" key="val4">
+          <Content margin="size-160">
+            <Heading>Tab Body 4</Heading>
+            <Text>
+              Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+              Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+              Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+            </Text>
+          </Content>
+        </Item>
+        <Item title="Tab 5" key="val5">
+          <Content margin="size-160">
+            <Heading>Tab Body 5</Heading>
+            <Text>
+              Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+              Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+              Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+            </Text>
+          </Content>
+        </Item>
+      </TabPanels>
     </Tabs>
   );
 }
@@ -358,26 +388,28 @@ let DynamicTabs = (props = {}) => {
   return (
     <div style={{width: '80%'}}>
       <Tabs {...props} aria-label="Tab example" items={tabs} onSelectionChange={action('onSelectionChange')}>
-        {item => (
-          <Item
-            key={item.name}
-            textValue={item.name}
-            title={
-              <>
-                {item.icon}
-                <Text>{item.name}</Text>
-              </>
-            }>
-            <Content margin="size-160">
-              <Heading>{item.children}</Heading>
-              <Text>
-                Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-                Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-                Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-              </Text>
-            </Content>
-          </Item>
-        )}
+        <TabList>
+          {item => (
+            <Item key={item.name} textValue={item.name}>
+              {item.icon}
+              <Text>{item.name}</Text>
+            </Item>
+          )}
+        </TabList>
+        <TabPanels>
+          {item => (
+            <Item key={item.name}>
+              <Content margin="size-160">
+                <Heading>{item.children}</Heading>
+                <Text>
+                  Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+                  Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+                  Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+                </Text>
+              </Content>
+            </Item>
+          )}
+        </TabPanels>
       </Tabs>
       <ButtonGroup marginEnd="30px">
         <Button variant="secondary" onPress={() => addTab()}>
@@ -397,26 +429,28 @@ let OrientationFlip = (props = {}) => {
   return (
     <div style={{width: '80%'}}>
       <Tabs {...props} aria-label="Tab example" items={items} onSelectionChange={action('onSelectionChange')} orientation={flipOrientation ? 'horizontal' : 'vertical'}>
-        {item => (
-          <Item
-            key={item.name}
-            textValue={item.name}
-            title={
-              <>
-                {item.icon}
-                <Text>{item.name}</Text>
-              </>
-            }>
-            <Content margin="size-160">
-              <Heading>{item.children}</Heading>
-              <Text>
-                Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
-                Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
-                Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
-              </Text>
-            </Content>
-          </Item>
-        )}
+        <TabList>
+          {item => (
+            <Item key={item.name} textValue={item.name}>
+              {item.icon}
+              <Text>{item.name}</Text>
+            </Item>
+          )}
+        </TabList>
+        <TabPanels>
+          {item => (
+            <Item key={item.name}>
+              <Content margin="size-160">
+                <Heading>{item.children}</Heading>
+                <Text>
+                  Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+                  Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+                  Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+                </Text>
+              </Content>
+            </Item>
+          )}
+        </TabPanels>
       </Tabs>
       <Button variant="secondary" onPress={() => setFlipOrientation((state) => !state)}>
         <Text>Flip Orientation</Text>
@@ -424,3 +458,69 @@ let OrientationFlip = (props = {}) => {
     </div>
   );
 };
+
+
+let DynamicTabsWithDecoration = (props = {}) => {
+
+  let [tabs, setTabs] = React.useState(items);
+  let addTab = () => {
+    let newTabs = [...tabs];
+    newTabs.push({
+      name: `Tab ${tabs.length + 1}`,
+      children: `Tab Body ${tabs.length + 1}`
+    });
+
+    setTabs(newTabs);
+  };
+
+  let removeTab = () => {
+    if (tabs.length > 1) {
+      let newTabs = [...tabs];
+      newTabs.pop();
+      setTabs(newTabs);
+    }
+  };
+
+  return (
+    <div style={{width: '80%'}}>
+      <Tabs {...props} aria-label="Tab example" items={tabs} onSelectionChange={action('onSelectionChange')}>
+        <Flex direction="column">
+          <Flex direction="row" alignItems="center">
+            <TabList>
+              {item => (
+                <Item key={item.name} textValue={item.name}>
+                  {item.icon}
+                  <Text>{item.name}</Text>
+                </Item>
+              )}
+            </TabList>
+            <Flex alignItems="center" justifyContent="end" flexGrow={1} alignSelf="stretch" UNSAFE_style={{borderBottom: 'var(--spectrum-alias-border-size-thick) solid var(--spectrum-global-color-gray-200)'}}>
+              <ActionGroup marginEnd="30px" disabledKeys={tabs.length === 1 ? ['remove'] : undefined} onAction={val => val === 'add' ? addTab() : removeTab()}>
+                <Item key="add">
+                  <Text>Add Tab</Text>
+                </Item>
+                <Item key="remove">
+                  <Text>Remove Tab</Text>
+                </Item>
+              </ActionGroup>
+            </Flex>
+          </Flex>
+          <TabPanels>
+            {item => (
+              <Item key={item.name}>
+                <Content margin="size-160">
+                  <Heading>{item.children}</Heading>
+                  <Text>
+                    Dolore ex esse laboris elit magna esse sunt. Pariatur in veniam Lorem est occaecat do magna nisi mollit ipsum sit adipisicing fugiat ex. Pariatur ullamco exercitation ea qui adipisicing.
+                    Id cupidatat aute id ut excepteur exercitation magna pariatur. Mollit irure irure reprehenderit pariatur eiusmod proident Lorem deserunt duis cillum mollit. Do reprehenderit sit cupidatat quis laborum in do culpa nisi ipsum. Velit aliquip commodo ea ipsum incididunt culpa nostrud deserunt incididunt exercitation. In quis proident sit ad dolore tempor. Eiusmod pariatur quis commodo labore cupidatat cillum enim eiusmod voluptate laborum culpa. Laborum cupidatat incididunt velit voluptate incididunt occaecat quis do.
+                    Consequat adipisicing irure Lorem commodo officia sint id. Velit sit magna aliquip eiusmod non id deserunt. Magna veniam ad consequat dolor cupidatat esse enim Lorem ullamco. Anim excepteur consectetur id in. Mollit laboris duis labore enim duis esse reprehenderit.
+                  </Text>
+                </Content>
+              </Item>
+            )}
+          </TabPanels>
+        </Flex>
+      </Tabs>
+    </div>
+  );
+};
diff --git a/packages/@react-spectrum/tabs/test/Tabs.test.js b/packages/@react-spectrum/tabs/test/Tabs.test.js
index 1819ff52442..ee948e4a48e 100644
--- a/packages/@react-spectrum/tabs/test/Tabs.test.js
+++ b/packages/@react-spectrum/tabs/test/Tabs.test.js
@@ -11,7 +11,7 @@
  */
 
 import {act, fireEvent, render, within} from '@testing-library/react';
-import {Item, Tabs} from '../src';
+import {Item, TabList, TabPanels, Tabs} from '../src';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import {theme} from '@react-spectrum/theme-default';
@@ -28,11 +28,18 @@ function renderComponent(props) {
   return render(
     <Provider theme={theme}>
       <Tabs {...props} items={items}>
-        {item => (
-          <Item key={item.name} title={item.name}>
-            {item.children}
-          </Item>
-        )}
+        <TabList>
+          {item => (
+            <Item key={item.name} title={item.name || item.children} />
+          )}
+        </TabList>
+        <TabPanels>
+          {item => (
+            <Item key={item.name} title={item.name}>
+              {item.children}
+            </Item>
+          )}
+        </TabPanels>
       </Tabs>
     </Provider>
   );
@@ -217,18 +224,32 @@ describe('Tabs', function () {
     let tree = render(
       <Provider theme={theme}>
         <Tabs>
-          {items.map(item => (
-            <Item key={item.name} title={item.name}>
-              {item.children}
-            </Item>
-          ))}
+          <TabList>
+            {items.map(item => (
+              <Item key={item.name} title={item.name || item.children} />
+            ))}
+          </TabList>
+          <TabPanels>
+            {items.map(item => (
+              <Item key={item.name}>
+                {item.children}
+              </Item>
+            ))}
+          </TabPanels>
         </Tabs>
         <Tabs>
-          {items.map(item => (
-            <Item key={item.name} title={item.name}>
-              {item.children}
-            </Item>
-          ))}
+          <TabList>
+            {items.map(item => (
+              <Item key={item.name} title={item.name || item.children} />
+            ))}
+          </TabList>
+          <TabPanels>
+            {items.map(item => (
+              <Item key={item.name}>
+                {item.children}
+              </Item>
+            ))}
+          </TabPanels>
         </Tabs>
       </Provider>
     );
@@ -369,11 +390,18 @@ describe('Tabs', function () {
     let {getByRole, rerender} = render(
       <Provider theme={theme}>
         <Tabs aria-label="Test Tabs" items={items}>
-          {item => (
-            <Item key={item.name} title={item.name}>
-              {item.children}
-            </Item>
-          )}
+          <TabList>
+            {item => (
+              <Item key={item.name} title={item.name || item.children} />
+            )}
+          </TabList>
+          <TabPanels>
+            {item => (
+              <Item key={item.name}>
+                {item.children}
+              </Item>
+            )}
+          </TabPanels>
         </Tabs>
       </Provider>
     );
@@ -400,11 +428,18 @@ describe('Tabs', function () {
     rerender(
       <Provider theme={theme}>
         <Tabs aria-label="Test Tabs" items={newItems}>
-          {item => (
-            <Item key={item.name} title={item.name}>
-              {item.children}
-            </Item>
-          )}
+          <TabList>
+            {item => (
+              <Item key={item.name} title={item.name || item.children} />
+            )}
+          </TabList>
+          <TabPanels>
+            {item => (
+              <Item key={item.name}>
+                {item.children}
+              </Item>
+            )}
+          </TabPanels>
         </Tabs>
       </Provider>
     );
@@ -420,12 +455,19 @@ describe('Tabs', function () {
 
     rerender(
       <Provider theme={theme}>
-        <Tabs aria-label="Test Tabs" items={newItems} orientation="vertical">
-          {item => (
-            <Item key={item.name} title={item.name}>
-              {item.children}
-            </Item>
-          )}
+        <Tabs items={newItems} orientation="vertical">
+          <TabList>
+            {item => (
+              <Item key={item.name} title={item.name || item.children} />
+            )}
+          </TabList>
+          <TabPanels>
+            {item => (
+              <Item key={item.name}>
+                {item.children}
+              </Item>
+            )}
+          </TabPanels>
         </Tabs>
       </Provider>
     );
@@ -458,11 +500,18 @@ describe('Tabs', function () {
     rerender(
       <Provider theme={theme}>
         <Tabs aria-label="Test Tabs" items={newItems}>
-          {item => (
-            <Item key={item.name} title={item.name}>
-              {item.children}
-            </Item>
-          )}
+          <TabList>
+            {item => (
+              <Item key={item.name} title={item.name} />
+            )}
+          </TabList>
+          <TabPanels>
+            {item => (
+              <Item key={item.name}>
+                {item.children}
+              </Item>
+            )}
+          </TabPanels>
         </Tabs>
       </Provider>
     );
diff --git a/packages/@react-stately/tabs/src/useTabsState.ts b/packages/@react-stately/tabs/src/useTabsState.ts
index 76aa68a9aa3..4701194ba4c 100644
--- a/packages/@react-stately/tabs/src/useTabsState.ts
+++ b/packages/@react-stately/tabs/src/useTabsState.ts
@@ -11,18 +11,24 @@
  */
 
 import {SingleSelectListState, useSingleSelectListState} from '@react-stately/list';
-import {TabsProps} from '@react-types/tabs';
+import {TabListProps} from '@react-types/tabs';
 import {useEffect} from 'react';
 
-export interface TabsState<T> extends SingleSelectListState<T> {}
+export interface TabListState<T> extends SingleSelectListState<T> {}
 
-export function useTabsState<T extends object>(props: TabsProps<T>): TabsState<T> {
+export function useTabListState<T extends object>(props: TabListProps<T>): TabListState<T> {
   let state = useSingleSelectListState<T>(props);
 
   useEffect(() => {
     // Ensure a tab is always selected (in case no selected key was specified or if selected item was deleted from collection)
-    if (state.selectionManager.isEmpty || !state.collection.getItem(state.selectedKey)) {
-      state.selectionManager.replaceSelection(state.collection.getFirstKey());
+    let selectedKey = state.selectedKey;
+    if (state.selectionManager.isEmpty || !state.collection.getItem(selectedKey)) {
+      selectedKey = state.collection.getFirstKey();
+      state.selectionManager.replaceSelection(selectedKey);
+    }
+
+    if (state.selectionManager.focusedKey == null) {
+      state.selectionManager.setFocusedKey(selectedKey);
     }
   }, [state.selectionManager, state.selectedKey, state.collection]);
 
diff --git a/packages/@react-types/tabs/src/index.d.ts b/packages/@react-types/tabs/src/index.d.ts
index 0b98768684a..97062165775 100644
--- a/packages/@react-types/tabs/src/index.d.ts
+++ b/packages/@react-types/tabs/src/index.d.ts
@@ -13,24 +13,24 @@
 import {
   AriaLabelingProps,
   CollectionBase,
+  CollectionChildren,
   DOMProps,
-  Node,
   Orientation,
   SingleSelection,
   StyleProps
 } from '@react-types/shared';
 import {Key} from 'react';
 
-export interface AriaTabProps<T> {
-  /** Collection node for the tab. */
-  item: Node<T>,
+export interface AriaTabProps {
+  /** The key of the tab. */
+  key: Key,
   /** Whether the tab should be disabled. */
   isDisabled?: boolean
 }
 
-export interface TabsProps<T> extends CollectionBase<T>, SingleSelection {}
+export interface TabListProps<T> extends CollectionBase<T>, SingleSelection {}
 
-export interface AriaTabsProps<T> extends TabsProps<T>, DOMProps, AriaLabelingProps {
+export interface AriaTabListProps<T> extends TabListProps<T>, DOMProps, AriaLabelingProps {
   /**
    * Whether tabs are activated automatically on focus or manually.
    * @default 'automatic'
@@ -48,22 +48,23 @@ export interface AriaTabsProps<T> extends TabsProps<T>, DOMProps, AriaLabelingPr
   isDisabled?: boolean
 }
 
-export interface SpectrumTabsProps<T> extends AriaTabsProps<T>, StyleProps {
-  /** Whether the Tabs should be displayed with a quiet style. */
+export interface AriaTabPanelProps extends DOMProps, AriaLabelingProps {}
+
+interface SpectrumTabsProps<T> extends SingleSelection, DOMProps, StyleProps {
+  items?: Iterable<T>,
+  keyboardActivation?: 'automatic' | 'manual',
+  orientation?: Orientation,
+  isDisabled?: boolean,
+  disabledKeys?: Iterable<Key>,
   isQuiet?: boolean,
-  /**
-   * Sets the amount of space between the Tab and the Tab rail.
-   * @default 'regular'
-   */
   density?: 'compact' | 'regular',
-  // overflowMode?: 'dropdown' | 'scrolling',
-  // isEmphasized?: boolean,
-  /** Whether Tabs are disabled. */
-  isDisabled?: boolean,
-  /** Handler that is called when the tab selection changes. */
-  onSelectionChange?: (selectedItem: Key) => void,
-  /** The currently selected Tab key in the collection (controlled). */
-  selectedKey?: Key,
-  /** The initial selected Tab key in the collection (uncontrolled). */
-  defaultSelectedKey?: Key
+  children: any
+}
+
+export interface SpectrumTabListProps<T> extends DOMProps, StyleProps {
+  children: CollectionChildren<T>
+}
+
+export interface SpectrumTabPanelsProps<T> extends DOMProps, StyleProps {
+  children: CollectionChildren<T>
 }