diff --git a/docs/snippets/common/storybook-main-ref-remote.js.mdx b/docs/snippets/common/storybook-main-ref-remote.js.mdx
index ce4a1588a47..24dfcad4131 100644
--- a/docs/snippets/common/storybook-main-ref-remote.js.mdx
+++ b/docs/snippets/common/storybook-main-ref-remote.js.mdx
@@ -6,7 +6,8 @@ module.exports={
   refs: {
    'design-system': {
      title: "Storybook Design System",
-     url: "https://5ccbc373887ca40020446347-yldsqjoxzb.chromatic.com"
+     url: "https://5ccbc373887ca40020446347-yldsqjoxzb.chromatic.com",
+     expanded: false // optional, true by default
    }
   }
 }
diff --git a/lib/api/src/modules/refs.ts b/lib/api/src/modules/refs.ts
index 834e47112fb..e352b513c33 100644
--- a/lib/api/src/modules/refs.ts
+++ b/lib/api/src/modules/refs.ts
@@ -42,6 +42,7 @@ export interface ComposedRef {
   title?: string;
   url: string;
   type?: 'auto-inject' | 'unknown' | 'lazy' | 'server-checked';
+  expanded?: boolean;
   stories: StoriesHash;
   versions?: Versions;
   loginUrl?: string;
@@ -53,7 +54,15 @@ export interface ComposedRef {
 export type ComposedRefUpdate = Partial<
   Pick<
     ComposedRef,
-    'title' | 'type' | 'stories' | 'versions' | 'loginUrl' | 'version' | 'ready' | 'error'
+    | 'title'
+    | 'type'
+    | 'expanded'
+    | 'stories'
+    | 'versions'
+    | 'loginUrl'
+    | 'version'
+    | 'ready'
+    | 'error'
   >
 >;
 
diff --git a/lib/ui/src/components/sidebar/Refs.tsx b/lib/ui/src/components/sidebar/Refs.tsx
index 3e92178489f..625a1f1a110 100644
--- a/lib/ui/src/components/sidebar/Refs.tsx
+++ b/lib/ui/src/components/sidebar/Refs.tsx
@@ -110,6 +110,7 @@ export const Ref: FunctionComponent<RefType & RefProps> = React.memo((props) =>
     setHighlighted,
     loginUrl,
     type,
+    expanded = true,
     ready,
     error,
   } = props;
@@ -124,7 +125,7 @@ export const Ref: FunctionComponent<RefType & RefProps> = React.memo((props) =>
   const isAuthRequired = !!loginUrl && length === 0;
 
   const state = getStateType(isLoading, isAuthRequired, isError, isEmpty);
-  const [isExpanded, setExpanded] = useState<boolean>(true);
+  const [isExpanded, setExpanded] = useState<boolean>(expanded);
   const handleClick = useCallback(() => setExpanded((value) => !value), [setExpanded]);
 
   const setHighlightedItemId = useCallback((itemId: string) => setHighlighted({ itemId, refId }), [