diff --git a/desktop/app/src/sandy-chrome/DesignComponentDemos.tsx b/desktop/app/src/sandy-chrome/DesignComponentDemos.tsx
index 17f2203c4..9612fe198 100644
--- a/desktop/app/src/sandy-chrome/DesignComponentDemos.tsx
+++ b/desktop/app/src/sandy-chrome/DesignComponentDemos.tsx
@@ -10,7 +10,7 @@
 import React from 'react';
 import {Typography, Card, Table, Collapse, Button, Tabs} from 'antd';
 import {Layout, Link} from '../ui';
-import {NUX, theme, Tracked, TrackingScope} from 'flipper-plugin';
+import {NUX, Panel, theme, Tracked, TrackingScope} from 'flipper-plugin';
 import reactElementToJSXString from 'react-element-to-jsx-string';
 import {CodeOutlined} from '@ant-design/icons';
 
@@ -300,6 +300,47 @@ const demos: PreviewProps[] = [
       ),
     },
   },
+  {
+    title: 'Panel',
+    description:
+      'A collapsible UI region. The collapsed state of the pane will automatically be persisted so that the collapsed state is restored the next time user visits the plugin again. Note that the children of a Panel should have some size, either a fixed or a natural size. Elements that grow to their parent size will become invisible.',
+    props: [
+      ['title', 'string', 'Title of the pane'],
+      [
+        'collapsible',
+        'boolean (true)',
+        "If set to false it won't be possible to collapse the panel",
+      ],
+      [
+        'collapsed',
+        'boolean (false)',
+        'The initial collapsed state of the panel.',
+      ],
+      [
+        'pad / gap',
+        'boolean / number (false)',
+        'See the pad property of Layout.Container, determines whether the pane contents will have some padding and space between the items. By default no padding / gap is applied.',
+      ],
+    ],
+    demos: {
+      'Two panels in a fixed height container': (
+        <Layout.Container>
+          <Panel title="Panel 1">Some content</Panel>
+          <Panel title="Panel 2 (collapsed)" collapsed>
+            {aFixedHeightBox}
+          </Panel>
+          <Panel
+            title="Panel 3 (not collapsible, pad, gap)"
+            collapsible={false}
+            pad
+            gap>
+            {aFixedHeightBox}
+            {aFixedHeightBox}
+          </Panel>
+        </Layout.Container>
+      ),
+    },
+  },
   {
     title: 'NUX',
     description:
diff --git a/desktop/flipper-plugin/src/ui/Panel.tsx b/desktop/flipper-plugin/src/ui/Panel.tsx
index cf14b9c4d..1ad40a4af 100644
--- a/desktop/flipper-plugin/src/ui/Panel.tsx
+++ b/desktop/flipper-plugin/src/ui/Panel.tsx
@@ -26,17 +26,20 @@ export const Panel: React.FC<{
    * Initial state for panel if it is collapsable
    */
   collapsed?: boolean;
-  pad: Spacing;
+  pad?: Spacing;
+  gap?: Spacing;
 }> = (props) => {
   const [collapsed, setCollapsed] = useLocalStorageState(
     `panel:${props.title}:collapsed`,
-    props.collapsed,
+    props.collapsible === false ? false : props.collapsed,
   );
 
   const toggle = useCallback(() => {
-    console.log('click');
+    if (props.collapsible === false) {
+      return;
+    }
     setCollapsed((c) => !c);
-  }, [setCollapsed]);
+  }, [setCollapsed, props.collapsible]);
 
   return (
     <TrackingScope scope={props.title}>
@@ -46,9 +49,11 @@ export const Panel: React.FC<{
         onChange={toggle}>
         <Collapse.Panel
           key={props.title}
-          collapsible={props.collapsible ? undefined : 'disabled'}
-          header={props.title}>
-          <Layout.Container pad={props.pad}>{props.children}</Layout.Container>
+          header={props.title}
+          showArrow={props.collapsible !== false}>
+          <Layout.Container pad={props.pad} gap={props.pad}>
+            {props.children}
+          </Layout.Container>
         </Collapse.Panel>
       </StyledCollapse>
     </TrackingScope>
diff --git a/docs/extending/flipper-plugin.mdx b/docs/extending/flipper-plugin.mdx
index dc4c66fc6..f6f06c716 100644
--- a/docs/extending/flipper-plugin.mdx
+++ b/docs/extending/flipper-plugin.mdx
@@ -810,9 +810,21 @@ See `View > Flipper Style Guide` inside the Flipper application for more details
 ### ElementSearchResultSet
 ### ElementsInspectorElement
 ### ElementsInspectorProps
+
 ### Panel
 
-Coming soon.
+A collapsible UI region. The collapsed state of the pane will automatically be persisted so that the collapsed state is restored the next time user visits the plugin again. Note that the children of a Panel should have some size, either a fixed or a natural size. Elements that grow to their parent size will become invisible.
+
+For demos and property documentation see the 'Flipper style guide'.
+
+### Tabs
+### Tab
+
+The `Tabs` and `Tab` component re-expose the TabControl as provided by Antd, and support the same properties. See [official docs](https://ant.design/components/tabs/).
+
+The following additional properties are supported:
+
+* `grow`. If set, the tab control will use all available vertical space. By default `false`.
 
 ### DataList