diff --git a/custom-elements-manifest.config.js b/custom-elements-manifest.config.js
index 02d6f2682..6d7f536fc 100644
--- a/custom-elements-manifest.config.js
+++ b/custom-elements-manifest.config.js
@@ -27,7 +27,7 @@ export default {
           case ts.SyntaxKind.ClassDeclaration: {
             const className = node.name.getText();
             const classDoc = moduleDoc?.declarations?.find(declaration => declaration.name === className);
-            const customTags = ['animation', 'dependency', 'since', 'status'];
+            const customTags = ['title', 'animation', 'dependency', 'since', 'status'];
             let customComments = '/**';
 
             node.jsDoc?.forEach(jsDoc => {
@@ -65,6 +65,7 @@ export default {
                 // Value-only metadata tags
                 case 'since':
                 case 'status':
+                case 'title':
                   classDoc[t.tag] = t.name;
                   break;
 
diff --git a/docs/assets/plugins/metadata/metadata.js b/docs/assets/plugins/metadata/metadata.js
index db8a768a9..ae33e719c 100644
--- a/docs/assets/plugins/metadata/metadata.js
+++ b/docs/assets/plugins/metadata/metadata.js
@@ -374,7 +374,7 @@
         result += `
           <div class="component-header">
             <div class="component-header__tag">
-              <code>&lt;${component.tagName}&gt; | ${component.name}</code>
+              <code>&lt;${component.tagName}&gt; | ${component.title ?? component.name}</code>
             </div>
 
             <div class="component-header__info">
@@ -386,6 +386,10 @@
                 ${component.status}
               </sl-badge>
             </div>
+
+            <div class="component-header__summary">
+              <p>${component.summary}</p>
+            </div>
           </div>
         `;
 
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 94314c567..1eb601dc1 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -533,7 +533,8 @@ kbd,
 }
 
 /* Lead sentences that occur immediately after the header */
-.component-header + p {
+.component-header + p,
+.component-header p {
   font-size: var(--sl-font-size-large);
   line-height: 1.6;
 }