diff --git a/docs/src/components/ComponentApi.svelte b/docs/src/components/ComponentApi.svelte
index 2e260202..a0d56987 100644
--- a/docs/src/components/ComponentApi.svelte
+++ b/docs/src/components/ComponentApi.svelte
@@ -68,13 +68,18 @@
               <InlineSnippet code="{prop.name}" />
               {#if prop.reactive}
                 <div
-                  style="white-space: nowrap; margin-top: var(--cds-spacing-03); margin-bottom: var(--cds-spacing-03)"
+                  style="white-space: nowrap; margin-top: var(--cds-spacing-03); margin-bottom: var(--cds-spacing-{prop.isRequired
+                    ? '01'
+                    : '03'})"
                 >
                   <Tag style="margin-left: 0" size="sm" type="cyan">
                     Reactive
                   </Tag>
                 </div>
               {/if}
+              {#if prop.isRequired}
+                <Tag size="sm" type="magenta">Required</Tag>
+              {/if}
             </StructuredListCell>
             <StructuredListCell>
               {#each (prop.type || "").split(" | ") as type, i (type)}