diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index a7f506a387..491b58c4c5 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -127,7 +127,9 @@
   // Empty components are those which accept children but do not have any.
   // Empty states can be shown for these components, but can be disabled
   // in the component manifest.
-  $: empty = interactive && !children.length && hasChildren
+  $: empty =
+    (interactive && !children.length && hasChildren) ||
+    hasMissingRequiredSettings
   $: emptyState = empty && showEmptyState
 
   // Enrich component settings
diff --git a/packages/client/src/components/app/ComponentPlaceholder.svelte b/packages/client/src/components/app/ComponentPlaceholder.svelte
index 13cc217ef0..7b0a8bbbd9 100644
--- a/packages/client/src/components/app/ComponentPlaceholder.svelte
+++ b/packages/client/src/components/app/ComponentPlaceholder.svelte
@@ -2,28 +2,25 @@
   import { getContext } from "svelte"
   import { builderStore } from "stores"
 
-  const { styleable } = getContext("sdk")
   const component = getContext("component")
 
   $: requiredSetting = $component.missingRequiredSettings?.[0]
 </script>
 
 {#if $builderStore.inBuilder && requiredSetting}
-  <div use:styleable={$component.styles}>
-    <div class="component-placeholder">
-      <span>
-        Add the <mark>{requiredSetting.label}</mark> setting to start using your
-        component -
-      </span>
-      <span
-        class="spectrum-Link"
-        on:click={() => {
-          builderStore.actions.highlightSetting(requiredSetting.key)
-        }}
-      >
-        Show me
-      </span>
-    </div>
+  <div class="component-placeholder">
+    <span>
+      Add the <mark>{requiredSetting.label}</mark> setting to start using your component
+      -
+    </span>
+    <span
+      class="spectrum-Link"
+      on:click={() => {
+        builderStore.actions.highlightSetting(requiredSetting.key)
+      }}
+    >
+      Show me
+    </span>
   </div>
 {/if}
 
diff --git a/packages/client/src/components/app/DataProvider.svelte b/packages/client/src/components/app/DataProvider.svelte
index 69b2ccfc82..7967fc77cf 100644
--- a/packages/client/src/components/app/DataProvider.svelte
+++ b/packages/client/src/components/app/DataProvider.svelte
@@ -133,11 +133,7 @@
         <ProgressCircle />
       </div>
     {:else}
-      {#if $component.emptyState}
-        <Placeholder />
-      {:else}
-        <slot />
-      {/if}
+      <slot />
       {#if paginate && $fetch.supportsPagination}
         <div class="pagination">
           <Pagination