diff --git a/packages/js/components/changelog/add-collapsed-content-component b/packages/js/components/changelog/add-collapsed-content-component
new file mode 100644
index 00000000000..35d9f281a95
--- /dev/null
+++ b/packages/js/components/changelog/add-collapsed-content-component
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Adding basic CollapsibleContent component.
diff --git a/packages/js/components/src/collapsible-content/collapsible-content.tsx b/packages/js/components/src/collapsible-content/collapsible-content.tsx
new file mode 100644
index 00000000000..0bacc92dbe5
--- /dev/null
+++ b/packages/js/components/src/collapsible-content/collapsible-content.tsx
@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import { createElement, useState } from '@wordpress/element';
+import { Icon, chevronDown, chevronUp } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+
+export type CollapsedProps = {
+	initialCollapsed?: boolean;
+	toggleText: string;
+	children: React.ReactNode;
+} & React.HTMLAttributes< HTMLDivElement >;
+
+export const CollapsibleContent: React.FC< CollapsedProps > = ( {
+	initialCollapsed = true,
+	toggleText,
+	children,
+	...props
+}: CollapsedProps ) => {
+	const [ collapsed, setCollapsed ] = useState( initialCollapsed );
+	return (
+		<div
+			aria-expanded={ collapsed ? 'false' : 'true' }
+			className={ `woocommerce-collapsible-content` }
+		>
+			<button
+				className="woocommerce-collapsible-content__toggle"
+				onClick={ () => setCollapsed( ! collapsed ) }
+			>
+				<div>
+					<span>{ toggleText }</span>
+					<Icon
+						icon={ collapsed ? chevronDown : chevronUp }
+						size={ 16 }
+					/>
+				</div>
+			</button>
+			{ ! collapsed && (
+				<div
+					{ ...props }
+					className="woocommerce-collapsible-content__content"
+				>
+					{ children }
+				</div>
+			) }
+		</div>
+	);
+};
diff --git a/packages/js/components/src/collapsible-content/index.tsx b/packages/js/components/src/collapsible-content/index.tsx
new file mode 100644
index 00000000000..85a313ba929
--- /dev/null
+++ b/packages/js/components/src/collapsible-content/index.tsx
@@ -0,0 +1 @@
+export * from './collapsible-content';
diff --git a/packages/js/components/src/collapsible-content/stories/index.tsx b/packages/js/components/src/collapsible-content/stories/index.tsx
new file mode 100644
index 00000000000..faf411cda54
--- /dev/null
+++ b/packages/js/components/src/collapsible-content/stories/index.tsx
@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { createElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { CollapsibleContent } from '../';
+
+export const Basic: React.FC = () => {
+	return (
+		<CollapsibleContent toggleText="Advanced">
+			All this business in here is collapsed.
+		</CollapsibleContent>
+	);
+};
+
+export const Expanded: React.FC = () => {
+	return (
+		<CollapsibleContent toggleText="Advanced" initialCollapsed={ false }>
+			All this business in here is initially expanded.
+		</CollapsibleContent>
+	);
+};
+
+export default {
+	title: 'WooCommerce Admin/components/CollapsibleContent',
+	component: Basic,
+};
diff --git a/packages/js/components/src/collapsible-content/style.scss b/packages/js/components/src/collapsible-content/style.scss
new file mode 100644
index 00000000000..9f94c0d8832
--- /dev/null
+++ b/packages/js/components/src/collapsible-content/style.scss
@@ -0,0 +1,23 @@
+.woocommerce-collapsible-content {
+
+	.woocommerce-collapsible-content__toggle {
+		all: unset;
+		font-size: 13px;
+		color: #007CBA;
+		cursor: pointer;
+
+		> div {
+			display: flex;
+			align-items: center;
+		}
+	
+		svg {
+			fill: #007CBA;
+			margin-left: 2px;
+		}
+	}
+
+	.woocommerce-collapsible-content__content {
+		margin-top: $gap-large;
+	}
+}
diff --git a/packages/js/components/src/index.ts b/packages/js/components/src/index.ts
index 6e3623d0cd2..f57f49799ca 100644
--- a/packages/js/components/src/index.ts
+++ b/packages/js/components/src/index.ts
@@ -60,3 +60,4 @@ export { Badge } from './badge';
 export { DynamicForm } from './dynamic-form';
 export { default as TourKit } from './tour-kit';
 export * as TourKitTypes from './tour-kit/types';
+export { CollapsibleContent } from './collapsible-content';
diff --git a/packages/js/components/src/style.scss b/packages/js/components/src/style.scss
index d2b988ed1c2..7e578f134b9 100644
--- a/packages/js/components/src/style.scss
+++ b/packages/js/components/src/style.scss
@@ -44,3 +44,4 @@
 @import 'badge/style.scss';
 @import 'dynamic-form/style.scss';
 @import 'tour-kit/style.scss';
+@import 'collapsible-content/style.scss';