From c3f6b68ffdc5e1249a8c86873af097d0c45fe0af Mon Sep 17 00:00:00 2001
From: Saqib Ansari <nextchamp.saqib@gmail.com>
Date: Sun, 31 May 2026 12:23:33 +0530
Subject: [PATCH 1/3] feat: `SettingsDialog`

---
 .../SettingsDialog/SettingsDialog.vue         | 51 +++++++++++++++++++
 src/components/SettingsDialog/index.ts        |  2 +
 src/components/SettingsDialog/types.ts        |  7 +++
 src/index.ts                                  |  1 +
 4 files changed, 61 insertions(+)
 create mode 100644 src/components/SettingsDialog/SettingsDialog.vue
 create mode 100644 src/components/SettingsDialog/index.ts
 create mode 100644 src/components/SettingsDialog/types.ts

diff --git a/src/components/SettingsDialog/SettingsDialog.vue b/src/components/SettingsDialog/SettingsDialog.vue
new file mode 100644
index 000000000..1ff0db1cc
--- /dev/null
+++ b/src/components/SettingsDialog/SettingsDialog.vue
@@ -0,0 +1,51 @@
+<template>
+  <Dialog v-model="modelValue" :size="size" bare>
+    <div class="flex" style="height: calc(100vh - 12rem)">
+      <Sidebar :sections="sidebarSections" disable-collapse />
+      <div class="flex h-full flex-1 flex-col overflow-hidden">
+        <slot name="tab-content" :tab="activeTab">
+          <component v-if="activeTab?.component" :is="activeTab.component" />
+        </slot>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, shallowRef } from 'vue'
+import { Dialog } from '../Dialog'
+import { Sidebar } from '../Sidebar'
+import type { DialogSize } from '../Dialog/types'
+import type { SettingsItem, SettingsSection } from './types'
+
+const props = withDefaults(
+  defineProps<{
+    sections: SettingsSection[]
+    title?: string
+    size?: DialogSize
+  }>(),
+  {
+    size: '4xl',
+  },
+)
+
+const modelValue = defineModel<boolean>({ default: false })
+
+const allItems = computed(() => props.sections.flatMap((s) => s.items))
+
+const activeTab = shallowRef<SettingsItem | undefined>(allItems.value[0])
+
+const sidebarSections = computed(() =>
+  props.sections.map((section) => ({
+    ...section,
+    items: section.items.map((item) => ({
+      ...item,
+      isActive: activeTab.value?.label === item.label,
+      onClick: () => {
+        activeTab.value = item
+        item.onClick?.()
+      },
+    })),
+  })),
+)
+</script>
diff --git a/src/components/SettingsDialog/index.ts b/src/components/SettingsDialog/index.ts
new file mode 100644
index 000000000..713598c8d
--- /dev/null
+++ b/src/components/SettingsDialog/index.ts
@@ -0,0 +1,2 @@
+export { default as SettingsDialog } from './SettingsDialog.vue'
+export type { SettingsItem, SettingsSection } from './types'
diff --git a/src/components/SettingsDialog/types.ts b/src/components/SettingsDialog/types.ts
new file mode 100644
index 000000000..fad88e408
--- /dev/null
+++ b/src/components/SettingsDialog/types.ts
@@ -0,0 +1,7 @@
+import type { Component } from 'vue'
+import type { SidebarItemProps, SidebarSectionProps } from '../Sidebar/types'
+
+export type SettingsItem = SidebarItemProps & { component?: Component }
+export type SettingsSection = Omit<SidebarSectionProps, 'items'> & {
+  items: SettingsItem[]
+}
diff --git a/src/index.ts b/src/index.ts
index b687c166c..fb7b7893f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -85,6 +85,7 @@ export * from './components/Tree'
 export { default as FrappeUIProvider } from './components/Provider/FrappeUIProvider.vue'
 export * from './components/Sidebar/index.ts'
 export { default as ConfirmDialog } from './components/ConfirmDialog.vue'
+export * from './components/SettingsDialog'
 
 // grid layout
 export { default as GridLayout } from './components/VueGridLayout/Layout.vue'

From c60091a318e0986ac98e377fa24d1b432c08a438 Mon Sep 17 00:00:00 2001
From: Saqib Ansari <nextchamp.saqib@gmail.com>
Date: Mon, 1 Jun 2026 23:25:05 +0530
Subject: [PATCH 2/3] refactor: export syntax highligher styles

---
 package.json                                  |   5 +-
 .../components/CodeBlockComponent.vue         | 198 +-----------------
 src/components/TextEditor/hljs-github.css     | 197 +++++++++++++++++
 3 files changed, 205 insertions(+), 195 deletions(-)
 create mode 100644 src/components/TextEditor/hljs-github.css

diff --git a/package.json b/package.json
index 1605273dd..3bc291659 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,9 @@
     "./editor-style.css": {
       "import": "./src/components/TextEditor/style.css"
     },
