diff --git a/packages/docs/src/templates/style.ts b/packages/docs/src/templates/style.ts
index 6ec367516..8e2e862f3 100644
--- a/packages/docs/src/templates/style.ts
+++ b/packages/docs/src/templates/style.ts
@@ -3,6 +3,20 @@ import * as fs from "fs";
 import { type SafeDocgenCLIConfig } from "vue-docgen-cli/lib/config";
 import { getThemePath, Themes, type ThemeConfig } from "../themes-helper";
 
+export const docsRegex = "/* @docs */";
+
+export function getVariablesFromContent(content: string) {
+    const docs = content.substring(
+        content.indexOf(docsRegex) + docsRegex.length,
+        content.lastIndexOf(docsRegex),
+    );
+
+    return docs
+        .replace(/(\r\n|\n|\r)/gm, "")
+        .split(";")
+        .filter((d) => !!d);
+}
+
 export function renderer(config: SafeDocgenCLIConfig, name: string): string {
     const renderThemeVariables = (theme: ThemeConfig): string => {
         const noStyle = `<p>The theme does not have any custom variables for this component.</p>`;
@@ -11,23 +25,46 @@ export function renderer(config: SafeDocgenCLIConfig, name: string): string {
             config.cwd,
             `/scss/components/${name}`,
         );
-        if (!componentPath) return noStyle;
+        const componentDefaultsPath = getThemePath(
+            theme,
+            config.cwd,
+            `/scss/component-defaults/${name}`,
+        );
 
-        const cssFile = path.resolve(config.cwd, componentPath);
-        const content = fs.readFileSync(cssFile, "utf8");
-        const docsRegex = "/* @docs */";
+        if (!componentPath && !componentDefaultsPath) return noStyle;
 
-        if (!content.includes(docsRegex)) return noStyle;
+        let cssContent = "";
+        let defaultsContent = "";
 
-        const docs = content.substring(
-            content.indexOf(docsRegex) + docsRegex.length,
-            content.lastIndexOf(docsRegex),
-        );
+        try {
+            const cssFile = path.resolve(config.cwd, componentPath);
+            cssContent = fs.readFileSync(cssFile, "utf8");
+        } catch (e) {
+            // Log errors but allow the process to continue. We expect every component to have a scss file, but docs should render even if none is found
+            console.error(e);
+        }
+
+        try {
+            const defaultsFile = path.resolve(
+                config.cwd,
+                componentDefaultsPath,
+            );
+            defaultsContent = fs.readFileSync(defaultsFile, "utf8");
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        } catch (e) {
+            // Swallow error and move on. We expect some components will not have defaults.
+        }
+
+        if (
+            !cssContent.includes(docsRegex) &&
+            !defaultsContent.includes(docsRegex)
+        )
+            return noStyle;
 
-        const variables = docs
-            .replace(/(\r\n|\n|\r)/gm, "")
-            .split(";")
-            .filter((d) => !!d);
+        const variables = [
+            ...getVariablesFromContent(cssContent),
+            ...getVariablesFromContent(defaultsContent),
+        ];
 
         return `
 | SASS Variable  | Default |