From 3f2c261b1f15d8cbee323627a61505678ddeb872 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Wed, 8 Jan 2025 23:11:36 +0200
Subject: [PATCH] chore(clerk-js): Initially render Keyless UI as collapsed

---
 .changeset/fluffy-peas-beam.md                              | 5 +++++
 packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/fluffy-peas-beam.md

diff --git a/.changeset/fluffy-peas-beam.md b/.changeset/fluffy-peas-beam.md
new file mode 100644
index 00000000000..afd2da6422e
--- /dev/null
+++ b/.changeset/fluffy-peas-beam.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Initially render Keyless UI as collapsed.
diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx
index b36262632bb..ea13b3fe99c 100644
--- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx
@@ -21,7 +21,7 @@ const buttonIdentifier = `${buttonIdentifierPrefix}-button`;
 const contentIdentifier = `${buttonIdentifierPrefix}-content`;
 
 const _KeylessPrompt = (_props: KeylessPromptProps) => {
-  const [isExpanded, setIsExpanded] = useState(true);
+  const [isExpanded, setIsExpanded] = useState(false);
   const claimed = Boolean(useRevalidateEnvironment().authConfig.claimedAt);
 
   const isForcedExpanded = claimed || isExpanded;