+    "./hljs-theme.css": {
+      "import": "./src/components/TextEditor/hljs-github.css"
+    },
     "./tsconfig.base.json": {
       "types": "./tsconfig.base.json",
       "default": "./tsconfig.base.json"
@@ -188,4 +191,4 @@
   "lint-staged": {
     "*.{js,css,md,vue}": "prettier --write"
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/TextEditor/components/CodeBlockComponent.vue b/src/components/TextEditor/components/CodeBlockComponent.vue
index ce57663cf..5714c1ac6 100644
--- a/src/components/TextEditor/components/CodeBlockComponent.vue
+++ b/src/components/TextEditor/components/CodeBlockComponent.vue
@@ -1,7 +1,7 @@
 <template>
   <node-view-wrapper>
     <div class="code-block-container">
-      <pre><code><node-view-content /></code></pre>
+      <pre class="hljs-pre"><code><node-view-content /></code></pre>
       <select
         v-if="isEditable"
         class="language-selector form-select py-0"
@@ -70,6 +70,8 @@ export default {
 </script>
 
 <style>
+@import '../hljs-github.css';
+
 /* CodeBlock styles */
 .code-block {
   position: relative;
@@ -97,197 +99,5 @@ export default {
   user-select: none;
 }
 
-/* ── pre shell ────────────────────────────────────────────────── */
-.ProseMirror pre {
-  background: #f6f8fa;
-  color: #24292e;
-  font-family:
-    ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Mono', 'Source Code Pro', 'Fira Mono',
-    'Droid Sans Mono', 'Consolas', 'Courier New', monospace;
-  font-size: 12px;
-  line-height: 1.7;
-  padding: 0.75rem 1rem;
-  border-radius: 0.75rem;
-  border: 1px solid var(--outline-gray-2);
-  caret-color: #24292e;
-}
-
-.ProseMirror pre code {
-  color: inherit;
-  padding: 0;
-  background: none;
-  font-size: inherit;
-}
-
-/* ── highlight.js — GitHub light ─────────────────────────────── */
-.ProseMirror pre .hljs-doctag,
-.ProseMirror pre .hljs-keyword,
-.ProseMirror pre .hljs-meta .hljs-keyword,
-.ProseMirror pre .hljs-template-tag,
-.ProseMirror pre .hljs-template-variable,
-.ProseMirror pre .hljs-type,
-.ProseMirror pre .hljs-variable.language_ {
-  color: #d73a49;
-}
-
-.ProseMirror pre .hljs-title,
-.ProseMirror pre .hljs-title.class_,
-.ProseMirror pre .hljs-title.class_.inherited__,
-.ProseMirror pre .hljs-title.function_ {
-  color: #6f42c1;
-}
-
-.ProseMirror pre .hljs-attr,
-.ProseMirror pre .hljs-attribute,
-.ProseMirror pre .hljs-literal,
-.ProseMirror pre .hljs-meta,
-.ProseMirror pre .hljs-number,
-.ProseMirror pre .hljs-operator,
-.ProseMirror pre .hljs-variable,
-.ProseMirror pre .hljs-selector-attr,
-.ProseMirror pre .hljs-selector-class,
-.ProseMirror pre .hljs-selector-id {
-  color: #005cc5;
-}
-
-.ProseMirror pre .hljs-regexp,
-.ProseMirror pre .hljs-string,
-.ProseMirror pre .hljs-meta .hljs-string {
-  color: #032f62;
-}
-
-.ProseMirror pre .hljs-built_in,
-.ProseMirror pre .hljs-symbol {
-  color: #e36209;
-}
-
-.ProseMirror pre .hljs-comment,
-.ProseMirror pre .hljs-code,
-.ProseMirror pre .hljs-formula {
-  color: #6a737d;
-}
-
-.ProseMirror pre .hljs-name,
-.ProseMirror pre .hljs-quote,
-.ProseMirror pre .hljs-selector-tag,
-.ProseMirror pre .hljs-selector-pseudo {
-  color: #22863a;
-}
-
-.ProseMirror pre .hljs-subst {
-  color: #24292e;
-}
-.ProseMirror pre .hljs-section {
-  color: #005cc5;
-  font-weight: bold;
-}
-.ProseMirror pre .hljs-bullet {
-  color: #735c0f;
-}
-.ProseMirror pre .hljs-emphasis {
-  color: #24292e;
-  font-style: italic;
-}
-.ProseMirror pre .hljs-strong {
-  color: #24292e;
-  font-weight: 700;
-}
-.ProseMirror pre .hljs-addition {
-  color: #22863a;
-  background-color: #f0fff4;
-}
-.ProseMirror pre .hljs-deletion {
-  color: #b31d28;
-  background-color: #ffeef0;
-}
-
-/* ── pre shell — dark mode ───────────────────────────────────── */
-[data-theme='dark'] .ProseMirror pre {
-  background: #0d1117;
-  color: #c9d1d9;
-  caret-color: #c9d1d9;
-}
-
-/* ── highlight.js — GitHub dark ──────────────────────────────── */
-[data-theme='dark'] .ProseMirror pre .hljs-doctag,
-[data-theme='dark'] .ProseMirror pre .hljs-keyword,
-[data-theme='dark'] .ProseMirror pre .hljs-meta .hljs-keyword,
-[data-theme='dark'] .ProseMirror pre .hljs-template-tag,
-[data-theme='dark'] .ProseMirror pre .hljs-template-variable,
-[data-theme='dark'] .ProseMirror pre .hljs-type,
-[data-theme='dark'] .ProseMirror pre .hljs-variable.language_ {
-  color: #ff7b72;
-}
-
-[data-theme='dark'] .ProseMirror pre .hljs-title,
-[data-theme='dark'] .ProseMirror pre .hljs-title.class_,
-[data-theme='dark'] .ProseMirror pre .hljs-title.class_.inherited__,
-[data-theme='dark'] .ProseMirror pre .hljs-title.function_ {
-  color: #d2a8ff;
-}
-
-[data-theme='dark'] .ProseMirror pre .hljs-attr,
-[data-theme='dark'] .ProseMirror pre .hljs-attribute,
-[data-theme='dark'] .ProseMirror pre .hljs-literal,
-[data-theme='dark'] .ProseMirror pre .hljs-meta,
-[data-theme='dark'] .ProseMirror pre .hljs-number,
-[data-theme='dark'] .ProseMirror pre .hljs-operator,
-[data-theme='dark'] .ProseMirror pre .hljs-variable,
-[data-theme='dark'] .ProseMirror pre .hljs-selector-attr,
-[data-theme='dark'] .ProseMirror pre .hljs-selector-class,
-[data-theme='dark'] .ProseMirror pre .hljs-selector-id {
-  color: #79c0ff;
-}
-
-[data-theme='dark'] .ProseMirror pre .hljs-regexp,
-[data-theme='dark'] .ProseMirror pre .hljs-string,
-[data-theme='dark'] .ProseMirror pre .hljs-meta .hljs-string {
-  color: #a5d6ff;
-}
-
-[data-theme='dark'] .ProseMirror pre .hljs-built_in,
-[data-theme='dark'] .ProseMirror pre .hljs-symbol {
-  color: #ffa657;
-}
-
-[data-theme='dark'] .ProseMirror pre .hljs-comment,
-[data-theme='dark'] .ProseMirror pre .hljs-code,
-[data-theme='dark'] .ProseMirror pre .hljs-formula {
-  color: #8b949e;
-}
-
-[data-theme='dark'] .ProseMirror pre .hljs-name,
-[data-theme='dark'] .ProseMirror pre .hljs-quote,
-[data-theme='dark'] .ProseMirror pre .hljs-selector-tag,
-[data-theme='dark'] .ProseMirror pre .hljs-selector-pseudo {
-  color: #7ee787;
-}
-
-[data-theme='dark'] .ProseMirror pre .hljs-subst {
-  color: #c9d1d9;
-}
-[data-theme='dark'] .ProseMirror pre .hljs-section {
-  color: #1f6feb;
-  font-weight: bold;
-}
-[data-theme='dark'] .ProseMirror pre .hljs-bullet {
-  color: #f2cc60;
-}
-[data-theme='dark'] .ProseMirror pre .hljs-emphasis {
-  color: #c9d1d9;
-  font-style: italic;
-}
-[data-theme='dark'] .ProseMirror pre .hljs-strong {
-  color: #c9d1d9;
-  font-weight: 700;
-}
-[data-theme='dark'] .ProseMirror pre .hljs-addition {
-  color: #aff5b4;
-  background-color: #033a16;
-}
-[data-theme='dark'] .ProseMirror pre .hljs-deletion {
-  color: #ffdcd7;
-  background-color: #67060c;
-}
+/* ── pre shell (editor-specific overrides) ──────────────────── */
 </style>
diff --git a/src/components/TextEditor/hljs-github.css b/src/components/TextEditor/hljs-github.css
new file mode 100644
index 000000000..88391184c
--- /dev/null
+++ b/src/components/TextEditor/hljs-github.css
@@ -0,0 +1,197 @@
+/* GitHub light / dark syntax-highlight theme for highlight.js.
+   Selector-agnostic: styles any <pre> containing hljs-annotated tokens.
+   Used by both the TipTap editor (CodeBlockComponent) and the chat Markdown renderer. */
+
+/* ── pre shell ────────────────────────────────────────────────── */
+.hljs-pre {
+  background: #f6f8fa;
+  color: #24292e;
+  font-family:
+    ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
+    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Mono', 'Source Code Pro', 'Fira Mono',
+    'Droid Sans Mono', 'Consolas', 'Courier New', monospace;
+  font-size: 12px;
+  line-height: 1.7;
+  padding: 0.75rem 1rem;
+  border-radius: 0.75rem;
+  border: 1px solid var(--outline-gray-2);
+  caret-color: #24292e;
+}
+
+.hljs-pre code {
+  color: inherit;
+  padding: 0;
+  background: none;
+  font-size: inherit;
+}
+
+/* ── GitHub light tokens ──────────────────────────────────────── */
+.hljs-pre .hljs-doctag,
+.hljs-pre .hljs-keyword,
+.hljs-pre .hljs-meta .hljs-keyword,
+.hljs-pre .hljs-template-tag,
+.hljs-pre .hljs-template-variable,
+.hljs-pre .hljs-type,
+.hljs-pre .hljs-variable.language_ {
+  color: #d73a49;
+}
+
+.hljs-pre .hljs-title,
+.hljs-pre .hljs-title.class_,
+.hljs-pre .hljs-title.class_.inherited__,
+.hljs-pre .hljs-title.function_ {
+  color: #6f42c1;
+}
+
+.hljs-pre .hljs-attr,
+.hljs-pre .hljs-attribute,
+.hljs-pre .hljs-literal,
+.hljs-pre .hljs-meta,
+.hljs-pre .hljs-number,
+.hljs-pre .hljs-operator,
+.hljs-pre .hljs-variable,
+.hljs-pre .hljs-selector-attr,
+.hljs-pre .hljs-selector-class,
+.hljs-pre .hljs-selector-id {
+  color: #005cc5;
+}
+
+.hljs-pre .hljs-regexp,
+.hljs-pre .hljs-string,
+.hljs-pre .hljs-meta .hljs-string {
+  color: #032f62;
+}
+
+.hljs-pre .hljs-built_in,
+.hljs-pre .hljs-symbol {
+  color: #e36209;
+}
+
+.hljs-pre .hljs-comment,
+.hljs-pre .hljs-code,
+.hljs-pre .hljs-formula {
+  color: #6a737d;
+}
+
+.hljs-pre .hljs-name,
+.hljs-pre .hljs-quote,
+.hljs-pre .hljs-selector-tag,
+.hljs-pre .hljs-selector-pseudo {
+  color: #22863a;
+}
+
+.hljs-pre .hljs-subst {
+  color: #24292e;
+}
+.hljs-pre .hljs-section {
+  color: #005cc5;
+  font-weight: bold;
+}
+.hljs-pre .hljs-bullet {
+  color: #735c0f;
+}
+.hljs-pre .hljs-emphasis {
+  color: #24292e;
+  font-style: italic;
+}
+.hljs-pre .hljs-strong {
+  color: #24292e;
+  font-weight: 700;
+}
+.hljs-pre .hljs-addition {
+  color: #22863a;
+  background-color: #f0fff4;
+}
+.hljs-pre .hljs-deletion {
+  color: #b31d28;
+  background-color: #ffeef0;
+}
+
+/* ── pre shell — dark mode ───────────────────────────────────── */
+[data-theme='dark'] .hljs-pre {
+  background: #0d1117;
+  color: #c9d1d9;
+  caret-color: #c9d1d9;
+}
+
+/* ── GitHub dark tokens ──────────────────────────────────────── */
+[data-theme='dark'] .hljs-pre .hljs-doctag,
+[data-theme='dark'] .hljs-pre .hljs-keyword,
+[data-theme='dark'] .hljs-pre .hljs-meta .hljs-keyword,
+[data-theme='dark'] .hljs-pre .hljs-template-tag,
+[data-theme='dark'] .hljs-pre .hljs-template-variable,
+[data-theme='dark'] .hljs-pre .hljs-type,
+[data-theme='dark'] .hljs-pre .hljs-variable.language_ {
+  color: #ff7b72;
+}
+
+[data-theme='dark'] .hljs-pre .hljs-title,
+[data-theme='dark'] .hljs-pre .hljs-title.class_,
+[data-theme='dark'] .hljs-pre .hljs-title.class_.inherited__,
+[data-theme='dark'] .hljs-pre .hljs-title.function_ {
+  color: #d2a8ff;
+}
+
+[data-theme='dark'] .hljs-pre .hljs-attr,
+[data-theme='dark'] .hljs-pre .hljs-attribute,
+[data-theme='dark'] .hljs-pre .hljs-literal,
+[data-theme='dark'] .hljs-pre .hljs-meta,
+[data-theme='dark'] .hljs-pre .hljs-number,
+[data-theme='dark'] .hljs-pre .hljs-operator,
+[data-theme='dark'] .hljs-pre .hljs-variable,
+[data-theme='dark'] .hljs-pre .hljs-selector-attr,
+[data-theme='dark'] .hljs-pre .hljs-selector-class,
+[data-theme='dark'] .hljs-pre .hljs-selector-id {
+  color: #79c0ff;
+}
+
+[data-theme='dark'] .hljs-pre .hljs-regexp,
+[data-theme='dark'] .hljs-pre .hljs-string,
+[data-theme='dark'] .hljs-pre .hljs-meta .hljs-string {
+  color: #a5d6ff;
+}
+
+[data-theme='dark'] .hljs-pre .hljs-built_in,
+[data-theme='dark'] .hljs-pre .hljs-symbol {
+  color: #ffa657;
+}
+
+[data-theme='dark'] .hljs-pre .hljs-comment,
+[data-theme='dark'] .hljs-pre .hljs-code,
+[data-theme='dark'] .hljs-pre .hljs-formula {
+  color: #8b949e;
+}
+
+[data-theme='dark'] .hljs-pre .hljs-name,
+[data-theme='dark'] .hljs-pre .hljs-quote,
+[data-theme='dark'] .hljs-pre .hljs-selector-tag,
+[data-theme='dark'] .hljs-pre .hljs-selector-pseudo {
+  color: #7ee787;
+}
+
+[data-theme='dark'] .hljs-pre .hljs-subst {
+  color: #c9d1d9;
+}
+[data-theme='dark'] .hljs-pre .hljs-section {
+  color: #1f6feb;
+  font-weight: bold;
+}
+[data-theme='dark'] .hljs-pre .hljs-bullet {
+  color: #f2cc60;
+}
+[data-theme='dark'] .hljs-pre .hljs-emphasis {
+  color: #c9d1d9;
+  font-style: italic;
+}
+[data-theme='dark'] .hljs-pre .hljs-strong {
+  color: #c9d1d9;
+  font-weight: 700;
+}
+[data-theme='dark'] .hljs-pre .hljs-addition {
+  color: #aff5b4;
+  background-color: #033a16;
+}
+[data-theme='dark'] .hljs-pre .hljs-deletion {
+  color: #ffdcd7;
+  background-color: #67060c;
+}

From 1d97171bac85a25f483a679f2f5c2c128fd33a17 Mon Sep 17 00:00:00 2001
From: Saqib Ansari <nextchamp.saqib@gmail.com>
Date: Wed, 3 Jun 2026 16:22:24 +0530
Subject: [PATCH 3/3] feat: add `SettingsDialog` and `SettingsPanel` components
 with API documentation and tests

---
 .../SettingsDialog/SettingsDialog.api.md      | 89 ++++++++++++++++++
 .../SettingsDialog/SettingsDialog.cy.ts       | 90 +++++++++++++++++++
 .../SettingsDialog/SettingsDialog.md          | 31 +++++++
 .../SettingsDialog/SettingsDialog.vue         | 26 +++---
 .../SettingsDialog/SettingsPanel.cy.ts        | 40 +++++++++
 .../SettingsDialog/SettingsPanel.vue          | 34 +++++++
 src/components/SettingsDialog/index.ts        |  8 +-
 .../stories/CustomTabContent.vue              | 34 +++++++
 .../SettingsDialog/stories/Default.vue        | 29 ++++++
 .../SettingsDialog/stories/PanelBasic.vue     | 20 +++++
 .../stories/panels/GeneralPanel.vue           | 18 ++++
 .../stories/panels/MembersPanel.vue           | 15 ++++
 .../stories/panels/ProfilePanel.vue           | 22 +++++
 src/components/SettingsDialog/types.ts        | 39 +++++++-
 14 files changed, 478 insertions(+), 17 deletions(-)
 create mode 100644 src/components/SettingsDialog/SettingsDialog.api.md
 create mode 100644 src/components/SettingsDialog/SettingsDialog.cy.ts
 create mode 100644 src/components/SettingsDialog/SettingsDialog.md
 create mode 100644 src/components/SettingsDialog/SettingsPanel.cy.ts
 create mode 100644 src/components/SettingsDialog/SettingsPanel.vue
 create mode 100644 src/components/SettingsDialog/stories/CustomTabContent.vue
 create mode 100644 src/components/SettingsDialog/stories/Default.vue
 create mode 100644 src/components/SettingsDialog/stories/PanelBasic.vue
 create mode 100644 src/components/SettingsDialog/stories/panels/GeneralPanel.vue
 create mode 100644 src/components/SettingsDialog/stories/panels/MembersPanel.vue
 create mode 100644 src/components/SettingsDialog/stories/panels/ProfilePanel.vue

diff --git a/src/components/SettingsDialog/SettingsDialog.api.md b/src/components/SettingsDialog/SettingsDialog.api.md
new file mode 100644
index 000000000..b9a0a3679
--- /dev/null
+++ b/src/components/SettingsDialog/SettingsDialog.api.md
@@ -0,0 +1,89 @@
+<!-- Auto Generated by scripts/propsgen.ts -->
+<script setup>
+  import PropsTable from '@/components/Docs/PropsTable.vue'
+  import SlotsTable from '@/components/Docs/SlotsTable.vue'
+  import EmitsTable from '@/components/Docs/EmitsTable.vue'
+
+  const settingsDialogProps = [
+  {
+    name: 'sections',
+    description: 'Sidebar sections to render. Each item may carry a `component` that is\nshown in the content area when the item is selected.',
+    required: true,
+    type: 'SettingsSection[]'
+  },
+  {
+    name: 'size',
+    description: 'Max-width size of the dialog.',
+    required: false,
+    type: 'DialogSize',
+    default: '"4xl"'
+  },
+  {
+    name: 'modelValue',
+    description: 'Controls whether the dialog is open.',
+    required: false,
+    type: 'boolean',
+    default: 'false'
+  }
+]
+
+  const settingsDialogSlots = [
+  {
+    name: 'tab-content',
+    description: 'Overrides the content area. Receives the active `{ tab }`.',
+    type: '{ tab: SettingsTab | undefined; }'
+  }
+]
+
+  const settingsDialogEmits = [
+  {
+    name: 'update:modelValue',
+    description: 'Fired when the model value changes.',
+    type: '[value: boolean]'
+  }
+]
+
+  const settingsPanelProps = [
+  {
+    name: 'title',
+    description: 'Heading rendered at the top of the panel.',
+    required: true,
+    type: 'string'
+  },
+  {
+    name: 'description',
+    description: 'Optional sub-heading rendered below the title.',
+    required: false,
+    type: 'string'
+  }
+]
+
+  const settingsPanelSlots = [
+  {
+    name: 'default',
+    description: 'Panel body — the settings controls for this tab.',
+    type: 'any'
+  },
+  {
+    name: 'actions',
+    description: 'Actions rendered on the right of the panel header.',
+    type: 'any'
+  }
+]
+</script>
+## API Reference
+
+### SettingsDialog
+
+<PropsTable name="SettingsDialog" :data="settingsDialogProps"/> 
+
+<SlotsTable :data="settingsDialogSlots"/> 
+
+<EmitsTable :data="settingsDialogEmits"/> 
+
+### SettingsPanel
+
+<PropsTable folder="SettingsDialog" name="SettingsPanel" :data="settingsPanelProps"/> 
+
+<SlotsTable :data="settingsPanelSlots"/> 
+
diff --git a/src/components/SettingsDialog/SettingsDialog.cy.ts b/src/components/SettingsDialog/SettingsDialog.cy.ts
new file mode 100644
index 000000000..4f4b02441
--- /dev/null
+++ b/src/components/SettingsDialog/SettingsDialog.cy.ts
@@ -0,0 +1,90 @@
+import { defineComponent, h } from 'vue'
+import SettingsDialog from './SettingsDialog.vue'
+import type { SettingsSection } from './types'
+
+const panel = (text: string) =>
+  defineComponent({ render: () => h('div', { class: 'tab-panel' }, text) })
+
+function makeSections(onProfileClick?: () => void): SettingsSection[] {
+  return [
+    {
+      label: 'Account',
+      items: [
+        {
+          label: 'Profile',
+          icon: 'lucide-circle-user',
+          component: panel('Profile content'),
+          onClick: onProfileClick,
+        },
+      ],
+    },
+    {
+      label: 'Workspace',
+      items: [
+        { label: 'General', icon: 'lucide-settings', component: panel('General content') },
+        { label: 'Members', icon: 'lucide-users', component: panel('Members content') },
+      ],
+    },
+  ]
+}
+
+const sections = makeSections()
+
+describe('SettingsDialog', () => {
+  it('does not render while closed; renders when open (v-model)', () => {
+    cy.mount(SettingsDialog, { props: { modelValue: false, sections } })
+    cy.get('[role=dialog]').should('not.exist')
+
+    cy.mount(SettingsDialog, { props: { modelValue: true, sections } })
+    cy.get('[role=dialog]').should('exist')
+  })
+
+  it('renders all section items in the sidebar', () => {
+    cy.mount(SettingsDialog, { props: { modelValue: true, sections } })
+    cy.get('[role=dialog]').within(() => {
+      cy.contains('Profile').should('exist')
+      cy.contains('General').should('exist')
+      cy.contains('Members').should('exist')
+    })
+  })
+
+  it('shows the first item content by default', () => {
+    cy.mount(SettingsDialog, { props: { modelValue: true, sections } })
+    cy.get('[role=dialog] .tab-panel').should('have.text', 'Profile content')
+  })
+
+  it('switches the active tab on click and invokes the item onClick', () => {
+    const onProfileClick = cy.stub().as('onProfileClick')
+    cy.mount(SettingsDialog, {
+      props: { modelValue: true, sections: makeSections(onProfileClick) },
+    })
+    cy.get('[role=dialog] .tab-panel').should('have.text', 'Profile content')
+
+    cy.get('[role=dialog]').contains('Members').click()
+    cy.get('[role=dialog] .tab-panel').should('have.text', 'Members content')
+
+    cy.get('[role=dialog]').contains('Profile').click()
+    cy.get('@onProfileClick').should('have.been.called')
+  })
+
+  it('overrides the content area via the #tab-content slot', () => {
+    cy.mount(SettingsDialog, {
+      props: { modelValue: true, sections },
+      slots: {
+        'tab-content': (slotProps: { tab?: { label: string } }) =>
+          h('div', { class: 'custom-content' }, `Custom: ${slotProps.tab?.label}`),
+      },
+    })
+    cy.get('[role=dialog] .custom-content').should('have.text', 'Custom: Profile')
+  })
+
+  it('emits update:modelValue when the dialog is closed', () => {
+    const onUpdate = cy.spy().as('onUpdate')
+    cy.mount(SettingsDialog, {
+      props: { modelValue: true, sections, 'onUpdate:modelValue': onUpdate },
+    })
+    cy.get('[role=dialog]').should('exist')
+    cy.get('body').type('{esc}')
+    cy.get('@onUpdate').should('have.been.calledWith', false)
+  })
+})
diff --git a/src/components/SettingsDialog/SettingsDialog.md b/src/components/SettingsDialog/SettingsDialog.md
new file mode 100644
index 000000000..767128e44
--- /dev/null
+++ b/src/components/SettingsDialog/SettingsDialog.md
@@ -0,0 +1,31 @@
+# SettingsDialog
+
+A modal for app settings: a sidebar of grouped, navigable items on the left
+and the active item's content on the right. Built on top of `Dialog` and
+`Sidebar`.
+
+<ComponentPreview name="SettingsDialog-Default" layout="stacked" />
+
+## Sections and items
+
+Pass `sections`, each with a `label` and a list of `items`. Every item is a
+sidebar entry; give it a `component` to render in the content area when it is
+selected. The first item is active by default.
+
+## Custom tab content
+
+Use the `#tab-content` slot to render the content area yourself instead of
+per-item `component`s. The slot receives the active `{ tab }`.
+
+<ComponentPreview name="SettingsDialog-CustomTabContent" />
+
+## SettingsPanel
+
+`SettingsPanel` is the chrome for a single settings tab: a padded, scrollable
+container with a title, an optional description, an `#actions` area, and a body
+slot. Render one per tab — it pairs naturally with each `sections` item's
+`component`.
+
+<ComponentPreview name="SettingsDialog-PanelBasic" />
+
+<!-- @include: ./SettingsDialog.api.md -->
diff --git a/src/components/SettingsDialog/SettingsDialog.vue b/src/components/SettingsDialog/SettingsDialog.vue
index 1ff0db1cc..90a338665 100644
--- a/src/components/SettingsDialog/SettingsDialog.vue
+++ b/src/components/SettingsDialog/SettingsDialog.vue
@@ -1,7 +1,7 @@
 <template>
   <Dialog v-model="modelValue" :size="size" bare>
     <div class="flex" style="height: calc(100vh - 12rem)">
-      <Sidebar :sections="sidebarSections" disable-collapse />
+      <Sidebar class="w-52" :sections="sidebarSections" disable-collapse />
       <div class="flex h-full flex-1 flex-col overflow-hidden">
         <slot name="tab-content" :tab="activeTab">
           <component v-if="activeTab?.component" :is="activeTab.component" />
@@ -15,25 +15,23 @@
 import { computed, shallowRef } from 'vue'
 import { Dialog } from '../Dialog'
 import { Sidebar } from '../Sidebar'
-import type { DialogSize } from '../Dialog/types'
-import type { SettingsItem, SettingsSection } from './types'
+import type { SettingsDialogProps, SettingsTab } from './types'
 
-const props = withDefaults(
-  defineProps<{
-    sections: SettingsSection[]
-    title?: string
-    size?: DialogSize
-  }>(),
-  {
-    size: '4xl',
-  },
-)
+const props = withDefaults(defineProps<SettingsDialogProps>(), {
+  size: '4xl',
+})
 
+/** Controls whether the dialog is open. */
 const modelValue = defineModel<boolean>({ default: false })
 
+defineSlots<{
+  /** Overrides the content area. Receives the active `{ tab }`. */
+  'tab-content'?: (props: { tab: SettingsTab | undefined }) => any
+}>()
+
 const allItems = computed(() => props.sections.flatMap((s) => s.items))
 
-const activeTab = shallowRef<SettingsItem | undefined>(allItems.value[0])
+const activeTab = shallowRef<SettingsTab | undefined>(allItems.value[0])
 
 const sidebarSections = computed(() =>
   props.sections.map((section) => ({
diff --git a/src/components/SettingsDialog/SettingsPanel.cy.ts b/src/components/SettingsDialog/SettingsPanel.cy.ts
new file mode 100644
index 000000000..6907badb8
--- /dev/null
+++ b/src/components/SettingsDialog/SettingsPanel.cy.ts
@@ -0,0 +1,40 @@
+import { h } from 'vue'
+import SettingsPanel from './SettingsPanel.vue'
+
+describe('SettingsPanel', () => {
+  it('renders the title', () => {
+    cy.mount(SettingsPanel, { props: { title: 'General' } })
+    cy.contains('h1', 'General').should('exist')
+  })
+
+  it('renders the description when provided', () => {
+    cy.mount(SettingsPanel, {
+      props: { title: 'General', description: 'Workspace preferences.' },
+    })
+    cy.contains('Workspace preferences.').should('exist')
+  })
+
+  it('omits the description when not provided', () => {
+    cy.mount(SettingsPanel, { props: { title: 'General' } })
+    cy.get('p').should('not.exist')
+  })
+
+  it('renders the default slot as the body', () => {
+    cy.mount(SettingsPanel, {
+      props: { title: 'General' },
+      slots: { default: () => h('div', { class: 'body' }, 'Body content') },
+    })
+    cy.get('.body').should('have.text', 'Body content')
+  })
+
+  it('renders the actions slot only when provided', () => {
+    cy.mount(SettingsPanel, { props: { title: 'General' } })
+    cy.get('.action').should('not.exist')
+
+    cy.mount(SettingsPanel, {
+      props: { title: 'General' },
+      slots: { actions: () => h('button', { class: 'action' }, 'Save') },
+    })
+    cy.get('.action').should('have.text', 'Save')
+  })
+})
diff --git a/src/components/SettingsDialog/SettingsPanel.vue b/src/components/SettingsDialog/SettingsPanel.vue
new file mode 100644
index 000000000..55721b520
--- /dev/null
+++ b/src/components/SettingsDialog/SettingsPanel.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="flex h-full w-full flex-col overflow-y-auto p-8">
+    <div class="flex items-start justify-between gap-4">
+      <div class="flex flex-col gap-1">
+        <h1 class="text-xl font-semibold text-ink-gray-9">{{ title }}</h1>
+        <p v-if="description" class="text-p-base text-ink-gray-6">
+          {{ description }}
+        </p>
+      </div>
+      <div
+        v-if="$slots.actions"
+        class="flex flex-shrink-0 items-center gap-2"
+      >
+        <slot name="actions" />
+      </div>
+    </div>
+    <div class="mt-6 flex flex-1 flex-col gap-6">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SettingsPanelProps } from './types'
+
+defineProps<SettingsPanelProps>()
+
+defineSlots<{
+  /** Panel body — the settings controls for this tab. */
+  default?: () => any
+  /** Actions rendered on the right of the panel header. */
+  actions?: () => any
+}>()
+</script>
diff --git a/src/components/SettingsDialog/index.ts b/src/components/SettingsDialog/index.ts
index 713598c8d..b4a598c32 100644
--- a/src/components/SettingsDialog/index.ts
+++ b/src/components/SettingsDialog/index.ts
@@ -1,2 +1,8 @@
 export { default as SettingsDialog } from './SettingsDialog.vue'
-export type { SettingsItem, SettingsSection } from './types'
+export { default as SettingsPanel } from './SettingsPanel.vue'
+export type {
+  SettingsDialogProps,
+  SettingsPanelProps,
+  SettingsTab,
+  SettingsSection,
+} from './types'
diff --git a/src/components/SettingsDialog/stories/CustomTabContent.vue b/src/components/SettingsDialog/stories/CustomTabContent.vue
new file mode 100644
index 000000000..c3430c595
--- /dev/null
+++ b/src/components/SettingsDialog/stories/CustomTabContent.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Button, SettingsDialog } from 'frappe-ui'
+import type { SettingsSection } from 'frappe-ui'
+
+// Instead of per-item `component`s, render the content area yourself via the
+// `#tab-content` slot. The slot receives the active `{ tab }`.
+const open = ref(false)
+
+const sections: SettingsSection[] = [
+  {
+    label: 'Preferences',
+    items: [
+      { label: 'Appearance', icon: 'lucide-palette' },
+      { label: 'Notifications', icon: 'lucide-bell' },
+      { label: 'Language', icon: 'lucide-languages' },
+    ],
+  },
+]
+</script>
+
+<template>
+  <Button @click="open = true">Open settings</Button>
+  <SettingsDialog v-model="open" :sections="sections">
+    <template #tab-content="{ tab }">
+      <div class="p-6">
+        <h2 class="text-lg font-semibold text-ink-gray-9">{{ tab?.label }}</h2>
+        <p class="mt-1 text-base text-ink-gray-6">
+          Custom content for the “{{ tab?.label }}” tab.
+        </p>
+      </div>
+    </template>
+  </SettingsDialog>
+</template>
diff --git a/src/components/SettingsDialog/stories/Default.vue b/src/components/SettingsDialog/stories/Default.vue
new file mode 100644
index 000000000..18a841fb5
--- /dev/null
+++ b/src/components/SettingsDialog/stories/Default.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { SettingsSection } from 'frappe-ui'
+import { Button, SettingsDialog } from 'frappe-ui'
+import { ref } from 'vue'
+import GeneralPanel from './panels/GeneralPanel.vue'
+import MembersPanel from './panels/MembersPanel.vue'
+import ProfilePanel from './panels/ProfilePanel.vue'
+
+const open = ref(false)
+
+const sections: SettingsSection[] = [
+  {
+    label: 'Account',
+    items: [{ label: 'Profile', icon: 'lucide-circle-user', component: ProfilePanel }],
+  },
+  {
+    label: 'Workspace',
+    items: [
+      { label: 'General', icon: 'lucide-settings', component: GeneralPanel },
+      { label: 'Members', icon: 'lucide-users', component: MembersPanel },
+    ],
+  },
+]
+</script>
+
+<template>
+  <Button @click="open = true">Open settings</Button>
+  <SettingsDialog v-model="open" :sections="sections" />
+</template>
diff --git a/src/components/SettingsDialog/stories/PanelBasic.vue b/src/components/SettingsDialog/stories/PanelBasic.vue
new file mode 100644
index 000000000..2ed2f6b09
--- /dev/null
+++ b/src/components/SettingsDialog/stories/PanelBasic.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { Button, FormControl, SettingsPanel, Switch } from 'frappe-ui';
+import { ref } from 'vue';
+
+const orgName = ref('Frappe')
+const publicProfile = ref(true)
+</script>
+
+<template>
+  <div class="h-96 w-full overflow-hidden rounded border border-outline-gray-2">
+    <SettingsPanel title="General" description="Workspace-wide preferences.">
+      <template #actions>
+        <Button variant="solid">Save</Button>
+      </template>
+
+      <FormControl label="Organization name" v-model="orgName" class="w-64" />
+      <Switch label="Public profile" description="Allow others to view your workspace and its members." v-model="publicProfile" />
+    </SettingsPanel>
+  </div>
+</template>
diff --git a/src/components/SettingsDialog/stories/panels/GeneralPanel.vue b/src/components/SettingsDialog/stories/panels/GeneralPanel.vue
new file mode 100644
index 000000000..0fc228774
--- /dev/null
+++ b/src/components/SettingsDialog/stories/panels/GeneralPanel.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { FormControl, SettingsPanel, Switch } from 'frappe-ui';
+import { ref } from 'vue';
+
+const orgName = ref('Frappe')
+const publicProfile = ref(true)
+</script>
+
+<template>
+  <SettingsPanel title="General" description="Workspace-wide preferences.">
+    <FormControl label="Organization name" v-model="orgName" class="w-64" />
+    <Switch
+      label="Public Profile"
+      description="Allow others to view your workspace and its members."
+      v-model="publicProfile"
+    />
+  </SettingsPanel>
+</template>
diff --git a/src/components/SettingsDialog/stories/panels/MembersPanel.vue b/src/components/SettingsDialog/stories/panels/MembersPanel.vue
new file mode 100644
index 000000000..82f2cc183
--- /dev/null
+++ b/src/components/SettingsDialog/stories/panels/MembersPanel.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { Button, SettingsPanel } from 'frappe-ui'
+</script>
+
+<template>
+  <SettingsPanel
+    title="Members"
+    description="Invite teammates and manage their roles."
+  >
+    <template #actions>
+      <Button variant="solid">Invite</Button>
+    </template>
+    <p class="text-p-base text-ink-gray-6">3 members in this workspace.</p>
+  </SettingsPanel>
+</template>
diff --git a/src/components/SettingsDialog/stories/panels/ProfilePanel.vue b/src/components/SettingsDialog/stories/panels/ProfilePanel.vue
new file mode 100644
index 000000000..ebdc8e261
--- /dev/null
+++ b/src/components/SettingsDialog/stories/panels/ProfilePanel.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { FormControl, SettingsPanel } from 'frappe-ui'
+
+const firstName = ref('Jane')
+const lastName = ref('Doe')
+const email = ref('jane.doe@example.com')
+</script>
+
+<template>
+  <SettingsPanel title="Profile" description="Manage your personal information.">
+    <div class="flex flex-col gap-4">
+      <div class="flex gap-4">
+        <FormControl class="flex-1" label="First name" v-model="firstName" />
+        <FormControl class="flex-1" label="Last name" v-model="lastName" />
+      </div>
+      <div class="flex gap-4">
+        <FormControl class="flex-1" label="Email" v-model="email" />
+      </div>
+    </div>
+  </SettingsPanel>
+</template>
diff --git a/src/components/SettingsDialog/types.ts b/src/components/SettingsDialog/types.ts
index fad88e408..c32b2f50d 100644
--- a/src/components/SettingsDialog/types.ts
+++ b/src/components/SettingsDialog/types.ts
@@ -1,7 +1,42 @@
 import type { Component } from 'vue'
+import type { DialogSize } from '../Dialog/types'
 import type { SidebarItemProps, SidebarSectionProps } from '../Sidebar/types'
 
-export type SettingsItem = SidebarItemProps & { component?: Component }
+/**
+ * A single navigable settings tab shown in the dialog sidebar. Extends the
+ * sidebar item contract, adding an optional `component` rendered in the content
+ * area when the tab is active.
+ */
+export type SettingsTab = SidebarItemProps & {
+  /** Component rendered in the content area when this tab is active. */
+  component?: Component
+}
+
+/** A labelled group of settings tabs rendered as one sidebar section. */
 export type SettingsSection = Omit<SidebarSectionProps, 'items'> & {
-  items: SettingsItem[]
+  items: SettingsTab[]
+}
+
+export interface SettingsDialogProps {
+  /**
+   * Sidebar sections to render. Each item may carry a `component` that is
+   * shown in the content area when the item is selected.
+   */
+  sections: SettingsSection[]
+
+  /** Max-width size of the dialog. */
+  size?: DialogSize
+}
+
+export interface SettingsDialogEmits {
+  /** Fired when the dialog is opened or closed. */
+  'update:modelValue': [value: boolean]
+}
+
+export interface SettingsPanelProps {
+  /** Heading rendered at the top of the panel. */
+  title: string
+
+  /** Optional sub-heading rendered below the title. */
+  description?: string
 }