2 files changed, 24 insertions, 1 deletions
diff --git a/packages/ui/src/components/collapsible.css b/packages/ui/src/components/collapsible.css
index 34699fc20..3d8c8ebea 100644
--- a/packages/ui/src/components/collapsible.css
+++ b/packages/ui/src/components/collapsible.css
@@ -57,6 +57,27 @@
     /*   animation: slideDown 250ms ease-out; */
     /* } */
   }
+
+  &[data-variant="ghost"] {
+    background-color: transparent;
+    border: none;
+
+    > [data-slot="collapsible-trigger"] {
+      background-color: transparent;
+      border: none;
+      padding: 0;
+
+      /* &:hover { */
+      /*   color: var(--text-strong); */
+      /* } */
+      &:focus-visible {
+        outline: none;
+      }
+      &[data-disabled] {
+        cursor: not-allowed;
+      }
+    }
+  }
 }
 
 @keyframes slideDown {
diff --git a/packages/ui/src/components/collapsible.tsx b/packages/ui/src/components/collapsible.tsx
index d2e4a139b..17fad0b9e 100644
--- a/packages/ui/src/components/collapsible.tsx
+++ b/packages/ui/src/components/collapsible.tsx
@@ -5,13 +5,15 @@ import { Icon } from "./icon"
 export interface CollapsibleProps extends ParentProps<CollapsibleRootProps> {
   class?: string
   classList?: ComponentProps<"div">["classList"]
+  variant?: "normal" | "ghost"
 }
 
 function CollapsibleRoot(props: CollapsibleProps) {
-  const [local, others] = splitProps(props, ["class", "classList"])
+  const [local, others] = splitProps(props, ["class", "classList", "variant"])
   return (
     <Kobalte
       data-component="collapsible"
+      data-variant={local.variant || "normal"}
       classList={{
         ...(local.classList ?? {}),
         [local.class ?? ""]: !!local.class,