diff --git a/apps/website/public/images/test-image.png b/apps/website/public/images/test-image.png
new file mode 100644
index 000000000..9b3a6fd55
Binary files /dev/null and b/apps/website/public/images/test-image.png differ
diff --git a/apps/website/src/_state/component-statuses.ts b/apps/website/src/_state/component-statuses.ts
index 721574630..3b3d0bb2a 100644
--- a/apps/website/src/_state/component-statuses.ts
+++ b/apps/website/src/_state/component-statuses.ts
@@ -25,6 +25,7 @@ export const statusByComponent: ComponentKitsStatuses = {
     Input: ComponentStatus.Planned,
     'Input Phone': ComponentStatus.Planned,
     'Navigation Bar': ComponentStatus.Planned,
+    Modal: ComponentStatus.Planned,
     Pagination: ComponentStatus.Planned,
     Popover: ComponentStatus.Planned,
     Progress: ComponentStatus.Planned,
@@ -43,6 +44,7 @@ export const statusByComponent: ComponentKitsStatuses = {
     Carousel: ComponentStatus.Planned,
     Combobox: ComponentStatus.Beta,
     Popover: ComponentStatus.Draft,
+    Modal: ComponentStatus.Beta,
     Select: ComponentStatus.Draft,
     Separator: ComponentStatus.Beta,
     Tabs: ComponentStatus.Beta,
diff --git a/apps/website/src/global.css b/apps/website/src/global.css
index d34bb63aa..e820994e2 100644
--- a/apps/website/src/global.css
+++ b/apps/website/src/global.css
@@ -36,15 +36,15 @@
 
     --border-radius: 0.375rem;
 
-    --shiki-color-text: theme('colors.black');
-    --shiki-token-constant: theme('colors.emerald.800');
-    --shiki-token-string: theme('colors.emerald.700');
-    --shiki-token-comment: theme('colors.zinc.700');
-    --shiki-token-keyword: theme('colors.sky.600');
-    --shiki-token-parameter: theme('colors.pink.700');
-    --shiki-token-function: theme('colors.purple.700');
-    --shiki-token-string-expression: theme('colors.emerald.700');
-    --shiki-token-punctuation: theme('colors.zinc.700');
+    --shiki-color-text: theme('colors.white');
+    --shiki-token-constant: theme('colors.emerald.300');
+    --shiki-token-string: theme('colors.emerald.300');
+    --shiki-token-comment: theme('colors.zinc.500');
+    --shiki-token-keyword: theme('colors.sky.300');
+    --shiki-token-parameter: theme('colors.pink.300');
+    --shiki-token-function: theme('colors.violet.300');
+    --shiki-token-string-expression: theme('colors.emerald.300');
+    --shiki-token-punctuation: theme('colors.zinc.200');
   }
 
   .dark {
@@ -78,16 +78,6 @@
     --color-input: 263 32.6% 17.5%;
 
     --color-ring: 263 26.8% 83.9%;
-
-    --shiki-color-text: theme('colors.white');
-    --shiki-token-constant: theme('colors.emerald.300');
-    --shiki-token-string: theme('colors.emerald.300');
-    --shiki-token-comment: theme('colors.zinc.500');
-    --shiki-token-keyword: theme('colors.sky.300');
-    --shiki-token-parameter: theme('colors.pink.300');
-    --shiki-token-function: theme('colors.violet.300');
-    --shiki-token-string-expression: theme('colors.emerald.300');
-    --shiki-token-punctuation: theme('colors.zinc.200');
   }
 }
 
@@ -98,6 +88,77 @@
   body {
     @apply bg-background text-foreground;
   }
+
+  *::-webkit-scrollbar {
+    background-color: transparent;
+    width: 1rem;
+    height: 1rem;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    /* Thumb color */
+    background-color: var(--qwikui-slate-500);
+    border-radius: 0.5rem;
+    background-clip: padding-box;
+    border: 0.3rem solid transparent;
+  }
+
+  *::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-left: 1px solid var(--qwikui-slate-300);
+  }
+
+  .dark *::-webkit-scrollbar-thumb {
+    background-color: var(--qwikui-slate-500);
+  }
+
+  .dark *::-webkit-scrollbar-track {
+    background: var(--qwikui-slate-950);
+    border-left: 1px solid var(--qwikui-slate-800);
+  }
+
+  .code-example *::-webkit-scrollbar-track {
+    background: transparent;
+    border-left: 0px;
+  }
+
+  .code-example *::-webkit-scrollbar-thumb {
+    background: var(--qwikui-slate-400);
+    border-radius: 0.5rem;
+    background-clip: padding-box;
+    border: 0.35rem solid transparent;
+  }
+
+  .code-example *::-webkit-scrollbar-thumb:hover {
+    background: var(--qwikui-slate-500);
+    border-radius: 0.5rem;
+    background-clip: padding-box;
+    border: 0.35rem solid transparent;
+  }
+
+  .code-example-gradient {
+    background: linear-gradient(
+      to bottom,
+      var(--qwikui-slate-900),
+      var(--qwikui-slate-800)
+    );
+  }
+  .dark .code-example-gradient {
+    background: linear-gradient(
+      to bottom,
+      var(--qwikui-slate-800),
+      var(--qwikui-slate-900)
+    );
+  }
+
+  /* no horizontal overflow on code examples */
+  .tab-size pre {
+    white-space: pre-wrap;
+  }
 }
 
 :root {
@@ -227,11 +288,6 @@ ol {
   line-height: 1.75;
 }
 
-.layout {
-  grid-template-columns: 25% 70%;
-  grid-template-areas: 'sidebar  content';
-}
-
 /* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term. 
   It would make more sense to supply the user with the animation declaration in the docs.
 */
@@ -314,4 +370,16 @@ ol {
       -0.8px -0.8px 0 var(--qwikui-purple-700), 0.8px -0.8px 0 var(--qwikui-purple-700),
       -0.8px 0.8px 0 var(--qwikui-purple-700), 0.8px 0.8px 0 var(--qwikui-purple-700);
   }
+
+  .setup-grid-areas {
+    grid-template-areas: 'nav main toc';
+  }
+
+  .copy-btn-bg-dark {
+    background: hsla(215, 25%, 27%, 0.9);
+  }
+
+  .copy-btn-bg-light {
+    background: hsla(214, 32%, 91%, 0.9);
+  }
 }
diff --git a/apps/website/src/routes/_components/header/header.tsx b/apps/website/src/routes/_components/header/header.tsx
index 6cd7cd778..096c06719 100644
--- a/apps/website/src/routes/_components/header/header.tsx
+++ b/apps/website/src/routes/_components/header/header.tsx
@@ -64,7 +64,7 @@ export default component$(
     return (
       <header
         class={[
-          `fixed top-0 z-20 flex h-20 w-full items-center gap-8 border-b-[1px] border-slate-200 bg-white  p-4 dark:border-slate-800 dark:bg-slate-900 md:h-20`,
+          `sticky top-0 z-20 flex h-20 w-full items-center gap-8 border-b-[1px] border-slate-200 bg-white  p-4 dark:border-slate-800 dark:bg-slate-900 md:h-20`,
           `shadow-light-low dark:shadow-dark-medium`,
           rootStore.isSidebarOpened
             ? 'bg-blue-200 brightness-75 dark:bg-indigo-900'
diff --git a/apps/website/src/routes/docs.css b/apps/website/src/routes/docs.css
index f6bca0e78..ef640d75d 100644
--- a/apps/website/src/routes/docs.css
+++ b/apps/website/src/routes/docs.css
@@ -1,6 +1,6 @@
 .docs {
   & {
-    @apply w-full overflow-hidden px-8 py-8 lg:ml-80 lg:max-w-4xl lg:px-16 xl:max-w-6xl;
+    @apply mx-auto w-full max-w-[85ch] overflow-hidden px-8 py-8 lg:px-16;
   }
 
   /*
@@ -14,7 +14,7 @@
     }
 
     h1 {
-      @apply mb-6 text-3xl font-extrabold md:mb-12 md:text-5xl;
+      @apply mb-6 pt-6 text-3xl font-extrabold md:text-5xl;
     }
 
     h2 {
@@ -34,7 +34,7 @@
     }
 
     blockquote {
-      @apply bg-qwikui-blue-800 shadow-light-medium dark:shadow-dark-medium dark:bg-qwikui-purple-800 border-qwikui-blue-200 dark:border-qwikui-purple-200 my-4 rounded-xl border-[2px] p-4 text-white lg:p-6;
+      @apply from-qwikui-blue-800 to-qwikui-blue-900 shadow-light-medium dark:shadow-dark-medium dark:from-qwikui-purple-800 dark:to-qwikui-purple-900 border-qwikui-blue-200 dark:border-qwikui-purple-200 my-4 rounded-xl border-[2px] bg-gradient-to-b p-4 text-white lg:p-6;
     }
 
     ul {
diff --git a/apps/website/src/routes/docs/_components/api-table/api-table.tsx b/apps/website/src/routes/docs/_components/api-table/api-table.tsx
index 9b9e67d2d..250f3f037 100644
--- a/apps/website/src/routes/docs/_components/api-table/api-table.tsx
+++ b/apps/website/src/routes/docs/_components/api-table/api-table.tsx
@@ -28,12 +28,12 @@ export const APITable = component$(({ propDescriptors }: APITableProps) => {
           {propDescriptors?.map((propDescriptor) => {
             return (
               <tr key={propDescriptor.name}>
-                <td class="prose prose-sm py-3 pl-4 align-baseline sm:pl-0 ">
+                <td class="prose prose-sm py-3 pl-4 sm:pl-0 ">
                   <code class="border-qwikui-blue-500 bg-qwikui-blue-50 dark:bg-qwikui-purple-100 dark:border-qwikui-purple-500 mr-6 rounded-md border-[1px] border-b-[2px] font-[400] text-slate-950">
                     {propDescriptor.name}
                   </code>
                 </td>
-                <td class="py-3 align-baseline">
+                <td class="py-3">
                   <span class="flex items-center">
                     <code class="rounded-md border-[1px] border-b-2 border-slate-700 bg-slate-100 px-2 dark:border-slate-400 dark:bg-slate-700">
                       {propDescriptor.type}
diff --git a/apps/website/src/routes/docs/_components/code-copy/code-copy.tsx b/apps/website/src/routes/docs/_components/code-copy/code-copy.tsx
index 79205ffc5..8493db411 100644
--- a/apps/website/src/routes/docs/_components/code-copy/code-copy.tsx
+++ b/apps/website/src/routes/docs/_components/code-copy/code-copy.tsx
@@ -24,6 +24,10 @@ export const CodeCopy = component$(
         onClick$={async () => {
           await copy(code);
           copied.value = true;
+
+          setTimeout(() => {
+            copied.value = false;
+          }, 4000);
         }}
       >
         {!copied.value ? 'Copy' : 'Copied!'}
diff --git a/apps/website/src/routes/docs/_components/highlight/highlight.tsx b/apps/website/src/routes/docs/_components/highlight/highlight.tsx
index ad4ffeb9f..c1d6002ee 100644
--- a/apps/website/src/routes/docs/_components/highlight/highlight.tsx
+++ b/apps/website/src/routes/docs/_components/highlight/highlight.tsx
@@ -47,15 +47,23 @@ export const Highlight = component$(
     });
 
     return (
-      <div
-        {...props}
-        class={[
-          'tab-size relative max-w-full overflow-hidden overflow-x-auto rounded-xl bg-slate-50 p-12 text-sm dark:bg-slate-800',
-          props.class,
-        ]}
-      >
-        <div dangerouslySetInnerHTML={codeSig.value} />
-        <CodeCopy class={['absolute right-2 top-2', copyCodeClass]} code={code} />
+      <div class="code-example relative max-h-[31.25rem] rounded-b-xl">
+        <CodeCopy
+          class={[
+            'copy-btn-bg-dark absolute right-4 top-4 bg-slate-200 text-white hover:bg-slate-600 hover:text-white',
+            copyCodeClass,
+          ]}
+          code={code}
+        />
+        <div
+          {...props}
+          class={[
+            'tab-size code-example-gradient max-h-[31.25rem] max-w-full overflow-auto rounded-xl bg-slate-800 p-6 text-sm dark:bg-slate-800',
+            props.class,
+          ]}
+        >
+          <div dangerouslySetInnerHTML={codeSig.value} />
+        </div>
       </div>
     );
   },
diff --git a/apps/website/src/routes/docs/_components/navigation-docs/navigation-docs.tsx b/apps/website/src/routes/docs/_components/navigation-docs/navigation-docs.tsx
index a805c5744..5a965184e 100644
--- a/apps/website/src/routes/docs/_components/navigation-docs/navigation-docs.tsx
+++ b/apps/website/src/routes/docs/_components/navigation-docs/navigation-docs.tsx
@@ -30,8 +30,8 @@ export const DocsNavigation = component$(({ linksGroups }: DocsNavigationProps)
     rounded-lg hover:bg-[var(--qwik-light-blue)] dark:hover:bg-[var(--qwik-dark-purple)]`;
   return (
     <nav
-      class={`fixed inset-0 top-20 z-10 flex-col gap-4 overflow-y-auto border-r-[1px]
-              border-slate-200 bg-slate-100 bg-white pb-6 dark:border-slate-800 dark:bg-slate-900  lg:w-80
+      class={`fixed inset-0 top-20 z-10 flex-col gap-4 overflow-y-auto border-r-[1px] border-slate-200
+              bg-slate-100 bg-white pb-6 [grid-area:nav] dark:border-slate-800 dark:bg-slate-900  lg:w-80
               ${rootStore.isSidebarOpened ? 'w-100 flex' : 'hidden lg:flex'} `}
     >
       <ul class="show mt-8 flex flex-col gap-2 pl-12 lg:hidden">
@@ -59,7 +59,7 @@ export const DocsNavigation = component$(({ linksGroups }: DocsNavigationProps)
       {linksGroups?.map((group) => {
         return (
           <>
-            <div class="px-6 pt-6">
+            <div class="px-6 pt-8">
               <h2 class="bg-qwikui-blue-600 dark:bg-qwikui-purple-800 shadow-dark-low dark:shadow-dark-high border-qwikui-blue-100 dark:border-qwikui-purple-100 text-outline-lg mb-4 rounded-lg border-2 px-4 py-1 text-3xl font-bold  text-white lg:text-lg">
                 {group.name}
               </h2>
diff --git a/apps/website/src/routes/docs/_components/preview-code-example/preview-code-example-tabs.tsx b/apps/website/src/routes/docs/_components/preview-code-example/preview-code-example-tabs.tsx
index d8e72267a..686575ecd 100644
--- a/apps/website/src/routes/docs/_components/preview-code-example/preview-code-example-tabs.tsx
+++ b/apps/website/src/routes/docs/_components/preview-code-example/preview-code-example-tabs.tsx
@@ -21,7 +21,7 @@ export const PreviewCodeExampleTabs = component$((props: PreviewCodeExampleProps
       class="shadow-light-medium dark:shadow-dark-medium mb-12 rounded-xl"
       selectedClassName="previewCodeExampleSelectedTab"
     >
-      <TabList class="bg-qwikui-blue-700 dark:bg-qwikui-purple-800 border-qwikui-blue-300 dark:border-qwikui-purple-200 shadow-light-medium dark:shadow-dark-medium flex rounded-t-xl border-[1.5px] border-b-0 text-white">
+      <TabList class="bg-qwikui-blue-700 dark:bg-qwikui-purple-800 border-qwikui-blue-300 dark:border-qwikui-purple-200 flex rounded-t-xl border-[1.5px] border-b-0 text-white">
         <Tab class="hover:bg-qwikui-blue-500 dark:hover:bg-qwikui-purple-600 text-outline-lg rounded-tl-[.625rem] px-4 py-2">
           Preview
         </Tab>
@@ -35,7 +35,7 @@ export const PreviewCodeExampleTabs = component$((props: PreviewCodeExampleProps
         </section>
       </TabPanel>
       <TabPanel class="border-qwikui-blue-300 dark:border-qwikui-purple-200 relative rounded-b-xl border-[1.5px]">
-        <Highlight code={props.code} />
+        <Highlight class="rounded-b-xl rounded-t-none" code={props.code} />
       </TabPanel>
     </Tabs>
   );
diff --git a/apps/website/src/routes/docs/_components/preview-code-example/preview-code-example-vertical.tsx b/apps/website/src/routes/docs/_components/preview-code-example/preview-code-example-vertical.tsx
index ef61011c0..4a7645621 100644
--- a/apps/website/src/routes/docs/_components/preview-code-example/preview-code-example-vertical.tsx
+++ b/apps/website/src/routes/docs/_components/preview-code-example/preview-code-example-vertical.tsx
@@ -4,7 +4,7 @@ import { PreviewCodeExampleProps } from './preview-code-example-props.type';
 
 export const PreviewCodeExampleVertical = component$((props: PreviewCodeExampleProps) => {
   return (
-    <div class="dark:border-qwikui-purple-200 shadow-light-medium dark:shadow-dark-medium flex w-full flex-col rounded-b-xl rounded-t-xl border-[1.5px] border-solid border-slate-200">
+    <div class="dark:border-qwikui-purple-200 shadow-light-medium dark:shadow-dark-medium flex w-full flex-col rounded-xl border-[1.5px] border-solid border-slate-200">
       <h3 class=" flex rounded-t-xl text-white"></h3>
       <section class="rounded-t-xl bg-slate-50 p-4 dark:bg-slate-800">
         <Slot name="actualComponent" />
@@ -13,7 +13,7 @@ export const PreviewCodeExampleVertical = component$((props: PreviewCodeExampleP
         Code
       </h3>
       <aside class="rounded-b-xl border-[1.5px] border-solid">
-        <Highlight code={props.code} class="rounded" />
+        <Highlight code={props.code} class="rounded rounded-t-none" />
       </aside>
     </div>
   );
diff --git a/apps/website/src/routes/docs/_components/status-banner/status-banner.tsx b/apps/website/src/routes/docs/_components/status-banner/status-banner.tsx
index 1bb0da111..5c4852d9a 100644
--- a/apps/website/src/routes/docs/_components/status-banner/status-banner.tsx
+++ b/apps/website/src/routes/docs/_components/status-banner/status-banner.tsx
@@ -69,19 +69,19 @@ function getBackgroundByStatus(status?: ComponentStatus) {
     case ComponentStatus.Ready:
       return 'bg-green-300';
     case ComponentStatus.Beta:
-      return 'bg-qwikui-blue-800 dark:bg-qwikui-purple-800';
+      return 'bg-gradient-to-b from-qwikui-blue-800 to-qwikui-blue-900 dark:from-qwikui-purple-800 dark:to-qwikui-purple-900';
     case ComponentStatus.Draft:
-      return 'bg-orange-700 dark:bg-red-800';
+      return 'bg-gradient-to-b from-orange-700 to-orange-800 dark:from-red-700 dark:to-red-800';
     case ComponentStatus.Planned:
     default:
-      return 'bg-orange-700 dark:bg-red-800';
+      return 'bg-gradient-to-b from-orange-700 to-orange-800 dark:from-red-700 dark:to-red-800';
   }
 }
 
 export const StatusBanner = component$((props: StatusBannerProps) => {
   const ref = useSignal<HTMLElement | undefined>();
   const isBannerClosedSig = useSignal(false);
-  const marginBottom = 32;
+  const marginBottom = 64;
 
   useStylesScoped$(`
 
@@ -90,7 +90,7 @@ export const StatusBanner = component$((props: StatusBannerProps) => {
   }
 
   .fade {
-    animation: fadeOut 0.5s ease forwards;
+    animation: fadeOut 1s cubic-bezier(0.6, 0.6, 0, 1) forwards;
     margin-top: var(--dynamic-banner-height);
   }
 
diff --git a/apps/website/src/routes/docs/fluffy/(components)/navigation-bar/examples.tsx b/apps/website/src/routes/docs/fluffy/(components)/navigation-bar/examples.tsx
deleted file mode 100644
index a837db778..000000000
--- a/apps/website/src/routes/docs/fluffy/(components)/navigation-bar/examples.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { component$ } from '@builder.io/qwik';
-import { NavigationBar } from '@qwik-ui/tailwind';
-
-export default component$(() => {
-  return (
-    <>
-      <h2>This is the documentation for the Navigation Bar</h2>
-
-      <div class="mt-4 flex flex-col gap-8">
-        <h2>Basic Example</h2>
-
-        <NavigationBar class="bg-base-100 rounded-lg">
-          <a q:slot="navbar-left" class="btn btn-ghost text-xl normal-case">
-            tailwindUI
-          </a>
-          <ul q:slot="navbar-center" class="menu  menu-horizontal px-1">
-            <li>
-              <a>Item 1</a>
-            </li>
-            <li tabIndex={0}>
-              <a>
-                Parent
-                <svg
-                  class="fill-current"
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="20"
-                  height="20"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
-                </svg>
-              </a>
-              <ul class="bg-base-100 p-2">
-                <li>
-                  <a>Submenu 1</a>
-                </li>
-                <li>
-                  <a>Submenu 2</a>
-                </li>
-              </ul>
-            </li>
-            <li>
-              <a>Item 3</a>
-            </li>
-          </ul>
-          <a q:slot="navbar-right" class="btn btn-ghost text-xl normal-case">
-            tailwindUI
-          </a>
-        </NavigationBar>
-
-        <NavigationBar class="bg-base-100 rounded-lg">
-          <a q:slot="navbar-left" class="btn btn-ghost text-xl normal-case">
-            tailwindUI
-          </a>
-          <ul q:slot="navbar-right" class="menu  menu-horizontal px-1">
-            <li>
-              <a>Item 1</a>
-            </li>
-            <li tabIndex={0}>
-              <a>
-                Parent
-                <svg
-                  class="fill-current"
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="20"
-                  height="20"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
-                </svg>
-              </a>
-              <ul class="bg-base-100 p-2">
-                <li>
-                  <a>Submenu 1</a>
-                </li>
-                <li>
-                  <a>Submenu 2</a>
-                </li>
-              </ul>
-            </li>
-            <li>
-              <a>Item 3</a>
-            </li>
-          </ul>
-        </NavigationBar>
-        <h2>Custom css</h2>
-        <NavigationBar class=" bg-primary rounded-lg">
-          <a q:slot="navbar-left" class="btn btn-ghost text-xl normal-case">
-            tailwindUI
-          </a>
-          <ul q:slot="navbar-right" class="menu   menu-horizontal px-1">
-            <li>
-              <a>Item 1</a>
-            </li>
-            <li tabIndex={0}>
-              <a>
-                Parent
-                <svg
-                  class="fill-current"
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="20"
-                  height="20"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
-                </svg>
-              </a>
-              <ul class="bg-base-100 p-2">
-                <li>
-                  <a>Submenu 1</a>
-                </li>
-                <li>
-                  <a>Submenu 2</a>
-                </li>
-              </ul>
-            </li>
-            <li>
-              <a>Item 3</a>
-            </li>
-          </ul>
-        </NavigationBar>
-      </div>
-    </>
-  );
-});
diff --git a/apps/website/src/routes/docs/headless/(components)/combobox/examples.tsx b/apps/website/src/routes/docs/headless/(components)/combobox/examples.tsx
index 39846adb2..65045f8e4 100644
--- a/apps/website/src/routes/docs/headless/(components)/combobox/examples.tsx
+++ b/apps/website/src/routes/docs/headless/(components)/combobox/examples.tsx
@@ -1,41 +1,63 @@
 import { component$, type JSXNode } from '@builder.io/qwik';
 
-import { CodeExample } from '../../../_components/code-example/code-example';
 import { Highlight } from '../../../_components/highlight/highlight';
-import { PreviewCodeExampleTabsDeprecated } from '../../../_components/preview-code-example/preview-code-example-tabs-deprecated';
+import { CodeExampleContainer } from '../../../_components/code-example/code-example-container';
+import { PreviewCodeExampleTabs } from '../../../_components/preview-code-example/preview-code-example-tabs';
+
 import AnimationComponent from './examples/animation';
 import animationCode from './examples/animation?raw';
+
 import AutoPlacementComponent from './examples/auto-placement';
 import autoPlacementCode from './examples/auto-placement?raw';
-import buildingBlocksCode from './examples/building-blocks?raw';
+
+import buildingBlocksCode from './examples/building-blocks-snip?raw';
+import providerCode from './examples/qwik-ui-provider-snip?raw';
+import contextIdsCode from './examples/context-ids-snip?raw';
+import resolvedOptionCode from './examples/resolved-option-snip?raw';
+import customKeysSnipCode from './examples/custom-keys-snip?raw';
+
 import CustomFilterComponent from './examples/custom-filter';
 import customFilterCode from './examples/custom-filter?raw';
+
 import CustomKeysComponent from './examples/custom-keys';
 import customKeysCode from './examples/custom-keys?raw';
+
 import DefaultLabelComponent from './examples/default-label';
 import defaultLabelCode from './examples/default-label?raw';
+
 import DisableBlurComponent from './examples/disable-blur';
 import disableBlurCode from './examples/disable-blur?raw';
+
 import DisabledComponent from './examples/disabled';
 import disabledCode from './examples/disabled?raw';
+
 import FlipComponent from './examples/flip';
 import flipCode from './examples/flip?raw';
+
 import GutterComponent from './examples/gutter';
 import gutterCode from './examples/gutter?raw';
+
 import HeroComponent from './examples/hero';
 import heroCode from './examples/hero?raw';
+
 import HighlightedIndexComponent from './examples/highlighted-index';
 import highlightedIndexCode from './examples/highlighted-index?raw';
+
 import ObjectComponent from './examples/object';
 import objectCode from './examples/object?raw';
+
 import PlacementComponent from './examples/placement';
 import placementCode from './examples/placement?raw';
+
 import SearchBarComponent from './examples/search-bar';
 import searchBarCode from './examples/search-bar?raw';
+
 import SignalBindsComponent from './examples/signal-binds';
 import signalBindsCode from './examples/signal-binds?raw';
+
 import SortFilterComponent from './examples/sort-filter';
 import sortFilterCode from './examples/sort-filter?raw';
+
 import StringComponent from './examples/string';
 import stringCode from './examples/string?raw';
 
@@ -123,18 +145,32 @@ export type ShowExampleProps = {
 export const ShowExample = component$(({ example }: ShowExampleProps) => {
   const { component, code, cssClasses = '' } = comboboxExamples[example];
   return (
-    <PreviewCodeExampleTabsDeprecated>
+    <PreviewCodeExampleTabs code={code}>
       <div class={['flex flex-col gap-4', cssClasses]} q:slot="actualComponent">
         {component}
       </div>
 
       <Highlight q:slot="codeExample" code={code} />
-    </PreviewCodeExampleTabsDeprecated>
+    </PreviewCodeExampleTabs>
   );
 });
 
-export const BuildingBlocks = component$(() => (
-  <CodeExample>
-    <Highlight code={buildingBlocksCode} />
-  </CodeExample>
+export const BuildingBlocksSnip = component$(() => (
+  <CodeExampleContainer code={buildingBlocksCode} />
+));
+
+export const ProviderSnip = component$(() => (
+  <CodeExampleContainer code={providerCode} />
+));
+
+export const ContextIdsSnip = component$(() => (
+  <CodeExampleContainer code={contextIdsCode} />
+));
+
+export const ResolvedOptionSnip = component$(() => (
+  <CodeExampleContainer code={resolvedOptionCode} />
+));
+
+export const CustomKeysSnip = component$(() => (
+  <CodeExampleContainer code={customKeysSnipCode} />
 ));
diff --git a/apps/website/src/routes/docs/headless/(components)/combobox/examples/building-blocks.tsx b/apps/website/src/routes/docs/headless/(components)/combobox/examples/building-blocks-snip.tsx
similarity index 100%
rename from apps/website/src/routes/docs/headless/(components)/combobox/examples/building-blocks.tsx
rename to apps/website/src/routes/docs/headless/(components)/combobox/examples/building-blocks-snip.tsx
diff --git a/apps/website/src/routes/docs/headless/(components)/combobox/examples/context-ids-snip.tsx b/apps/website/src/routes/docs/headless/(components)/combobox/examples/context-ids-snip.tsx
new file mode 100644
index 000000000..174b3d1fc
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/(components)/combobox/examples/context-ids-snip.tsx
@@ -0,0 +1,10 @@
+import { component$ } from '@builder.io/qwik';
+import { ComboboxPortal } from '@qwik-ui/headless';
+
+export default component$(() => {
+  return (
+    <ComboboxPortal /* contextIds={['my-context-id', 'my-context-id-2']} */>
+      <></>
+    </ComboboxPortal>
+  );
+});
diff --git a/apps/website/src/routes/docs/headless/(components)/combobox/examples/custom-keys-snip.tsx b/apps/website/src/routes/docs/headless/(components)/combobox/examples/custom-keys-snip.tsx
new file mode 100644
index 000000000..1a770a54f
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/(components)/combobox/examples/custom-keys-snip.tsx
@@ -0,0 +1,30 @@
+import { Combobox } from '@qwik-ui/headless';
+import { component$ } from '@builder.io/qwik';
+
+type Pokemon = {
+  pokedex: string;
+  pokemon: string;
+  isPokemonCaught: boolean;
+};
+
+const pokemonExample: Array<Pokemon> = [
+  { pokedex: '1', pokemon: 'Bulbasaur', isPokemonCaught: true },
+  { pokedex: '2', pokemon: 'Ivysaur', isPokemonCaught: false },
+  { pokedex: '3', pokemon: 'Venusaur', isPokemonCaught: false },
+  { pokedex: '4', pokemon: 'Charmander', isPokemonCaught: true },
+  { pokedex: '5', pokemon: 'Charmeleon', isPokemonCaught: true },
+  { pokedex: '6', pokemon: 'Charizard', isPokemonCaught: true },
+  { pokedex: '7', pokemon: 'Squirtle', isPokemonCaught: false },
+  { pokedex: '8', pokemon: 'Wartortle', isPokemonCaught: false },
+];
+
+export default component$(() => {
+  return (
+    <Combobox
+      options={pokemonExample}
+      optionValueKey="pokedex"
+      optionLabelKey="pokemon"
+      optionDisabledKey="isPokemonCaught"
+    />
+  );
+});
diff --git a/apps/website/src/routes/docs/headless/(components)/combobox/examples/placement.tsx b/apps/website/src/routes/docs/headless/(components)/combobox/examples/placement.tsx
index 9248f891d..4bb3a22d3 100644
--- a/apps/website/src/routes/docs/headless/(components)/combobox/examples/placement.tsx
+++ b/apps/website/src/routes/docs/headless/(components)/combobox/examples/placement.tsx
@@ -30,7 +30,7 @@ export default component$(() => {
   return (
     <>
       <Combobox
-        class="w-fit"
+        class="w-fit text-white"
         options={placementExample}
         optionDisabledKey="myDisabledKey"
         bind:inputValueSig={inputValueSig}
diff --git a/apps/website/src/routes/docs/headless/(components)/combobox/examples/qwik-ui-provider-snip.tsx b/apps/website/src/routes/docs/headless/(components)/combobox/examples/qwik-ui-provider-snip.tsx
new file mode 100644
index 000000000..4eeee2d69
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/(components)/combobox/examples/qwik-ui-provider-snip.tsx
@@ -0,0 +1,14 @@
+import { QwikUIProvider } from '@qwik-ui/headless';
+import { Slot, component$ } from '@builder.io/qwik';
+
+// wrap as a direct child to the body tag
+
+export default component$(() => {
+  return (
+    <QwikUIProvider>
+      <main>
+        <Slot />
+      </main>
+    </QwikUIProvider>
+  );
+});
diff --git a/apps/website/src/routes/docs/headless/(components)/combobox/examples/resolved-option-snip.tsx b/apps/website/src/routes/docs/headless/(components)/combobox/examples/resolved-option-snip.tsx
new file mode 100644
index 000000000..54d40af1e
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/(components)/combobox/examples/resolved-option-snip.tsx
@@ -0,0 +1,14 @@
+import { component$ } from '@builder.io/qwik';
+import { ComboboxOption, ComboboxListbox, type ResolvedOption } from '@qwik-ui/headless';
+
+export default component$(() => {
+  return (
+    <ComboboxListbox
+      optionRenderer$={(option: ResolvedOption, index: number) => (
+        <ComboboxOption key={option.key} index={index} resolved={option}>
+          {option.label}
+        </ComboboxOption>
+      )}
+    />
+  );
+});
diff --git a/apps/website/src/routes/docs/headless/(components)/combobox/index.mdx b/apps/website/src/routes/docs/headless/(components)/combobox/index.mdx
index b66d2f95b..c4597f991 100644
--- a/apps/website/src/routes/docs/headless/(components)/combobox/index.mdx
+++ b/apps/website/src/routes/docs/headless/(components)/combobox/index.mdx
@@ -10,6 +10,11 @@ import {
   statusByComponent,
   KeyboardInteractionTable,
   APITable,
+  BuildingBlocksSnip,
+  ProviderSnip,
+  ContextIdsSnip,
+  ResolvedOptionSnip,
+  CustomKeysSnip
 } from './exports';
 
 <StatusBanner status={statusByComponent.headless.Combobox} />
@@ -52,70 +57,24 @@ Qwik UI's Combobox implementation follows the [WAI-Aria Combobox specifications]
 
 <br />
 
-<div class="bg-slate-200 dark:bg-slate-800 border-2 border-slate-500 p-4 lg:p-6 rounded-xl shadow-light-medium dark:shadow-dark-medium">
-  <p class="pb-4">The Combobox component makes use of <a class="border-b-2 !border-qwikui-blue-400 dark:border-qwikui-purple-500" href="https://qwik.builder.io/docs/cookbook/portal/#portal">portals</a>. A basic use case for a portal is to prevent overflow issues in your UI. To support portals in Qwik UI, please add the following around your layout.tsx.</p>
-  <CodeExample classes="!mb-0 !p-6 !rounded-md">
-    ```tsx
-    import { QwikUIProvider } from '@qwik-ui/headless'; // import Provider component
-
-    // wrap as a direct child to the body tag
-    <body>
-      <QwikUIProvider>
-        <Slot />
-      </QwikUIProvider>
-    </body>
-    ```
-  </CodeExample>
-
-  <div class="pt-12 pb-4">
-    ### <ins>**Context Caveats**</ins>
-    <p class="pt-2 pb-4">Portals are still currently in **Beta**, as a result, you may experience an issue using your own context to pass data into the portal children.</p>
-    <p class="pb-4">If you do experience any context related issues, add the following **contextIds** prop to the **ComboboxPortal** component. It takes in an array of string context id's as a prop. We also have a live example below with context.</p>
-    <p class="pb-4">If you are not using context inside the portal children, this will not be an issue.</p>
-
-      <CodeExample classes="!mb-0 !p-6 !rounded-md">
-      ```tsx
-        <ComboboxPortal contextIds={["my-context-id", "my-context-id-2"]}>
-          <ComboboxListbox>
-            <ComboboxOption>Option</ComboboxOption>
-          </ComboboxListbox>
-        </ComboboxPortal> 
-      ```
-    </CodeExample>
-  </div>
-</div>
+The Combobox component makes use of [portals](https://qwik.builder.io/docs/cookbook/portal/#portal). A basic use case for a portal is to prevent overflow issues in your UI. To support portals in Qwik UI, please add the following around your layout.tsx.
+<ProviderSnip />
+
+## **Context Caveats**
+Portals are still currently in **Beta**, as a result, you may experience an issue using your own context to pass data into the portal children.
+
+If you do experience any context related issues, add the following **contextIds** prop to the **ComboboxPortal** component. 
+
+<ContextIdsSnip />
+
+It takes in an array of string context id's as a prop. We also have a live example below with context.
+If you are not using context inside the portal children, this will not be an issue.
 
 <br/>
 
 ## Building blocks
 
-  <CodeExample>
-    ```tsx
-    import { component$ } from '@builder.io/qwik';
-    import { Combobox, ComboboxLabel, ComboboxControl, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxListbox, ComboboxOption } from '@qwik-ui/headless';
-
-    export default component$(() => {
-      return (
-        <Combobox>
-          <ComboboxLabel>Label Element</ComboboxLabel>
-          <ComboboxControl>
-            <ComboboxInput />
-            <ComboboxTrigger>
-              Opens Listbox
-            </ComboboxTrigger>
-          </ComboboxControl>
-          <ComboboxPortal>
-            <ComboboxListbox 
-            optionRenderer$={() => (
-              <ComboboxOption>
-                Option Label
-              </ComboboxOption>
-            )} />
-          </ComboboxPortal>
-        </Combobox>
-      )
-    ```
-  </CodeExample>
+  <BuildingBlocksSnip />
 
   ### 🎨 Anatomy
   <AnatomyTable
@@ -183,21 +142,7 @@ The resolved object also holds:
 
 Import the **ResolvedOption** type from Qwik UI and pass in the data according to the code block below.
 
-<CodeExample>
-  ```tsx
-  import { ComboboxOption, type ResolvedOption } from '@qwik-ui/headless';
-
-  renderOption$={(option: ResolvedOption, index: number) => (
-    <ComboboxOption
-      key={option.key}
-      index={index}
-      resolved={option}
-    >
-      {option.label}
-    </ComboboxOption>
-  )}
-  ```
-</CodeExample>
+<ResolvedOptionSnip />
 
 ## Adding a filter
 
@@ -234,16 +179,7 @@ In some cases, your data object keys may not match the default keys that the Com
 
 If your data object keys are different, you can specify custom key names using the `optionValueKey` and `optionLabelKey` props.
 
-<CodeExample>
-  ```tsx
-    <Combobox
-    options={myOptions}
-    optionValueKey="pokedex"
-    optionLabelKey="pokemon"
-    optionDisabledKey="isPokemonCaught"
-    />
-  ```
-</CodeExample>
+<CustomKeysSnip />
 
 Within our example, the value key is called **pokedex** and the label key is called **pokemon**. This tells the Combobox component to use the "pokedex" key for option values and the "pokemon" key for option labels.
 
@@ -658,13 +594,13 @@ The Combobox component API provides a set of properties that allow you to custom
 
 ## Additional Examples
 
+<div class="text-white bg-gradient-to-b from-orange-700 to-orange-800 dark:from-red-700 dark:to-red-800 p-4 lg:p-6 rounded-xl shadow-light-medium dark:shadow-dark-medium">
+  **NOTE:** You cannot use **flip** and **autoPlacement** at the same time. They both manipulate the placement but with different strategies. Using both can result in a continuous reset loop as they try to override each other's work.
+</div>
+
 ### Auto Placement
   
 Automatically places the listbox based on available space. **You must set flip to false before using it.**  This comes in handy when you're unsure about the optimal placement for the floating element, or if you prefer not to set it manually.
 
 <ShowExample example="autoPlacement" />
 
-<div class="bg-red-200 dark:bg-red-900 p-4 lg:p-6 rounded-xl dark:border-[#F3F3F3] border-[#333333] shadow-light-medium dark:shadow-dark-medium">
-  **NOTE:** You cannot use **flip** and **autoPlacement** at the same time. They both manipulate the placement but with different strategies. Using both can result in a continuous reset loop as they try to override each other's work.
-</div>
-
diff --git a/apps/website/src/routes/docs/headless/(components)/modal/examples.tsx b/apps/website/src/routes/docs/headless/(components)/modal/examples.tsx
new file mode 100644
index 000000000..73476d07a
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/(components)/modal/examples.tsx
@@ -0,0 +1,122 @@
+import { JSXNode, component$, useStyles$ } from '@builder.io/qwik';
+import { PreviewCodeExampleTabs } from '../../../_components/preview-code-example/preview-code-example-tabs';
+
+import Hero from './examples/hero';
+import heroExampleCode from './examples/hero?raw';
+
+import Inspect from './examples/inspect';
+import inspectExampleCode from './examples/inspect?raw';
+
+import AutoFocus from './examples/auto-focus';
+import autoFocusExampleCode from './examples/auto-focus?raw';
+
+import Backdrop from './examples/backdrop';
+import backdropCssCode from './examples/backdrop.css?raw';
+import backdropExampleCode from './examples/backdrop?raw';
+
+import BackdropClose from './examples/backdrop-close';
+import backdropCloseExampleCode from './examples/backdrop-close?raw';
+
+import AlertDialog from './examples/alert-dialog';
+import alertDialogExampleCode from './examples/alert-dialog?raw';
+
+import Animation from './examples/animation';
+import animationExampleCode from './examples/animation?raw';
+
+import Transition from './examples/transition';
+import transitionExampleCode from './examples/transition?raw';
+
+import Sheet from './examples/sheet';
+import sheetExampleCode from './examples/sheet?raw';
+
+import BottomSheet from './examples/bottom-sheet';
+import bottomSheetExampleCode from './examples/bottom-sheet?raw';
+
+import buildingBlocksSnip from './examples/building-blocks-snip?raw';
+import pageLoadSnip from './examples/page-load-snip?raw';
+import animationSnip from './examples/animation-snip.css?raw';
+
+import styles from './index.css?inline';
+import { CodeExampleContainer } from '../../../_components/code-example/code-example-container';
+
+export type Example = {
+  component: JSXNode;
+  code: string;
+  cssClasses?: string;
+};
+
+export const examples: Record<string, Example> = {
+  hero: {
+    component: <Hero />,
+    code: heroExampleCode,
+  },
+  inspect: {
+    component: <Inspect />,
+    code: inspectExampleCode,
+  },
+  autoFocus: {
+    component: <AutoFocus />,
+    code: autoFocusExampleCode,
+  },
+  backdrop: {
+    component: <Backdrop />,
+    code: backdropExampleCode,
+  },
+  backdropClose: {
+    component: <BackdropClose />,
+    code: backdropCloseExampleCode,
+  },
+  alertDialog: {
+    component: <AlertDialog />,
+    code: alertDialogExampleCode,
+  },
+  animation: {
+    component: <Animation />,
+    code: animationExampleCode,
+  },
+  transition: {
+    component: <Transition />,
+    code: transitionExampleCode,
+  },
+  sheet: {
+    component: <Sheet />,
+    code: sheetExampleCode,
+  },
+  bottomSheet: {
+    component: <BottomSheet />,
+    code: bottomSheetExampleCode,
+  },
+};
+
+export type ShowExampleProps = {
+  example: string;
+};
+
+export const ShowExample = component$(({ example }: ShowExampleProps) => {
+  useStyles$(styles);
+
+  const { component, code, cssClasses = '' } = examples[example];
+  return (
+    <PreviewCodeExampleTabs code={code}>
+      <div q:slot="actualComponent" class={['tabs-example mx-auto', cssClasses]}>
+        {component}
+      </div>
+    </PreviewCodeExampleTabs>
+  );
+});
+
+export const BackdropCss = component$(() => (
+  <CodeExampleContainer code={backdropCssCode} />
+));
+
+export const BuildingBlocksSnip = component$(() => (
+  <CodeExampleContainer code={buildingBlocksSnip} />
+));
+
+export const PageLoadSnip = component$(() => (
+  <CodeExampleContainer code={pageLoadSnip} />
+));
+
+export const AnimationSnip = component$(() => (
+  <CodeExampleContainer code={animationSnip} />
+));
diff --git a/apps/website/src/routes/docs/headless/(components)/modal/examples/alert-dialog.tsx b/apps/website/src/routes/docs/headless/(components)/modal/examples/alert-dialog.tsx
new file mode 100644
index 000000000..a3276ed08
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/(components)/modal/examples/alert-dialog.tsx
@@ -0,0 +1,60 @@
+import { component$, useSignal, type QwikIntrinsicElements } from '@builder.io/qwik';
+import { Modal, ModalContent, ModalFooter, ModalHeader } from '@qwik-ui/headless';
+
+export default component$(() => {
+  const showSig = useSignal(false);
+
+  return (
+    <>
+      <button
+        onClick$={() => (showSig.value = true)}
+        class="rounded-md border-2 border-slate-300 bg-slate-700 px-3 py-2 text-white"
+      >
+        Deactivate
+      </button>
+      <Modal
+        alert
+        bind:show={showSig}
+        class="shadow-dark-medium max-w-[25rem] rounded-md bg-white p-[28px] text-slate-950 backdrop:backdrop-blur backdrop:backdrop-brightness-50 dark:backdrop:backdrop-brightness-100"
+      >
+        <ModalHeader>
+          <h2 class="mb-2 text-lg font-bold">Deactive Account</h2>
+        </ModalHeader>
+        <ModalContent class="mb-2 pb-4 pt-2">
+          <p class="leading-5">Are you sure you want to deactivate your account?</p>
+        </ModalContent>
+        <ModalFooter class="flex justify-end gap-4">
+          <button
+            class="rounded-sm border border-none bg-slate-200 px-4 py-[10px] text-slate-600 outline-none focus-visible:outline-slate-700"
+            onClick$={() => (showSig.value = false)}
+          >
+            Cancel
+          </button>
+          <button
+            class="rounded-sm border border-none bg-red-200 px-4 py-[10px] text-red-900 outline-none focus-visible:outline-red-700"
+            onClick$={() => (showSig.value = false)}
+          >
+            Delete
+          </button>
+        </ModalFooter>
+        <button
+          onClick$={() => (showSig.value = false)}
+          class="absolute right-6 top-[26px]"
+        >
+          <CloseIcon class="h-8 w-8" />
+        </button>
+      </Modal>
+    </>
+  );
+});
+
+export function CloseIcon(props: QwikIntrinsicElements['svg'], key: string) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props} key={key}>
+      <path
+        fill="020617"
+        d="m12 13.4l2.9 2.9q.275.275.7.275t.7-.275q.275-.275.275-.7t-.275-.7L13.4 12l2.9-2.9q.275-.275.275-.7t-.275-.7q-.275-.275-.7-.275t-.7.275L12 10.6L9.1 7.7q-.275-.275-.7-.275t-.7.275q-.275.275-.275.7t.275.7l2.9 2.9l-2.9 2.9q-.275.275-.275.7t.275.7q.275.275.7.275t.7-.275l2.9-2.9Zm0 8.6q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Zm0-2q3.35 0 5.675-2.325T20 12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20Zm0-8Z"
+      ></path>
+    </svg>
+  );
+}
diff --git a/apps/website/src/routes/docs/headless/(components)/modal/examples/animation-snip.css b/apps/website/src/routes/docs/headless/(components)/modal/examples/animation-snip.css
new file mode 100644
index 000000000..12a5fbd49
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/(components)/modal/examples/animation-snip.css
@@ -0,0 +1,60 @@
+/* qui-modal -> class we place on <Modal /> */
+.qui-modal::backdrop {
+  background: hsla(0, 0%, 0%, 0.5);
+}
+
+.qui-modal.modal-showing {
+  animation: modalOpen 0.75s forwards cubic-bezier(0.6, 0.6, 0, 1);
+}
+
+.qui-modal.modal-showing::backdrop {
+  animation: modalFadeIn 0.75s forwards cubic-bezier(0.6, 0.6, 0, 1);
+}
+
+.qui-modal.modal-closing {
+  animation: modalClose 0.45s forwards cubic-bezier(0.6, 0.6, 0, 1);
+}
+
+.qui-modal.modal-closing::backdrop {
+  animation: modalFadeOut 0.45s forwards cubic-bezier(0.6, 0.6, 0, 1);
+}
+
+@keyframes modalOpen {
+  from {
+    opacity: 0;
+    transform: scale(150%);
+  }
+  to {
+    opacity: 1;
+    transform: scale(100%);
+  }
+}
+
+@keyframes modalClose {
+  from {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-200%);
+  }
+}
+
+@keyframes modalFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes modalFadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
diff --git a/apps/website/src/routes/docs/headless/(components)/modal/examples/animation.css b/apps/website/src/routes/docs/headless/(components)/modal/examples/animation.css
new file mode 100644
index 000000000..dae0d0d38
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/(components)/modal/examples/animation.css
@@ -0,0 +1,59 @@
+.my-animation::backdrop {
+  background: hsla(0, 0%, 0%, 0.5);
+}
+
+.my-animation.modal-showing {
+  animation: modalOpen 0.75s forwards cubic-bezier(0.6, 0.6, 0, 1);
+}
+
+.my-animation.modal-showing::backdrop {
+  animation: modalFadeIn 0.75s forwards cubic-bezier(0.6, 0.6, 0, 1);
+}
+
+.my-animation.modal-closing {
+  animation: modalClose 0.35s forwards cubic-bezier(0.6, 0.6, 0, 1);
+}
+
+.my-animation.modal-closing::backdrop {
+  animation: modalFadeOut 0.35s forwards cubic-bezier(0.6, 0.6, 0, 1);
+}
+
+@keyframes modalOpen {
+  from {
+    opacity: 0;
+    transform: scale(150%);
+  }
+  to {
+    opacity: 1;
+    transform: scale(100%);
+  }
+}
+
+@keyframes modalClose {
+  from {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-200%);
+  }
+}
+
+@keyframes modalFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes modalFadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
diff --git a/apps/website/src/routes/docs/headless/(components)/modal/examples/animation.tsx b/apps/website/src/routes/docs/headless/(components)/modal/examples/animation.tsx
new file mode 100644
index 000000000..6146fc0e7
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/(components)/modal/examples/animation.tsx
@@ -0,0 +1,88 @@
+import {
+  component$,
+  useSignal,
+  type QwikIntrinsicElements,
+  useStyles$,
+} from '@builder.io/qwik';
+import { Modal, ModalContent, ModalFooter, ModalHeader } from '@qwik-ui/headless';
+import styles from './animation.css?inline';
+
+export default component$(() => {
+  const showSig = useSignal(false);
+  useStyles$(styles);
+
+  return (
+    <>
+      <button
+        onClick$={() => {
+          showSig.value = true;
+        }}
+        class="rounded-md border-2 border-slate-300 bg-slate-700 px-3 py-2 text-white"
+      >
+        Open Modal
+      </button>
+      <Modal
+        bind:show={showSig}
+        class="my-animation shadow-dark-medium max-w-[25rem] rounded-md bg-white p-[28px] text-slate-950 backdrop:backdrop-blur backdrop:backdrop-brightness-50 dark:backdrop:backdrop-brightness-100"
+      >
+        <ModalHeader>
+          <h2 class="text-lg font-bold">Edit Profile</h2>
+        </ModalHeader>
+        <ModalContent class="mb-2 py-4">
+          <p class="mb-4 leading-5">
+            You can update your profile here. Hit the save button when finished.
+          </p>
+          <fieldset class="mb-1 flex items-baseline justify-between">
+            <label for="name">Name</label>
+            <input
+              class="mt-2 rounded-sm px-4 py-[10px] text-white"
+              id="name"
+              type="text"
+              placeholder="John Doe"
+            />
+          </fieldset>
+          <fieldset class="flex items-baseline justify-between">
+            <label for="email">Email</label>
+            <input
+              class="mt-2 rounded-sm px-4 py-3 text-white"
+              id="email"
+              type="text"
+              placeholder="johndoe@gmail.com"
+            />
+          </fieldset>
+        </ModalContent>
+        <ModalFooter class="flex justify-end gap-4">
+          <button
+            class="rounded-sm border border-none bg-slate-200 px-4 py-[10px] text-slate-600 outline-none focus-visible:outline-slate-700"
+            onClick$={() => (showSig.value = false)}
+          >
+            Cancel
+          </button>
+          <button
+            class="rounded-sm border border-none bg-green-200 px-4 py-[10px] text-green-900 outline-none focus-visible:outline-green-700"
+            onClick$={() => (showSig.value = false)}
+          >
+            Save Changes
+          </button>
+        </ModalFooter>
+        <button
+          onClick$={() => (showSig.value = false)}
+          class="absolute right-6 top-[26px]"
+        >
+          <CloseIcon class="h-8 w-8" />
+        </button>
+      </Modal>
+    </>
+  );
+});
+
+export function CloseIcon(props: QwikIntrinsicElements['svg'], key: string) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props} key={key}>
+      <path
+        fill="020617"
+        d="m12 13.4l2.9 2.9q.275.275.7.275t.7-.275q.275-.275.275-.7t-.275-.7L13.4 12l2.9-2.9q.275-.275.275-.7t-.275-.7q-.275-.275-.7-.275t-.7.275L12 10.6L9.1 7.7q-.275-.275-.7-.275t-.7.275q-.275.275-.275.7t.275.7l2.9 2.9l-2.9 2.9q-.275.275-.275.7t.275.7q.275.275.7.275t.7-.275l2.9-2.9Zm0 8.6q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Zm0-2q3.35 0 5.675-2.325T20 12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20Zm0-8Z"
+      ></path>
+    </svg>
+  );
+}
diff --git a/apps/website/src/routes/docs/headless/(components)/modal/examples/auto-focus.tsx b/apps/website/src/routes/docs/headless/(components)/modal/examples/auto-focus.tsx
new file mode 100644
index 000000000..3db1cb00f
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/(components)/modal/examples/auto-focus.tsx
@@ -0,0 +1,80 @@
+import { QwikIntrinsicElements, component$, useSignal } from '@builder.io/qwik';
+import { Modal, ModalContent, ModalFooter, ModalHeader } from '@qwik-ui/headless';
+
+export default component$(() => {
+  const showSig = useSignal(false);
+
+  return (
+    <>
+      <button
+        onClick$={() => (showSig.value = true)}
+        class="rounded-md border-2 border-slate-300 bg-slate-700 px-3 py-2 text-white"
+      >
+        Edit Profile
+      </button>
+      <Modal
+        bind:show={showSig}
+        class="shadow-dark-medium max-w-[25rem] rounded-md bg-white p-[28px] text-slate-950"
+      >
+        <ModalHeader>
+          <h2 class="text-lg font-bold">Edit Profile</h2>
+        </ModalHeader>
+        <ModalContent class="mb-2 pb-4 pt-2">
+          <p class="mb-4 leading-5">
+            You can update your profile here. Hit the save button when finished.
+          </p>
+          <fieldset class="mb-1 flex items-baseline justify-between">
+            <label for="name">Name</label>
+            <input
+              class="mt-2 rounded-sm px-4 py-[10px] text-white"
+              id="name"
+              type="text"
+              placeholder="John Doe"
+            />
+          </fieldset>
+          <fieldset class="flex items-baseline justify-between">
+            <label for="email">Email</label>
+            <input
+              autoFocus
+              class="mt-2 rounded-sm px-4 py-3 text-white"
+              id="email"
+              type="text"
+              placeholder="johndoe@gmail.com"
+            />
+          </fieldset>
+        </ModalContent>
+        <ModalFooter class="flex justify-end gap-4">
+          <button
+            class="rounded-sm border border-none bg-slate-200 px-4 py-[10px] text-slate-600 outline-none focus-visible:outline-slate-700"
+            onClick$={() => (showSig.value = false)}
+          >
+            Cancel
+          </button>
+          <button
+            class="rounded-sm border border-none bg-green-200 px-4 py-[10px] text-green-900 outline-none focus-visible:outline-green-700"
+            onClick$={() => (showSig.value = false)}
+          >
+            Save Changes
+          </button>
+        </ModalFooter>
+        <button
+          onClick$={() => (showSig.value = false)}
+          class="absolute right-6 top-[26px]"
+        >
+          <CloseIcon class="h-8 w-8" />
+        </button>
+      </Modal>
+    </>
+  );
+});
+
+export function CloseIcon(props: QwikIntrinsicElements['svg'], key: string) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props} key={key}>
+      <path
+        fill="020617"
+        d="m12 13.4l2.9 2.9q.275.275.7.275t.7-.275q.275-.275.275-.7t-.275-.7L13.4 12l2.9-2.9q.275-.275.275-.7t-.275-.7q-.275-.275-.7-.275t-.7.275L12 10.6L9.1 7.7q-.275-.275-.7-.275t-.7.275q-.275.275-.275.7t.275.7l2.9 2.9l-2.9 2.9q-.275.275-.275.7t.275.7q.275.275.7.275t.7-.275l2.9-2.9Zm0 8.6q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Zm0-2q3.35 0 5.675-2.325T20 12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20Zm0-8Z"
+      ></path>
+    </svg>
+  );
+}
diff --git a/apps/website/src/routes/docs/headless/(components)/modal/examples/backdrop-close.tsx b/apps/website/src/routes/docs/headless/(components)/modal/examples/backdrop-close.tsx
new file mode 100644
index 000000000..7114a0082
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/(components)/modal/examples/backdrop-close.tsx
@@ -0,0 +1,80 @@
+import { type QwikIntrinsicElements, component$, useSignal } from '@builder.io/qwik';
+import { Modal, ModalContent, ModalFooter, ModalHeader } from '@qwik-ui/headless';
+
+export default component$(() => {
+  const showSig = useSignal(false);
+
+  return (
+    <>
+      <button
+        onClick$={() => (showSig.value = true)}
+        class="rounded-md border-2 border-slate-300 bg-slate-700 px-3 py-2 text-white"
+      >
+        Open Modal
+      </button>
+      <Modal
+        closeOnBackdropClick={false}
+        bind:show={showSig}
+        class="shadow-dark-medium my-backdrop max-w-[25rem] rounded-md bg-white p-[28px] text-slate-950"
+      >
+        <ModalHeader>
+          <h2 class="text-lg font-bold">Edit Profile</h2>
+        </ModalHeader>
+        <ModalContent class="mb-2 pb-4 pt-2">
+          <p class="mb-4 leading-5">
+            You can update your profile here. Hit the save button when finished.
+          </p>
+          <fieldset class="mb-1 flex items-baseline justify-between">
+            <label for="name">Name</label>
+            <input
+              class="mt-2 rounded-sm px-4 py-[10px] text-white"
+              id="name"
+              type="text"
+              placeholder="John Doe"
+            />
+          </fieldset>
+          <fieldset class="flex items-baseline justify-between">
+            <label for="email">Email</label>
+            <input
+              class="mt-2 rounded-sm px-4 py-3 text-white"
+              id="email"
+              type="text"
+              placeholder="johndoe@gmail.com"
+            />
+          </fieldset>
+        </ModalContent>
+        <ModalFooter class="flex justify-end gap-4">
+          <button
+            class="rounded-sm border border-none bg-slate-200 px-4 py-[10px] text-slate-600 outline-none focus-visible:outline-slate-700"
+            onClick$={() => (showSig.value = false)}
+          >
+            Cancel
+          </button>
+          <button
+            class="rounded-sm border border-none bg-green-200 px-4 py-[10px] text-green-900 outline-none focus-visible:outline-green-700"
+            onClick$={() => (showSig.value = false)}
+          >
+            Save Changes
+          </button>
+        </ModalFooter>
+        <button
+          onClick$={() => (showSig.value = false)}
+          class="absolute right-6 top-[26px]"
+        >
+          <CloseIcon class="h-8 w-8" />
+        </button>
+      </Modal>
+    </>
+  );
+});
+
+export function CloseIcon(props: QwikIntrinsicElements['svg'], key: string) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props} key={key}>
+      <path
+        fill="020617"
+        d="m12 13.4l2.9 2.9q.275.275.7.275t.7-.275q.275-.275.275-.7t-.275-.7L13.4 12l2.9-2.9q.275-.275.275-.7t-.275-.7q-.275-.275-.7-.275t-.7.275L12 10.6L9.1 7.7q-.275-.275-.7-.275t-.7.275q-.275.275-.275.7t.275.7l2.9 2.9l-2.9 2.9q-.275.275-.275.7t.275.7q.275.275.7.275t.7-.275l2.9-2.9Zm0 8.6q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Zm0-2q3.35 0 5.675-2.325T20 12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20Zm0-8Z"
+      ></path>
+    </svg>
+  );
+}
diff --git a/apps/website/src/routes/docs/headless/(components)/modal/examples/backdrop.css b/apps/website/src/routes/docs/headless/(components)/modal/examples/backdrop.css
new file mode 100644
index 000000000..89c5fdafe
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/(components)/modal/examples/backdrop.css
@@ -0,0 +1,8 @@
+/* class we add to <Modal /> */
+.my-backdrop::backdrop {
+  /* changing background */
+  background: rgba(0, 0, 0, 0.4);
+
+  /* providing multiple filters */
+  backdrop-filter: grayscale(90%) blur(10px);
+}
diff --git a/apps/website/src/routes/docs/headless/(components)/modal/examples/backdrop.tsx b/apps/website/src/routes/docs/headless/(components)/modal/examples/backdrop.tsx
new file mode 100644
index 000000000..261098180
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/(components)/modal/examples/backdrop.tsx
@@ -0,0 +1,86 @@
+import {
+  type QwikIntrinsicElements,
+  component$,
+  useSignal,
+  useStyles$,
+} from '@builder.io/qwik';
+import { Modal, ModalContent, ModalFooter, ModalHeader } from '@qwik-ui/headless';
+import styles from './backdrop.css?inline';
+
+export default component$(() => {
+  const showSig = useSignal(false);
+  useStyles$(styles);
+
+  return (
+    <>
+      <button
+        onClick$={() => (showSig.value = true)}
+        class="rounded-md border-2 border-slate-300 bg-slate-700 px-3 py-2 text-white"
+      >
+        Open Modal
+      </button>
+      <Modal
+        bind:show={showSig}
+        class="shadow-dark-medium my-backdrop max-w-[25rem] rounded-md bg-white p-[28px] text-slate-950"
+      >
+        <ModalHeader>
+          <h2 class="text-lg font-bold">Edit Profile</h2>
+        </ModalHeader>
+        <ModalContent class="mb-2 pb-4 pt-2">
+          <p class="mb-4 leading-5">
+            You can update your profile here. Hit the save button when finished.
+          </p>
+          <fieldset class="mb-1 flex items-baseline justify-between">
+            <label for="name">Name</label>
+            <input
+              class="mt-2 rounded-sm px-4 py-[10px] text-white"
+              id="name"
+              type="text"
+              placeholder="John Doe"
+            />
+          </fieldset>
+          <fieldset class="flex items-baseline justify-between">
+            <label for="email">Email</label>
+            <input
+              class="mt-2 rounded-sm px-4 py-3 text-white"
+              id="email"
+              type="text"
+              placeholder="johndoe@gmail.com"
+            />
+          </fieldset>
+        </ModalContent>
+        <ModalFooter class="flex justify-end gap-4">
+          <button
+            class="rounded-sm border border-none bg-slate-200 px-4 py-[10px] text-slate-600 outline-none focus-visible:outline-slate-700"
+            onClick$={() => (showSig.value = false)}
+          >
+            Cancel
+          </button>
+          <button
+            class="rounded-sm border border-none bg-green-200 px-4 py-[10px] text-green-900 outline-none focus-visible:outline-green-700"
+            onClick$={() => (showSig.value = false)}
+          >
+            Save Changes
+          </button>
+        </ModalFooter>
+        <button
+          onClick$={() => (showSig.value = false)}
+          class="absolute right-6 top-[26px]"
+        >
+          <CloseIcon class="h-8 w-8" />
+        </button>
+      </Modal>
+    </>
+  );
+});
+
+export function CloseIcon(props: QwikIntrinsicElements['svg'], key: string) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props} key={key}>
+      <path
+        fill="020617"
+        d="m12 13.4l2.9 2.9q.275.275.7.275t.7-.275q.275-.275.275-.7t-.275-.7L13.4 12l2.9-2.9q.275-.275.275-.7t-.275-.7q-.275-.275-.7-.275t-.7.275L12 10.6L9.1 7.7q-.275-.275-.7-.275t-.7.275q-.275.275-.275.7t.275.7l2.9 2.9l-2.9 2.9q-.275.275-.275.7t.275.7q.275.275.7.275t.7-.275l2.9-2.9Zm0 8.6q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Zm0-2q3.35 0 5.675-2.325T20 12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20Zm0-8Z"
+      ></path>
+    </svg>
+  );
+}
diff --git a/apps/website/src/routes/docs/headless/(components)/modal/examples/bottom-sheet.tsx b/apps/website/src/routes/docs/headless/(components)/modal/examples/bottom-sheet.tsx
new file mode 100644
index 000000000..48ecb961f
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/(components)/modal/examples/bottom-sheet.tsx
@@ -0,0 +1,148 @@
+import {
+  component$,
+  useSignal,
+  type QwikIntrinsicElements,
+  useStyles$,
+} from '@builder.io/qwik';
+import { Modal, ModalContent, ModalFooter, ModalHeader } from '@qwik-ui/headless';
+
+export default component$(() => {
+  const showSig = useSignal(false);
+  useStyles$(`
+    .bottom-sheet::backdrop {
+      background: hsla(0, 0%, 0%, 0.5);
+    }
+    
+    .bottom-sheet.modal-showing {
+      animation: bottomSheetOpen 0.75s forwards cubic-bezier(0.6, 0.6, 0, 1);
+    }
+    
+    .bottom-sheet.modal-showing::backdrop {
+      animation: sheetFadeIn 0.75s forwards cubic-bezier(0.6, 0.6, 0, 1);
+    }
+    
+    .bottom-sheet.modal-closing {
+      animation: bottomSheetClose 0.35s forwards cubic-bezier(0.6, 0.6, 0, 1);
+    }
+    
+    .bottom-sheet.modal-closing::backdrop {
+      animation: sheetFadeOut 0.35s forwards cubic-bezier(0.6, 0.6, 0, 1);
+    }
+    
+    @keyframes bottomSheetOpen {
+      from {
+        opacity: 0;
+        transform: translateY(100%);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0%);
+      }
+    }
+    
+    @keyframes bottomSheetClose {
+      from {
+        opacity: 1;
+        transform: translateY(0%);
+      }
+      to {
+        opacity: 0;
+        transform: translateY(100%);
+      }
+    }
+    
+    @keyframes sheetFadeIn {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+    
+    @keyframes sheetFadeOut {
+      from {
+        opacity: 1;
+      }
+      to {
+        opacity: 0;
+      }
+    }
+    
+    `);
+
+  return (
+    <>
+      <button
+        onClick$={() => {
+          showSig.value = true;
+        }}
+        class="rounded-md border-2 border-slate-300 bg-slate-700 px-3 py-2 text-white"
+      >
+        Open Modal
+      </button>
+      <Modal
+        bind:show={showSig}
+        class="bottom-sheet shadow-dark-medium fixed bottom-0 mb-0 max-w-[25rem] rounded-md border-0 bg-white p-[28px] text-slate-950 backdrop:backdrop-blur backdrop:backdrop-brightness-50 dark:backdrop:backdrop-brightness-100"
+      >
+        <ModalHeader>
+          <h2 class="text-lg font-bold">Edit Profile</h2>
+        </ModalHeader>
+        <ModalContent class="mb-2 py-4">
+          <p class="mb-4 leading-5">
+            You can update your profile here. Hit the save button when finished.
+          </p>
+          <fieldset class="mb-1 flex items-baseline justify-between">
+            <label for="name">Name</label>
+            <input
+              class="mt-2 rounded-sm px-4 py-[10px] text-white"
+              id="name"
+              type="text"
+              placeholder="John Doe"
+            />
+          </fieldset>
+          <fieldset class="flex items-baseline justify-between">
+            <label for="email">Email</label>
+            <input
+              class="mt-2 rounded-sm px-4 py-3 text-white"
+              id="email"
+              type="text"
+              placeholder="johndoe@gmail.com"
+            />
+          </fieldset>
+        </ModalContent>
+        <ModalFooter class="flex justify-end gap-4">
+          <button
+            class="rounded-sm border border-none bg-slate-200 px-4 py-[10px] text-slate-600 outline-none focus-visible:outline-slate-700"
+            onClick$={() => (showSig.value = false)}
+          >
+            Cancel
+          </button>
+          <button
+            class="rounded-sm border border-none bg-green-200 px-4 py-[10px] text-green-900 outline-none focus-visible:outline-green-700"
+            onClick$={() => (showSig.value = false)}
+          >
+            Save Changes
+          </button>
+        </ModalFooter>
+        <button
+          onClick$={() => (showSig.value = false)}
+          class="absolute right-6 top-[26px]"
+        >
+          <CloseIcon class="h-8 w-8" />
+        </button>
+      </Modal>
+    </>
+  );
+});
+
+export function CloseIcon(props: QwikIntrinsicElements['svg'], key: string) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props} key={key}>
+      <path
+        fill="020617"
+        d="m12 13.4l2.9 2.9q.275.275.7.275t.7-.275q.275-.275.275-.7t-.275-.7L13.4 12l2.9-2.9q.275-.275.275-.7t-.275-.7q-.275-.275-.7-.275t-.7.275L12 10.6L9.1 7.7q-.275-.275-.7-.275t-.7.275q-.275.275-.275.7t.275.7l2.9 2.9l-2.9 2.9q-.275.275-.275.7t.275.7q.275.275.7.275t.7-.275l2.9-2.9Zm0 8.6q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Zm0-2q3.35 0 5.675-2.325T20 12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20Zm0-8Z"
+      ></path>
+    </svg>
+  );
+}
diff --git a/apps/website/src/routes/docs/headless/(components)/modal/examples/building-blocks-snip.tsx b/apps/website/src/routes/docs/headless/(components)/modal/examples/building-blocks-snip.tsx
new file mode 100644
index 000000000..c8f46fa03
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/(components)/modal/examples/building-blocks-snip.tsx
@@ -0,0 +1,14 @@
+import { component$, useSignal } from '@builder.io/qwik';
+import { Modal, ModalContent, ModalFooter, ModalHeader } from '@qwik-ui/headless';
+
+export default component$(() => {
+  const showSig = useSignal(false);
+
+  return (
+    <Modal bind:show={showSig}>
+      <ModalHeader />
+      <ModalContent />
+      <ModalFooter />
+    </Modal>
+  );
+});
diff --git a/apps/website/src/routes/docs/headless/(components)/modal/examples/hero.tsx b/apps/website/src/routes/docs/headless/(components)/modal/examples/hero.tsx
new file mode 100644
index 000000000..ca8b05293
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/(components)/modal/examples/hero.tsx
@@ -0,0 +1,80 @@
+import { component$, useSignal, type QwikIntrinsicElements } from '@builder.io/qwik';
+import { Modal, ModalContent, ModalFooter, ModalHeader } from '@qwik-ui/headless';
+
+export default component$(() => {
+  const showSig = useSignal(false);
+
+  return (
+    <>
+      <button
+        onClick$={() => (showSig.value = true)}
+        class="rounded-md border-2 border-slate-300 bg-slate-700 px-3 py-2 text-white"
+      >
+        Open Modal
+      </button>
+      <Modal
+        bind:show={showSig}
+        /* animation snippet in the animation section */
+        class="my-animation shadow-dark-medium max-w-[25rem] rounded-md bg-white p-[28px] text-slate-950 backdrop:backdrop-blur backdrop:backdrop-brightness-50 dark:backdrop:backdrop-brightness-100"
+      >
+        <ModalHeader>
+          <h2 class="text-lg font-bold">Edit Profile</h2>
+        </ModalHeader>
+        <ModalContent class="mb-2 pb-4 pt-2">
+          <p class="mb-4 leading-5">
+            You can update your profile here. Hit the save button when finished.
+          </p>
+          <fieldset class="mb-1 flex items-baseline justify-between">
+            <label for="name">Name</label>
+            <input
+              class="mt-2 rounded-sm px-4 py-[10px] text-white"
+              id="name"
+              type="text"
+              placeholder="John Doe"
+            />
+          </fieldset>
+          <fieldset class="flex items-baseline justify-between">
+            <label for="email">Email</label>
+            <input
+              class="mt-2 rounded-sm px-4 py-3 text-white"
+              id="email"
+              type="text"
+              placeholder="johndoe@gmail.com"
+            />
+          </fieldset>
+        </ModalContent>
+        <ModalFooter class="flex justify-end gap-4">
+          <button
+            class="rounded-sm border border-none bg-slate-200 px-4 py-[10px] text-slate-600 outline-none focus-visible:outline-slate-700"
+            onClick$={() => (showSig.value = false)}
+          >
+            Cancel
+          </button>
+          <button
+            class="rounded-sm border border-none bg-green-200 px-4 py-[10px] text-green-900 outline-none focus-visible:outline-green-700"
+            onClick$={() => (showSig.value = false)}
+          >
+            Save Changes
+          </button>
+        </ModalFooter>
+        <button
+          onClick$={() => (showSig.value = false)}
+          class="absolute right-6 top-[26px]"
+        >
+          <CloseIcon class="h-8 w-8" />
+        </button>
+      </Modal>
+    </>
+  );
+});
+
+export function CloseIcon(props: QwikIntrinsicElements['svg'], key: string) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props} key={key}>
+      <path
+        fill="020617"
+        d="m12 13.4l2.9 2.9q.275.275.7.275t.7-.275q.275-.275.275-.7t-.275-.7L13.4 12l2.9-2.9q.275-.275.275-.7t-.275-.7q-.275-.275-.7-.275t-.7.275L12 10.6L9.1 7.7q-.275-.275-.7-.275t-.7.275q-.275.275-.275.7t.275.7l2.9 2.9l-2.9 2.9q-.275.275-.275.7t.275.7q.275.275.7.275t.7-.275l2.9-2.9Zm0 8.6q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Zm0-2q3.35 0 5.675-2.325T20 12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20Zm0-8Z"
+      ></path>
+    </svg>
+  );
+}
diff --git a/apps/website/src/routes/docs/headless/(components)/modal/examples/inspect.tsx b/apps/website/src/routes/docs/headless/(components)/modal/examples/inspect.tsx
new file mode 100644
index 000000000..272381cfa
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/(components)/modal/examples/inspect.tsx
@@ -0,0 +1,79 @@
+import { QwikIntrinsicElements, component$, useSignal } from '@builder.io/qwik';
+import { Modal, ModalContent, ModalFooter, ModalHeader } from '@qwik-ui/headless';
+
+export default component$(() => {
+  const showSig = useSignal(false);
+
+  return (
+    <>
+      <button
+        onClick$={() => (showSig.value = true)}
+        class="rounded-md border-2 border-slate-300 bg-slate-700 px-3 py-2 text-white"
+      >
+        Open Modal
+      </button>
+      <Modal
+        bind:show={showSig}
+        class="shadow-dark-medium max-w-[25rem] rounded-md bg-white p-[28px] text-slate-950"
+      >
+        <ModalHeader>
+          <h2 class="text-lg font-bold">Edit Profile</h2>
+        </ModalHeader>
+        <ModalContent class="mb-2 pb-4 pt-2">
+          <p class="mb-4 leading-5">
+            You can update your profile here. Hit the save button when finished.
+          </p>
+          <fieldset class="mb-1 flex items-baseline justify-between">
+            <label for="name">Name</label>
+            <input
+              class="mt-2 rounded-sm px-4 py-[10px] text-white"
+              id="name"
+              type="text"
+              placeholder="John Doe"
+            />
+          </fieldset>
+          <fieldset class="flex items-baseline justify-between">
+            <label for="email">Email</label>
+            <input
+              class="mt-2 rounded-sm px-4 py-3 text-white"
+              id="email"
+              type="text"
+              placeholder="johndoe@gmail.com"
+            />
+          </fieldset>
+        </ModalContent>
+        <ModalFooter class="flex justify-end gap-4">
+          <button
+            class="rounded-sm border border-none bg-slate-200 px-4 py-[10px] text-slate-600 outline-none focus-visible:outline-slate-700"
+            onClick$={() => (showSig.value = false)}
+          >
+            Cancel
+          </button>
+          <button
+            class="rounded-sm border border-none bg-green-200 px-4 py-[10px] text-green-900 outline-none focus-visible:outline-green-700"
+            onClick$={() => (showSig.value = false)}
+          >
+            Save Changes
+          </button>
+        </ModalFooter>
+        <button
+          onClick$={() => (showSig.value = false)}
+          class="absolute right-6 top-[26px]"
+        >
+          <CloseIcon class="h-8 w-8" />
+        </button>
+      </Modal>
+    </>
+  );
+});
+
+export function CloseIcon(props: QwikIntrinsicElements['svg'], key: string) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props} key={key}>
+      <path
+        fill="020617"
+        d="m12 13.4l2.9 2.9q.275.275.7.275t.7-.275q.275-.275.275-.7t-.275-.7L13.4 12l2.9-2.9q.275-.275.275-.7t-.275-.7q-.275-.275-.7-.275t-.7.275L12 10.6L9.1 7.7q-.275-.275-.7-.275t-.7.275q-.275.275-.275.7t.275.7l2.9 2.9l-2.9 2.9q-.275.275-.275.7t.275.7q.275.275.7.275t.7-.275l2.9-2.9Zm0 8.6q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Zm0-2q3.35 0 5.675-2.325T20 12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20Zm0-8Z"
+      ></path>
+    </svg>
+  );
+}
diff --git a/apps/website/src/routes/docs/headless/(components)/modal/examples/page-load-snip.tsx b/apps/website/src/routes/docs/headless/(components)/modal/examples/page-load-snip.tsx
new file mode 100644
index 000000000..357af08c4
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/(components)/modal/examples/page-load-snip.tsx
@@ -0,0 +1,21 @@
+import { component$, useSignal, useVisibleTask$ } from '@builder.io/qwik';
+import { Modal, ModalContent, ModalFooter, ModalHeader } from '@qwik-ui/headless';
+
+export default component$(() => {
+  const showSig = useSignal(false);
+
+  useVisibleTask$(
+    () => {
+      showSig.value = true;
+    },
+    { strategy: 'document-ready' },
+  );
+
+  return (
+    <Modal bind:show={showSig}>
+      <ModalHeader />
+      <ModalContent />
+      <ModalFooter />
+    </Modal>
+  );
+});
diff --git a/apps/website/src/routes/docs/headless/(components)/modal/examples/sheet.tsx b/apps/website/src/routes/docs/headless/(components)/modal/examples/sheet.tsx
new file mode 100644
index 000000000..0e626b4ab
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/(components)/modal/examples/sheet.tsx
@@ -0,0 +1,148 @@
+import {
+  component$,
+  useSignal,
+  type QwikIntrinsicElements,
+  useStyles$,
+} from '@builder.io/qwik';
+import { Modal, ModalContent, ModalFooter, ModalHeader } from '@qwik-ui/headless';
+
+export default component$(() => {
+  const showSig = useSignal(false);
+  useStyles$(`
+  .sheet::backdrop {
+    background: hsla(0, 0%, 0%, 0.5);
+  }
+  
+  .sheet.modal-showing {
+    animation: sheetOpen 0.75s forwards cubic-bezier(0.6, 0.6, 0, 1);
+  }
+  
+  .sheet.modal-showing::backdrop {
+    animation: sheetFadeIn 0.75s forwards cubic-bezier(0.6, 0.6, 0, 1);
+  }
+  
+  .sheet.modal-closing {
+    animation: sheetClose 0.35s forwards cubic-bezier(0.6, 0.6, 0, 1);
+  }
+  
+  .sheet.modal-closing::backdrop {
+    animation: sheetFadeOut 0.35s forwards cubic-bezier(0.6, 0.6, 0, 1);
+  }
+  
+  @keyframes sheetOpen {
+    from {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0%);
+    }
+  }
+  
+  @keyframes sheetClose {
+    from {
+      opacity: 1;
+      transform: translateX(0%);
+    }
+    to {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+  }
+  
+  @keyframes sheetFadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  
+  @keyframes sheetFadeOut {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+  
+  `);
+
+  return (
+    <>
+      <button
+        onClick$={() => {
+          showSig.value = true;
+        }}
+        class="rounded-md border-2 border-slate-300 bg-slate-700 px-3 py-2 text-white"
+      >
+        Open Modal
+      </button>
+      <Modal
+        bind:show={showSig}
+        class="sheet shadow-dark-medium fixed bottom-[50%] right-0 top-[50%] mr-0 h-[80vh] max-w-[25rem] rounded-md border-0 bg-white p-[28px] text-slate-950 backdrop:backdrop-blur backdrop:backdrop-brightness-50 dark:backdrop:backdrop-brightness-100"
+      >
+        <ModalHeader>
+          <h2 class="text-lg font-bold">Edit Profile</h2>
+        </ModalHeader>
+        <ModalContent class="mb-2 py-4">
+          <p class="mb-4 leading-5">
+            You can update your profile here. Hit the save button when finished.
+          </p>
+          <fieldset class="mb-1 flex items-baseline justify-between">
+            <label for="name">Name</label>
+            <input
+              class="mt-2 rounded-sm px-4 py-[10px] text-white"
+              id="name"
+              type="text"
+              placeholder="John Doe"
+            />
+          </fieldset>
+          <fieldset class="flex items-baseline justify-between">
+            <label for="email">Email</label>
+            <input
+              class="mt-2 rounded-sm px-4 py-3 text-white"
+              id="email"
+              type="text"
+              placeholder="johndoe@gmail.com"
+            />
+          </fieldset>
+        </ModalContent>
+        <ModalFooter class="flex justify-end gap-4">
+          <button
+            class="rounded-sm border border-none bg-slate-200 px-4 py-[10px] text-slate-600 outline-none focus-visible:outline-slate-700"
+            onClick$={() => (showSig.value = false)}
+          >
+            Cancel
+          </button>
+          <button
+            class="rounded-sm border border-none bg-green-200 px-4 py-[10px] text-green-900 outline-none focus-visible:outline-green-700"
+            onClick$={() => (showSig.value = false)}
+          >
+            Save Changes
+          </button>
+        </ModalFooter>
+        <button
+          onClick$={() => (showSig.value = false)}
+          class="absolute right-6 top-[26px]"
+        >
+          <CloseIcon class="h-8 w-8" />
+        </button>
+      </Modal>
+    </>
+  );
+});
+
+export function CloseIcon(props: QwikIntrinsicElements['svg'], key: string) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props} key={key}>
+      <path
+        fill="020617"
+        d="m12 13.4l2.9 2.9q.275.275.7.275t.7-.275q.275-.275.275-.7t-.275-.7L13.4 12l2.9-2.9q.275-.275.275-.7t-.275-.7q-.275-.275-.7-.275t-.7.275L12 10.6L9.1 7.7q-.275-.275-.7-.275t-.7.275q-.275.275-.275.7t.275.7l2.9 2.9l-2.9 2.9q-.275.275-.275.7t.275.7q.275.275.7.275t.7-.275l2.9-2.9Zm0 8.6q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Zm0-2q3.35 0 5.675-2.325T20 12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20Zm0-8Z"
+      ></path>
+    </svg>
+  );
+}
diff --git a/apps/website/src/routes/docs/headless/(components)/modal/examples/transition.tsx b/apps/website/src/routes/docs/headless/(components)/modal/examples/transition.tsx
new file mode 100644
index 000000000..c6ab7883a
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/(components)/modal/examples/transition.tsx
@@ -0,0 +1,105 @@
+import {
+  component$,
+  useSignal,
+  type QwikIntrinsicElements,
+  useStyles$,
+} from '@builder.io/qwik';
+import { Modal, ModalContent, ModalFooter, ModalHeader } from '@qwik-ui/headless';
+// import styles from './animation.css?inline';
+
+export default component$(() => {
+  const showSig = useSignal(false);
+  useStyles$(`
+    .my-transition::backdrop {
+        background: rgba(0,0,0,0.5);
+    }
+
+    .my-transition, .my-transition::backdrop {
+        opacity: 0;
+        transition: opacity 300ms ease;
+    }
+
+    .my-transition.modal-showing, .my-transition.modal-showing::backdrop {
+        opacity: 1;
+    }
+    
+    .my-transition.modal-closing, .my-transition.modal-closing::backdrop {
+        opacity: 0;
+    }
+  `);
+
+  return (
+    <>
+      <button
+        onClick$={() => {
+          showSig.value = true;
+        }}
+        class="rounded-md border-2 border-slate-300 bg-slate-700 px-3 py-2 text-white"
+      >
+        Open Modal
+      </button>
+      <Modal
+        bind:show={showSig}
+        class="my-transition shadow-dark-medium max-w-[25rem] rounded-md bg-white p-[28px] text-slate-950"
+      >
+        <ModalHeader>
+          <h2 class="text-lg font-bold">Edit Profile</h2>
+        </ModalHeader>
+        <ModalContent class="mb-2 py-4">
+          <p class="mb-4 leading-5">
+            You can update your profile here. Hit the save button when finished.
+          </p>
+          <fieldset class="mb-1 flex items-baseline justify-between">
+            <label for="name">Name</label>
+            <input
+              class="mt-2 rounded-sm px-4 py-[10px] text-white"
+              id="name"
+              type="text"
+              placeholder="John Doe"
+            />
+          </fieldset>
+          <fieldset class="flex items-baseline justify-between">
+            <label for="email">Email</label>
+            <input
+              class="mt-2 rounded-sm px-4 py-3 text-white"
+              id="email"
+              type="text"
+              placeholder="johndoe@gmail.com"
+            />
+          </fieldset>
+        </ModalContent>
+        <ModalFooter class="flex justify-end gap-4">
+          <button
+            class="rounded-sm border border-none bg-slate-200 px-4 py-[10px] text-slate-600 outline-none focus-visible:outline-slate-700"
+            onClick$={() => (showSig.value = false)}
+          >
+            Cancel
+          </button>
+          <button
+            class="rounded-sm border border-none bg-green-200 px-4 py-[10px] text-green-900 outline-none focus-visible:outline-green-700"
+            onClick$={() => (showSig.value = false)}
+          >
+            Save Changes
+          </button>
+        </ModalFooter>
+        <button
+          onClick$={() => (showSig.value = false)}
+          class="absolute right-6 top-[26px]"
+        >
+          <CloseIcon class="h-8 w-8" />
+        </button>
+      </Modal>
+    </>
+  );
+});
+
+export function CloseIcon(props: QwikIntrinsicElements['svg'], key: string) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props} key={key}>
+      <path
+        fill="020617"
+        d="m12 13.4l2.9 2.9q.275.275.7.275t.7-.275q.275-.275.275-.7t-.275-.7L13.4 12l2.9-2.9q.275-.275.275-.7t-.275-.7q-.275-.275-.7-.275t-.7.275L12 10.6L9.1 7.7q-.275-.275-.7-.275t-.7.275q-.275.275-.275.7t.275.7l2.9 2.9l-2.9 2.9q-.275.275-.275.7t.275.7q.275.275.7.275t.7-.275l2.9-2.9Zm0 8.6q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Zm0-2q3.35 0 5.675-2.325T20 12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20Zm0-8Z"
+      ></path>
+    </svg>
+  );
+}
diff --git a/apps/website/src/routes/docs/headless/(components)/modal/exports.ts b/apps/website/src/routes/docs/headless/(components)/modal/exports.ts
new file mode 100644
index 000000000..071517b7c
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/(components)/modal/exports.ts
@@ -0,0 +1,6 @@
+export { statusByComponent } from '../../../../../_state/component-statuses';
+export { APITable } from '../../../_components/api-table/api-table';
+export { KeyboardInteractionTable } from '../../../_components/keyboard-interaction-table/keyboard-interaction-table';
+export { StatusBanner } from '../../../_components/status-banner/status-banner';
+export { AnatomyTable } from '../../../_components/anatomy-table/anatomy-table';
+export * from './examples';
diff --git a/apps/website/src/routes/docs/headless/(components)/modal/index.css b/apps/website/src/routes/docs/headless/(components)/modal/index.css
new file mode 100644
index 000000000..1b343fa43
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/(components)/modal/index.css
@@ -0,0 +1,31 @@
+.tabs-example [role='tab'] {
+  width: 250px;
+  background: var(--qwikui-slate-500);
+  color: white;
+}
+
+.tabs-example [role='tab'][disabled] {
+  color: var(--qwikui-slate-400);
+  background: var(--qwikui-slate-600);
+}
+
+.tabs-example [role='tab'].selected {
+  background: var(--qwikui-slate-950);
+  color: white;
+}
+
+.tabs-example [role='tablist'] {
+  border: 1px solid;
+  color: white;
+  margin-bottom: 1rem;
+}
+
+.tabs-example h3 {
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: white;
+}
+
+.tabs-example [role='tabpanel'] {
+  color: white;
+}
diff --git a/apps/website/src/routes/docs/headless/(components)/modal/index.mdx b/apps/website/src/routes/docs/headless/(components)/modal/index.mdx
new file mode 100644
index 000000000..6f8c40359
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/(components)/modal/index.mdx
@@ -0,0 +1,296 @@
+---
+title: Qwik UI | Modal
+---
+import ImgTestImage from '/public/images/test-image.png?jsx';
+
+import {
+  KeyboardInteractionTable,
+  APITable,
+  AnatomyTable,
+  StatusBanner,
+  statusByComponent,
+  ShowExample,
+  BackdropCss,
+  BuildingBlocksSnip,
+  PageLoadSnip,
+  AnimationSnip
+} from './exports';
+
+import testImage from '../../../../../../public/images/test-image.png'
+
+<StatusBanner status={statusByComponent.headless.Modal}/>
+
+# Modal
+
+A window overlaid on either the primary window or another dialog window. Modal content is placed in the [top layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer), rendering the underneath content as [inert](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert) / non-interactive.
+
+<ShowExample example="hero"/>
+
+The modal makes use of the HTML `dialog` element, which is supported in [every major browser](https://caniuse.com/?search=dialog). 
+
+> For non-modal UI elements, it is preferred to use [Qwik UI's popover component](../../../docs/headless/popover/) *(in progress)*. In the near future, Qwik's popover component can be applied to the most-semantically-relevant HTML element, including the `<dialog>` element itself for non-modal dialogs.
+
+Modals are used when an important choice needs to be made in the application. The rest of the content isn't interactive until a certain action has been performed. 
+
+<div class="mb-6 flex flex-col gap-2">
+[View Source Code ↗️](https://github.com/qwikifiers/qwik-ui/tree/main/packages/kit-headless/src/components/modal)
+
+[Report an issue 🚨](https://github.com/qwikifiers/qwik-ui/issues)
+
+[Edit This Page 🗒️](<https://github.com/qwikifiers/qwik-ui/edit/main/apps/website/src/routes/docs/headless/(components)/modal/index.mdx>)
+</div>
+
+## ✨ Features
+
+- Follows the WAI ARIA Dialog & Alertdialog design patterns.
+- Managed focus order
+- Scroll locking
+- Closes on escape
+- Toggle backdrop dismiss
+- Animation support
+- Transition support
+- Backdrop animations
+
+## Building Blocks
+
+<BuildingBlocksSnip />
+
+### 🎨 Anatomy
+  <AnatomyTable
+  propDescriptors={[
+    {
+      name: 'Modal',
+      description: 'The root component that contains the dialog element.',
+    },
+    {
+      name: 'ModalHeader',
+      description: 'A semantic header element that titles the modal.',
+    },
+    {
+      name: 'ModalContent',
+      description: `The main content of the modal.`,
+    },
+    {
+      name: 'ModalFooter',
+      description: `A semantic footer element used to contain menu action buttons.`,
+    },
+  ]}
+/>
+
+## Dialog extendability
+
+<ShowExample example="inspect"/>
+
+The Qwik UI Modal component is built on top of the `dialog` element. To see additional capabilities of the dialog, take a look at the [offical MDN page](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog).
+
+Our goal is to fill existing gaps, ensuring the modal is a11y compliant and enriched with HTML spec features, reducing reliance on Qwik UI maintainers.
+
+### Attribute example
+
+<ShowExample example="autoFocus" />
+
+Above is an example of the `autofocus` attribute, used to focus the 2nd input when the dialog is opened. 
+
+> When adding properties on `<Modal />`, it is the same as sticking the attribute, class, or API on the dialog element itself. 
+
+## Open or close the modal
+
+To open or close the modal, we can use `bind:show`, a custom signal bind that leverages the [bind](https://qwik.builder.io/docs/components/rendering/#bind-attribute) syntax in Qwik.
+
+<ShowExample example="inspect" />
+
+`showSig` is a signal that we pass into our Modal component to customize when the modal can be open or closed.
+
+The example above opens the modal when the **Open Modal** button is clicked and closes it when a button inside the modal is clicked.
+
+> In the future, we may not need to manage state for the opening and closing of dialogs and other UI elements. Here's Open UI's [invoker proposal](https://open-ui.org/components/invokers.explainer/).
+
+Custom signal binds are like a remote control for components, controlling states like opening or closing a modal.
+
+## The Top Layer
+
+<ImgTestImage class="rounded-xl mb-6" />
+
+In Chrome and Edge, a `top layer` UI button is shown in the dev tools. This means the element content is placed above any other content on the page, preventing any overflow or style issues. 
+
+The top layer is used in Qwik UI whenever a modal or popover is used in supported browsers. Popovers can be applied to any semantic element, modals in Qwik UI are tied to the `dialog` element.
+
+> The previous implementation of modals required the use of [portals](https://qwik.builder.io/docs/cookbook/portal/#portal), the top layer pseudo class is a **native solution** to this problem. No more z-index wars!
+
+## Backdrops
+
+To add a modal backdrop, the `::backdrop` pseudo element can be utilized. [Backdrops](https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop) are right underneath top layer elements.
+
+By default, the `dialog` element comes with a subtle backdrop, below is a snippet customizing the backdrop background along with the [backdrop filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) css property.
+
+<BackdropCss />
+
+<ShowExample example="backdrop"/>
+
+Styling a [backdrop in Tailwind](https://tailwindcss.com/docs/backdrop-blur) can be done using the `:backdrop` selector. In the example code below, we've changed the brightness based on dark or light mode, along with a blur.
+
+<ShowExample example="hero"/>
+
+## Dismissing Modals via Backdrop
+
+Modals in Qwik UI can be dismissed by default when the backdrop is clicked. However, this behavior can be modified using the `closeOnBackdropClick` property.
+
+<ShowExample example="backdropClose"/>
+
+The example above demonstrates a modal where the `closeOnBackdropClick` property is set to false. As a result, clicking on the backdrop does not dismiss the modal.
+
+## Alertdialog
+
+An alert dialog is a modal that interrupts user workflow to convey critical information and obtain a response. It's typically used for confirmations, error messages, or destructive actions. 
+
+<ShowExample example="alertDialog"/>
+
+By adding the `alert` prop to our component, we adhere to the [WAI ARIA Alertdialog specification](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/), enabling assistive technologies to distinguish alert dialogs for special handling.
+
+Alertdialogs do not allow the backdrop to be closed when clicked, regardless of whether the `closeOnBackdropClick` prop was set to true.
+
+## Focus Locking in Modals
+
+Qwik UI incorporates a feature known as focus locking, which confines the focus within the modal component when it is open. 
+
+<ShowExample example="inspect"/>
+
+This means that if a user is navigating through the modal using the Tab key, reaching the last focusable element and pressing Tab again will cycle the focus back to the first focusable element within the modal.
+
+> Focus locking behavior is provided by default in Qwik UI. If you encounter any use cases that require customized focus lock behavior, please [submit an issue](https://github.com/qwikifiers/qwik-ui/issues) on our GitHub repository.
+
+## Animations
+
+Animating things to display none has historically been a significant challenge on the web. This is because display none is a `discrete` property, and is **unanimatable**.
+
+> There is currently efforts to solve this problem. [New CSS properties](https://developer.chrome.com/blog/entry-exit-animations/) have been introduced, but currently do not provide good enough browser support.
+
+### Our current approach
+
+Qwik UI automatically detects any `animation` or `transition` declarations under the hood and waits for them to finish before closing the modal. If there is no animation, then it will close normally.
+
+### Adding a transition
+
+<ShowExample example="transition" />
+
+To add an transition, use the `modal-showing` and `modal-closing` css classes. Above is a snippet where we transition both the modal and backdrop's opacity.
+
+### Adding an animation
+
+<ShowExample example="animation" />
+
+To add an animation, it's the same as with transitions, using the `modal-showing` and `modal-closing` css classes. Below is a snippet of the animation example above.
+
+<AnimationSnip />
+
+### Backdrop animations
+
+Backdrop animations have also made significant progress in the last year, with support provided in over half of the major browsers, and close to 70% of users.
+
+To add a backdrop animation, make sure to use the `::backdrop` pseudo selector to the end of the `modal-closing` or `modal-opening` classes.
+
+> Firefox currently does not support backdrop animations. The fallback for browsers that do not support animated backdrops is the same as a non-animated backdrop.
+
+## Sheets
+
+Sheets are a type of modal/overlay used to provide temporary access to important information, while also being easily dismissible.
+
+### Side Sheet
+
+<ShowExample example="sheet" />
+
+### Bottom Sheet
+
+<ShowExample example="bottomSheet" />
+
+Bottom sheets are more prevalent in mobile applications, usually to simplify UI. That said, feel free to use them wherever fits best!
+
+## Open on page load
+
+There might come a time where a modal is needed open as soon as the page loads. Unfortunately, to create modals a client-side API is currently needed regardless of implementation.
+
+### SSR dilemma
+
+Qwik is the first framework with an [SSR portal implementation](https://qwik.builder.io/docs/cookbook/portal/#solution). SSR Portal capabilities are unique to Qwik City, because the alternative frameworks require a client-side API for portal functionality, such as `document.appendChild`.
+
+The problem with rendering the modal in the server, is that we lose some critical behavior:
+
+- The content behind the dialog is not inert (non-modal)
+- Focus and scroll lock customizations break
+- Will not work with meta frameworks like Astro.js
+
+The current solution across framework ecosystems, is to open the Modal eagerly on the client to keep the proper functionality.
+
+<PageLoadSnip />
+
+> We believe that the dialog element will have native support for SSR Modals in the future, gaining this behavior in the process.
+
+## Keyboard interaction
+
+<KeyboardInteractionTable
+  keyDescriptors={[
+    {
+      keyTitle: 'Escape',
+      description: 'Closes the dialog.',
+    },
+    {
+      keyTitle: 'Tab',
+      description: 'Moves focus to the next focusable item in the modal. If none, then loops back to the last item.',
+    },
+    {
+      keyTitle: 'Shift + Tab',
+      description: 'Moves focus to the previous focusable item in the modal. If none, then loops back to the last item.',
+    },
+  ]}
+/>
+
+## API
+
+<APITable
+  propDescriptors={[
+    {
+      name: 'bind:show',
+      type: 'Signal',
+      info: 'boolean',
+      description: 'Toggle between showing or hiding the modal.',
+    },
+    {
+      name: 'closeOnBackdropClick',
+      type: 'boolean',
+      description: 'A way to tell the modal to not hide when the ::backdrop is clicked.',
+    },
+    {
+      name: '<dialog>-Attributes',
+      type: `Qwik`,
+      description:
+        'A way to configure the modal with all native attributes the HTMLDialog defines.',
+      info: `QwikIntrinsicElements['dialog']`,
+    },
+    {
+      name: 'onHide()$',
+      type: 'function',
+      info: '() => void',
+      description:
+        'An event hook that gets notified whenever the modal gets hidden.',
+    },
+    {
+      name: 'onShow()$',
+      type: 'function',
+      info: '() => void',
+      description:
+        'An event hook that gets notified whenever the modal shows up.',
+    },
+    {
+      name: '.modal-showing',
+      type: 'CSS',
+      description:
+        'A CSS class used for entry animations.',
+    },
+    {
+      name: '.modal-closing',
+      type: 'CSS',
+      description:
+        'A CSS class used for exit animations.',
+    },
+  ]}
+/>
diff --git a/apps/website/src/routes/docs/headless/(components)/tabs/index.css b/apps/website/src/routes/docs/headless/(components)/tabs/index.css
index 1b343fa43..84df458ae 100644
--- a/apps/website/src/routes/docs/headless/(components)/tabs/index.css
+++ b/apps/website/src/routes/docs/headless/(components)/tabs/index.css
@@ -1,5 +1,5 @@
 .tabs-example [role='tab'] {
-  width: 250px;
+  width: 205px;
   background: var(--qwikui-slate-500);
   color: white;
 }
diff --git a/apps/website/src/routes/docs/headless/menu.md b/apps/website/src/routes/docs/headless/menu.md
index 8da786341..26128d1e6 100644
--- a/apps/website/src/routes/docs/headless/menu.md
+++ b/apps/website/src/routes/docs/headless/menu.md
@@ -10,6 +10,7 @@
 
 - [Accordion](/docs/headless/accordion)
 - [Combobox](/docs/headless/combobox)
+- [Modal](/docs/headless/modal)
 - [Popover](/docs/headless/popover)
 - [Select](/docs/headless/select)
 - [Separator](/docs/headless/separator)
diff --git a/apps/website/src/routes/layout.tsx b/apps/website/src/routes/layout.tsx
index 5cb8e53b4..43e43ff3e 100644
--- a/apps/website/src/routes/layout.tsx
+++ b/apps/website/src/routes/layout.tsx
@@ -27,11 +27,13 @@ export default component$(() => {
     <>
       <Header showBottomBorder={true} showVersion={true} />
       <QwikUIProvider>
-        <div class="mt-20 flex">
+        <div class="setup-grid-areas lg:grid-cols-custom-lg 2xl:grid-cols-custom-2xl grid">
           <DocsNavigation linksGroups={menuItemsGroups} />
-          <main class="docs">
+          <main class="docs [grid-area:main]">
             <Slot />
           </main>
+          {/* future table of contents */}
+          <div class="hidden [grid-area:toc]"></div>
         </div>
       </QwikUIProvider>
       <footer></footer>
diff --git a/apps/website/tailwind.config.cjs b/apps/website/tailwind.config.cjs
index 1dfe76e96..62a12558e 100644
--- a/apps/website/tailwind.config.cjs
+++ b/apps/website/tailwind.config.cjs
@@ -23,6 +23,11 @@ module.exports = {
     },
     important: true,
     extend: {
+      // arbitrary cols create multiple grids
+      gridTemplateColumns: {
+        'custom-lg': '320px 1fr',
+        'custom-2xl': '320px 1fr 320px',
+      },
       fontFamily: {
         sans: ['Inter Variable', 'sans-serif'],
       },
diff --git a/package.json b/package.json
index 56686f1ea..bda8ce4e6 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "@storybook/test-runner": "^0.13.0",
     "@storybook/testing-library": "^0.2.0",
     "@testing-library/cypress": "9.0.0",
+    "@types/body-scroll-lock": "3.1.1",
     "@types/eslint": "^8.44.2",
     "@types/node": "^20.5.7",
     "@typescript-eslint/eslint-plugin": "^5",
@@ -64,6 +65,7 @@
     "all-contributors-cli": "^6.26.1",
     "autoprefixer": "^10.4.15",
     "axe-core": "^4.7.2",
+    "body-scroll-lock": "4.0.0-beta.0",
     "chromatic": "^6.24.1",
     "clipboard-copy": "4.0.1",
     "commitizen": "^4.3.0",
@@ -72,6 +74,7 @@
     "cypress": "^13.0.0",
     "cypress-axe": "1.4.0",
     "cypress-ct-qwik": "0.3.0",
+    "cypress-real-events": "1.10.3",
     "cz-conventional-changelog": "^3.3.0",
     "daisyui": "^3.6.4",
     "danger": "^11.2.8",
@@ -80,6 +83,7 @@
     "eslint-plugin-cypress": "^2.14.0",
     "eslint-plugin-qwik": "^1.2.12",
     "eslint-plugin-storybook": "^0.6.13",
+    "focus-trap": "7.5.3",
     "husky": "^8.0.3",
     "jsdom": "22.1.0",
     "libphonenumber-js": "^1.10.43",
diff --git a/packages/kit-headless/cypress.config.ts b/packages/kit-headless/cypress.config.ts
index cee396fad..af776ccce 100644
--- a/packages/kit-headless/cypress.config.ts
+++ b/packages/kit-headless/cypress.config.ts
@@ -1,5 +1,5 @@
-import { defineConfig } from 'cypress';
 import { initPlugin } from '@frsource/cypress-plugin-visual-regression-diff/plugins';
+import { defineConfig } from 'cypress';
 
 export default defineConfig({
   component: {
diff --git a/packages/kit-headless/cypress/support/commands.ts b/packages/kit-headless/cypress/support/commands.ts
index a3c36711a..4b5c30b3f 100644
--- a/packages/kit-headless/cypress/support/commands.ts
+++ b/packages/kit-headless/cypress/support/commands.ts
@@ -10,6 +10,7 @@
 // ***********************************************
 
 import '@testing-library/cypress/add-commands';
+import 'cypress-real-events';
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
 declare namespace Cypress {
diff --git a/packages/kit-headless/cypress/tsconfig.json b/packages/kit-headless/cypress/tsconfig.json
index 34087ffc1..7c3c86c08 100644
--- a/packages/kit-headless/cypress/tsconfig.json
+++ b/packages/kit-headless/cypress/tsconfig.json
@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "../../../dist/out-tsc",
     "module": "commonjs",
-    "types": ["cypress", "@testing-library/cypress", "node"],
+    "types": ["cypress", "@testing-library/cypress", "node", "cypress-real-events"],
     "sourceMap": false
   },
   "include": [
diff --git a/packages/kit-headless/src/components/modal/index.ts b/packages/kit-headless/src/components/modal/index.ts
new file mode 100644
index 000000000..ae32edde0
--- /dev/null
+++ b/packages/kit-headless/src/components/modal/index.ts
@@ -0,0 +1,5 @@
+export * from './modal';
+export * from './modal-content';
+export * from './modal-footer';
+export * from './modal-header';
+export * from './types';
diff --git a/packages/kit-headless/src/components/modal/modal-behavior.ts b/packages/kit-headless/src/components/modal/modal-behavior.ts
new file mode 100644
index 000000000..72fd019d8
--- /dev/null
+++ b/packages/kit-headless/src/components/modal/modal-behavior.ts
@@ -0,0 +1,125 @@
+import { QwikMouseEvent } from '@builder.io/qwik';
+import { FocusTrap, createFocusTrap } from 'focus-trap';
+
+export type WidthState = {
+  width: number | null;
+};
+
+import { clearAllBodyScrollLocks } from 'body-scroll-lock';
+
+/**
+ * Traps the focus of the given Modal
+ * @returns FocusTrap
+ */
+export function trapFocus(modal: HTMLDialogElement): FocusTrap {
+  return createFocusTrap(modal, { escapeDeactivates: false });
+}
+
+export function activateFocusTrap(focusTrap: FocusTrap | null) {
+  try {
+    focusTrap?.activate();
+  } catch {
+    // Activating the focus trap throws if no tabbable elements are inside the container.
+    // If this is the case we are fine with not activating the focus trap.
+    // That's why we ignore the thrown error.
+  }
+}
+
+export function deactivateFocusTrap(focusTrap: FocusTrap | null) {
+  focusTrap?.deactivate();
+  focusTrap = null;
+}
+
+/**
+ * Shows the given Modal.
+ * Applies a CSS-Class to animate the modal-showing.
+ * Calls the given callback that is executed after the Modal has been opened.
+ */
+export async function showModal(modal: HTMLDialogElement) {
+  modal.showModal();
+  supportShowAnimation(modal);
+}
+
+/**
+ * Closes the given Modal.
+ * Applies a CSS-Class to animate the Modal-closing.
+ * Calls the given callback that is executed after the Modal has been closed.
+ */
+export async function closeModal(modal: HTMLDialogElement) {
+  supportClosingAnimation(modal, () => modal.close());
+}
+
+/**
+ * Determines if the backdrop of the Modal has been clicked.
+ */
+export function wasModalBackdropClicked(
+  modal: HTMLDialogElement | undefined,
+  clickEvent: QwikMouseEvent,
+): boolean {
+  if (!modal) {
+    return false;
+  }
+
+  const rect = modal.getBoundingClientRect();
+
+  const wasBackdropClicked =
+    rect.left > clickEvent.clientX ||
+    rect.right < clickEvent.clientX ||
+    rect.top > clickEvent.clientY ||
+    rect.bottom < clickEvent.clientY;
+
+  return wasBackdropClicked;
+}
+
+export function overrideNativeDialogEscapeBehaviorWith(continuation: () => void) {
+  return function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+
+      continuation();
+    }
+  };
+}
+
+/**
+ * Adds CSS-Class to support modal-opening-animation
+ */
+export function supportShowAnimation(modal: HTMLDialogElement) {
+  modal.classList.add('modal-showing');
+}
+
+/**
+ * Listens for animation/transition events in order to
+ * remove Animation-CSS-Classes after animation/transition ended.
+ */
+export function supportClosingAnimation(
+  modal: HTMLDialogElement,
+  afterAnimate: () => void,
+) {
+  modal.classList.remove('modal-showing');
+  modal.classList.add('modal-closing');
+
+  const { animationDuration, transitionDuration } = getComputedStyle(modal);
+
+  const runAnimationEnd = () => {
+    modal.classList.remove('modal-closing');
+    clearAllBodyScrollLocks();
+    afterAnimate();
+  };
+
+  const runTransitionEnd = () => {
+    modal.classList.remove('modal-closing');
+    clearAllBodyScrollLocks();
+    afterAnimate();
+  };
+
+  if (animationDuration !== '0s') {
+    modal.addEventListener('animationend', runAnimationEnd, { once: true });
+  } else if (transitionDuration !== '0s') {
+    modal.addEventListener('transitionend', runTransitionEnd, { once: true });
+  } else {
+    modal.classList.remove('modal-closing');
+    clearAllBodyScrollLocks();
+    afterAnimate();
+  }
+}
diff --git a/packages/kit-headless/src/components/modal/modal-content.tsx b/packages/kit-headless/src/components/modal/modal-content.tsx
new file mode 100644
index 000000000..4accf1850
--- /dev/null
+++ b/packages/kit-headless/src/components/modal/modal-content.tsx
@@ -0,0 +1,9 @@
+import { QwikIntrinsicElements, Slot, component$ } from '@builder.io/qwik';
+
+export const ModalContent = component$((props: QwikIntrinsicElements['div']) => {
+  return (
+    <div {...props}>
+      <Slot />
+    </div>
+  );
+});
diff --git a/packages/kit-headless/src/components/modal/modal-footer.tsx b/packages/kit-headless/src/components/modal/modal-footer.tsx
new file mode 100644
index 000000000..6bb6eeac8
--- /dev/null
+++ b/packages/kit-headless/src/components/modal/modal-footer.tsx
@@ -0,0 +1,9 @@
+import { QwikIntrinsicElements, Slot, component$ } from '@builder.io/qwik';
+
+export const ModalFooter = component$((props: QwikIntrinsicElements['footer']) => {
+  return (
+    <footer {...props}>
+      <Slot />
+    </footer>
+  );
+});
diff --git a/packages/kit-headless/src/components/modal/modal-header.tsx b/packages/kit-headless/src/components/modal/modal-header.tsx
new file mode 100644
index 000000000..b8f5292ee
--- /dev/null
+++ b/packages/kit-headless/src/components/modal/modal-header.tsx
@@ -0,0 +1,9 @@
+import { QwikIntrinsicElements, Slot, component$ } from '@builder.io/qwik';
+
+export const ModalHeader = component$((props: QwikIntrinsicElements['header']) => {
+  return (
+    <header {...props}>
+      <Slot />
+    </header>
+  );
+});
diff --git a/packages/kit-headless/src/components/modal/modal.css b/packages/kit-headless/src/components/modal/modal.css
new file mode 100644
index 000000000..fe7acbe71
--- /dev/null
+++ b/packages/kit-headless/src/components/modal/modal.css
@@ -0,0 +1,4 @@
+dialog {
+  animation: placeholder 0s;
+  transition: placeholder 0s;
+}
diff --git a/packages/kit-headless/src/components/modal/modal.spec.tsx b/packages/kit-headless/src/components/modal/modal.spec.tsx
new file mode 100644
index 000000000..2904202c4
--- /dev/null
+++ b/packages/kit-headless/src/components/modal/modal.spec.tsx
@@ -0,0 +1,248 @@
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import { Modal, ModalProps } from './modal';
+import { ModalContent } from './modal-content';
+import { ModalFooter } from './modal-footer';
+import { ModalHeader } from './modal-header';
+
+/**
+ * SUT - System under test
+ * Reference: https://en.wikipedia.org/wiki/System_under_test
+ */
+const Sut = component$((props: ModalProps) => {
+  const showSig = useSignal(false);
+
+  useStyles$(`
+    .modal.modal-showing {
+      animation: zoomOut 0.75s forwards cubic-bezier(0.6, 0.6, 0, 1);
+    }
+
+    .modal.modal-closing {
+      animation: zoomIn 0.45s forwards cubic-bezier(0.6, 0.6, 0, 1);
+    }
+
+    @keyframes zoomOut {
+      from {
+        opacity: 0;
+        transform: scale(150%);
+      }
+      to {
+        opacity: 1;
+        transform: scale(100%);
+      }
+    }
+
+    @keyframes zoomIn {
+      from {
+        opacity: 1;
+        transform: translateY(0%);
+      }
+      to {
+        opacity: 0;
+        transform: translateY(-200%);
+      }
+    }
+`);
+
+  return (
+    <>
+      <button onClick$={() => (showSig.value = true)} data-test="modal-trigger">
+        Open Modal
+      </button>
+      <Modal bind:show={showSig} {...props}>
+        <ModalHeader>
+          <h2 data-test="modal-header">Hello 👋</h2>
+        </ModalHeader>
+        <ModalContent>
+          <input type="text" data-test="modal-input" />
+        </ModalContent>
+        <ModalFooter>
+          <button onClick$={() => (showSig.value = false)} data-test="modal-close-button">
+            Close Modal
+          </button>
+        </ModalFooter>
+      </Modal>
+    </>
+  );
+});
+
+const SutNoInteractions = component$(() => {
+  const showSig = useSignal(false);
+  return (
+    <>
+      <button onClick$={() => (showSig.value = true)} data-test="modal-trigger">
+        Open Modal
+      </button>
+      <Modal bind:show={showSig}>
+        <ModalHeader>
+          <h2 data-test="modal-header">Hello 👋</h2>
+        </ModalHeader>
+        <ModalContent>
+          <span data-test="modal-content">I am a modal dialog.</span>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+});
+
+describe('Modal', () => {
+  it(`Given a Modal
+      WHEN opening it
+      THEN it passes a11y-Tests`, () => {
+    cy.mount(<Sut />);
+
+    cy.checkA11yForComponent();
+  });
+
+  it(`GIVEN a Modal
+      WHEN opening it
+      AND being visible
+      AND showing its heading
+      AND clicking the close button
+      THEN it is not visible any more`, () => {
+    cy.mount(<Sut />);
+
+    cy.get('[data-test=modal-trigger]').click();
+
+    cy.get('[data-test=modal-header]').should('be.visible').should('contain', 'Hello 👋');
+
+    cy.get('[data-test=modal-close-button]').click();
+
+    cy.get('dialog').should('not.be.visible');
+  });
+
+  it(`GIVEN a Modal
+      WHEN opening it with a button
+      AND clicking the backdrop
+      THEN it is not visible any more
+      THEN it focuses the opening button`, () => {
+    cy.mount(<Sut />);
+
+    cy.get('[data-test=modal-trigger]').click();
+
+    cy.get('body').click('top');
+
+    cy.get('dialog').should('not.be.visible');
+
+    cy.get('[data-test=modal-trigger]').should('be.focused');
+  });
+
+  it(`Given a Modal
+      WHEN closing the Modal on backdrop-click is deactivated
+      THEN it stays open, after the backdrop has been clicked`, () => {
+    cy.mount(<Sut closeOnBackdropClick={false} />);
+
+    cy.get('[data-test=modal-trigger]').click();
+
+    cy.get('body').click('top');
+
+    cy.get('dialog').should('be.visible');
+
+    cy.realPress('Escape');
+
+    cy.get('dialog').should('not.be.visible');
+  });
+
+  it(`GIVEN a Modal
+      WHEN opening it
+      AND hitting ESC on the keyboard
+      THEN it is not visible any more`, () => {
+    cy.mount(<Sut />);
+
+    cy.get('[data-test=modal-trigger]').click();
+
+    cy.realPress('Escape');
+
+    cy.get('dialog').should('not.be.visible');
+  });
+
+  it(`GIVEN a Modal
+      WHEN not opened
+      THEN it is not visible`, () => {
+    cy.mount(<Sut />);
+
+    cy.get('dialog').should('not.be.visible');
+  });
+
+  it(`GIVEN a Modal with one input field & one button
+      WHEN opening the Modal
+      THEN it focuses the input field`, () => {
+    cy.mount(<Sut />);
+
+    cy.get('[data-test=modal-trigger]').click();
+
+    cy.get('[data-test=modal-input]').should('be.focused');
+  });
+
+  it(`GIVEN a Modal with one input field & one button
+      WHEN opening the Modal
+      AND pressing TAB
+      THEN it focuses the close button`, () => {
+    cy.mount(<Sut />);
+
+    cy.get('[data-test=modal-trigger]').click();
+
+    cy.get('[data-test=modal-input]').should('be.focused');
+
+    cy.realPress('Tab');
+
+    cy.get('[data-test=modal-close-button]').should('be.focused');
+  });
+
+  it(`GIVEN a Modal with one input field & one button
+      WHEN opening the Modal
+      AND pressing TAB
+      AND pressing TAB
+      THEN it focuses the input field because the focus is trapped`, () => {
+    cy.mount(<Sut />);
+
+    cy.get('[data-test=modal-trigger]').click();
+
+    cy.get('[data-test=modal-input]').should('be.focused');
+
+    cy.realPress('Tab');
+
+    cy.get('[data-test=modal-close-button]').should('be.focused');
+
+    cy.realPress('Tab');
+
+    cy.get('[data-test=modal-input]').should('be.focused');
+
+    cy.realPress('Escape');
+
+    cy.get('dialog').should('not.be.visible');
+  });
+
+  it(`GIVEN a Modal with no tappable elements
+      WHEN opening the Modal
+      THEN it works without focus trap`, () => {
+    cy.mount(<SutNoInteractions />);
+
+    cy.get('[data-test=modal-trigger]').click();
+
+    cy.get('[data-test=modal-content]').should('be.visible');
+
+    cy.realPress('Escape');
+
+    cy.get('dialog').should('not.be.visible');
+  });
+
+  it(`GIVEN a animated Modal
+           WHEN opening the Modal
+           THEN it applies a CSS-Class allowing to animate the modal-showing
+           AND closing the Modal
+           THEN it applies a CSS-Class allowing to animate the Modal-closing
+           THEN it remove the CSS-Class`, () => {
+    cy.mount(<Sut class="modal" />);
+
+    cy.get('[data-test=modal-trigger]').click();
+
+    cy.get('dialog').should('have.class', 'modal-showing');
+    cy.get('[data-test=modal-header]').should('be.visible');
+
+    cy.realPress('Escape');
+
+    cy.get('dialog').should('have.class', 'modal-closing');
+    cy.get('dialog').should('not.be.visible');
+    cy.get('dialog').should('not.have.class', 'modal-closing');
+  });
+});
diff --git a/packages/kit-headless/src/components/modal/modal.stories.tsx b/packages/kit-headless/src/components/modal/modal.stories.tsx
new file mode 100644
index 000000000..af64ade40
--- /dev/null
+++ b/packages/kit-headless/src/components/modal/modal.stories.tsx
@@ -0,0 +1,54 @@
+import { component$, useSignal } from '@builder.io/qwik';
+import { Meta, StoryObj } from 'storybook-framework-qwik';
+import { Modal, ModalProps } from './modal';
+import { ModalContent } from './modal-content';
+import { ModalFooter } from './modal-footer';
+import { ModalHeader } from './modal-header';
+
+/**
+ * Using a component$ here to be able to use `useSignal`.
+ * useSignal cannot be used directly inside a story's render-Function.
+ */
+const DialogStoryComponent = component$((props: ModalProps) => {
+  const showSig = useSignal(false);
+
+  return (
+    <>
+      <button onClick$={() => (showSig.value = true)}>Open Dialog</button>
+
+      <Modal {...props} bind:show={showSig}>
+        <ModalHeader>
+          <h2 id="modal-heading">Hello 👋</h2>
+        </ModalHeader>
+        <ModalContent>
+          <p id="modal-text">I am a simple Modal</p>
+          <p>
+            {Array(500)
+              .fill(null)
+              .map(() => 'Hello World')
+              .join(' ')}
+          </p>
+        </ModalContent>
+        <ModalFooter>
+          <button onClick$={() => (showSig.value = false)}>Close Dialog</button>
+        </ModalFooter>
+      </Modal>
+      <div style="background-color: red; width: 50vw; height: 150vh"></div>
+    </>
+  );
+});
+
+const meta: Meta<ModalProps> = {
+  component: Modal,
+  args: {
+    'aria-describedby': 'modal-text',
+    'aria-labelledby': 'modal-heading',
+  },
+  render: (props) => <DialogStoryComponent {...props} />,
+};
+
+type Story = StoryObj<ModalProps>;
+
+export default meta;
+
+export const Primary: Story = {};
diff --git a/packages/kit-headless/src/components/modal/modal.tsx b/packages/kit-headless/src/components/modal/modal.tsx
new file mode 100644
index 000000000..db7312806
--- /dev/null
+++ b/packages/kit-headless/src/components/modal/modal.tsx
@@ -0,0 +1,91 @@
+import {
+  $,
+  QRL,
+  QwikIntrinsicElements,
+  QwikMouseEvent,
+  Signal,
+  Slot,
+  component$,
+  useSignal,
+  useStyles$,
+  useTask$,
+} from '@builder.io/qwik';
+
+import {
+  activateFocusTrap,
+  closeModal,
+  deactivateFocusTrap,
+  overrideNativeDialogEscapeBehaviorWith,
+  showModal,
+  trapFocus,
+  wasModalBackdropClicked,
+} from './modal-behavior';
+
+import { disableBodyScroll } from 'body-scroll-lock';
+
+import styles from './modal.css?inline';
+
+export type ModalProps = Omit<QwikIntrinsicElements['dialog'], 'open'> & {
+  onShow$?: QRL<() => void>;
+  onClose$?: QRL<() => void>;
+  'bind:show': Signal<boolean>;
+  closeOnBackdropClick?: boolean;
+  alert?: boolean;
+};
+
+export const Modal = component$((props: ModalProps) => {
+  useStyles$(styles);
+  const modalRefSig = useSignal<HTMLDialogElement>();
+
+  const { 'bind:show': showSig } = props;
+
+  useTask$(async function toggleModal({ track, cleanup }) {
+    const isOpen = track(() => showSig.value);
+    const modal = modalRefSig.value;
+
+    if (!modal) return;
+
+    const focusTrap = trapFocus(modal);
+
+    window.addEventListener(
+      'keydown',
+      overrideNativeDialogEscapeBehaviorWith(() => (showSig.value = false)),
+      { once: true },
+    );
+
+    if (isOpen) {
+      showModal(modal);
+      disableBodyScroll(modal, { reserveScrollBarGap: true });
+      props.onShow$?.();
+      activateFocusTrap(focusTrap);
+    } else {
+      closeModal(modal);
+      props.onClose$?.();
+    }
+
+    cleanup(() => {
+      deactivateFocusTrap(focusTrap);
+    });
+  });
+
+  const closeOnBackdropClick$ = $((event: QwikMouseEvent) => {
+    if (props.alert === true || props.closeOnBackdropClick === false) {
+      return;
+    }
+
+    if (wasModalBackdropClicked(modalRefSig.value, event)) {
+      showSig.value = false;
+    }
+  });
+
+  return (
+    <dialog
+      {...props}
+      role={props.alert === true ? 'alertdialog' : 'dialog'}
+      ref={modalRefSig}
+      onClick$={(event) => closeOnBackdropClick$(event)}
+    >
+      <Slot />
+    </dialog>
+  );
+});
diff --git a/packages/kit-headless/src/components/modal/types/index.ts b/packages/kit-headless/src/components/modal/types/index.ts
new file mode 100644
index 000000000..8434d690f
--- /dev/null
+++ b/packages/kit-headless/src/components/modal/types/index.ts
@@ -0,0 +1 @@
+export * from './modal-api';
diff --git a/packages/kit-headless/src/components/modal/types/modal-api.ts b/packages/kit-headless/src/components/modal/types/modal-api.ts
new file mode 100644
index 000000000..74fa01aa7
--- /dev/null
+++ b/packages/kit-headless/src/components/modal/types/modal-api.ts
@@ -0,0 +1,7 @@
+import { QRL, Signal } from '@builder.io/qwik';
+
+export type ModalApi = {
+  isOpen: Signal<boolean>;
+  open$: QRL<() => void>;
+  close$: QRL<() => void>;
+};
diff --git a/packages/kit-headless/src/index.ts b/packages/kit-headless/src/index.ts
index 4c593ebb7..7892e603b 100644
--- a/packages/kit-headless/src/index.ts
+++ b/packages/kit-headless/src/index.ts
@@ -1,27 +1,30 @@
 export * from './components/accordion/';
+export * from './components/autocomplete';
+export * from './components/autocomplete/';
+export * from './components/autocomplete/autocomplete-root';
 export * from './components/badge/badge';
+export * from './components/breadcrumb';
 export * from './components/button-group/button-group';
 export * from './components/card';
-export * from './components/autocomplete';
-export * from './components/combobox';
 export * as Carousel from './components/carousel/carousel';
 export * from './components/carousel/use';
-export * from './components/pagination/pagination';
+export * as Checkbox from './components/checkbox/checkbox';
 export * from './components/collapse/collapse';
+export * from './components/combobox';
+export * from './components/combobox/';
+export * from './components/modal';
 export * from './components/drawer';
 export * from './components/input-phone';
 export * as Input from './components/input/input';
-export * from './components/spinner/spinner';
 export * from './components/menu/menu';
+export * from './components/navigation-bar/navigation-bar';
+export * from './components/pagination/pagination';
 export * from './components/popover';
+export * from './components/qwik-ui-provider/qwik-ui-provider';
 export * from './components/rating/rating';
-export * from './components/tabs';
-export * from './components/tooltip/tooltip';
-export * as Checkbox from './components/checkbox/checkbox';
-export * as CheckboxProps from './components/checkbox/checkbox';
 export * from './components/select';
 export * from './components/separator/separator';
 export * from './components/slider';
-export * from './components/breadcrumb';
-export * from './components/navigation-bar/navigation-bar';
-export * from './components/qwik-ui-provider/qwik-ui-provider';
+export * from './components/spinner/spinner';
+export * from './components/tabs';
+export * from './components/tooltip/tooltip';
diff --git a/packages/kit-headless/src/utils/clsq.ts b/packages/kit-headless/src/utils/clsq.ts
new file mode 100644
index 000000000..b9cda96d9
--- /dev/null
+++ b/packages/kit-headless/src/utils/clsq.ts
@@ -0,0 +1,62 @@
+/**
+ * Custom version of 'clsx' utility migrated to TypeScript.
+ */
+
+export type ClassDictionary = Record<string, any>;
+export type ClassArray = ClassValue[];
+export type ClassValue =
+  | ClassArray
+  | ClassDictionary
+  | string
+  | number
+  | null
+  | boolean
+  | undefined;
+
+function toVal(mix: ClassValue) {
+  let str = '';
+
+  if (typeof mix === 'string' || typeof mix === 'number') {
+    str += mix;
+  } else if (typeof mix === 'object') {
+    if (Array.isArray(mix)) {
+      for (let k = 0; k < mix.length; k++) {
+        if (mix[k]) {
+          const y = toVal(mix[k]);
+          if (y) {
+            str && (str += ' ');
+            str += y;
+          }
+        }
+      }
+    } else {
+      for (const k in mix) {
+        if (mix[k]) {
+          str && (str += ' ');
+          str += k;
+        }
+      }
+    }
+  }
+
+  return str;
+}
+
+export function clsq(...inputs: ClassValue[]) {
+  let i = 0;
+  let tmp;
+  let str = '';
+  while (i < inputs.length) {
+    tmp = inputs[i++];
+    if (tmp) {
+      const x = toVal(tmp);
+      if (x) {
+        str && (str += ' ');
+        str += x;
+      }
+    }
+  }
+  return str;
+}
+
+export default clsq;
diff --git a/packages/kit-tailwind/src/index.ts b/packages/kit-tailwind/src/index.ts
index 78b7e91e1..94da0a1ad 100644
--- a/packages/kit-tailwind/src/index.ts
+++ b/packages/kit-tailwind/src/index.ts
@@ -1,22 +1,22 @@
 export * from './components/accordion/accordion';
 export * from './components/alert/alert';
 export * from './components/badge/badge';
-export * from './components/button/button';
-export * from './components/progress/progress';
+export * from './components/breadcrumb';
 export * from './components/button-group/button-group';
+export * from './components/button/button';
 export * from './components/card';
+export * from './components/checkbox/checkbox';
 export * from './components/collapse/collapse';
 export * from './components/drawer/drawer';
-export * from './components/spinner/spinner';
+export * from './components/navigation-bar/navigation-bar';
+export * from './components/pagination/pagination';
 export * from './components/popover/popover';
+export * from './components/progress/progress';
 export * from './components/rating/rating';
+export * from './components/ratio/radio';
+export * from './components/slider/slider';
+export * from './components/spinner/spinner';
 export * from './components/tabs';
 export * from './components/toast/toast';
 export * from './components/toggle/toggle';
 export * from './components/tooltip/tooltip';
-export * from './components/checkbox/checkbox';
-export * from './components/pagination/pagination';
-export * from './components/ratio/radio';
-export * from './components/slider/slider';
-export * from './components/breadcrumb';
-export * from './components/navigation-bar/navigation-bar';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7a0b1b2e1..3b29ea8e5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -114,6 +114,9 @@ importers:
       '@testing-library/cypress':
         specifier: 9.0.0
         version: 9.0.0(cypress@13.0.0)
+      '@types/body-scroll-lock':
+        specifier: 3.1.1
+        version: 3.1.1
       '@types/eslint':
         specifier: ^8.44.2
         version: 8.44.2
@@ -141,6 +144,9 @@ importers:
       axe-core:
         specifier: ^4.7.2
         version: 4.7.2
+      body-scroll-lock:
+        specifier: 4.0.0-beta.0
+        version: 4.0.0-beta.0
       chromatic:
         specifier: ^6.24.1
         version: 6.24.1
@@ -165,6 +171,9 @@ importers:
       cypress-ct-qwik:
         specifier: 0.3.0
         version: 0.3.0(@builder.io/qwik@1.2.12)(cypress@13.0.0)
+      cypress-real-events:
+        specifier: 1.10.3
+        version: 1.10.3(cypress@13.0.0)
       cz-conventional-changelog:
         specifier: ^3.3.0
         version: 3.3.0(@swc/core@1.3.82)
@@ -189,6 +198,9 @@ importers:
       eslint-plugin-storybook:
         specifier: ^0.6.13
         version: 0.6.13(eslint@8.48.0)(typescript@5.2.2)
+      focus-trap:
+        specifier: 7.5.3
+        version: 7.5.3
       husky:
         specifier: ^8.0.3
         version: 8.0.3
@@ -8581,6 +8593,10 @@ packages:
       '@types/node': 20.5.9
     dev: true
 
+  /@types/body-scroll-lock@3.1.1:
+    resolution: {integrity: sha512-W5tM34rxQzEGXomqg5A2V8pHl/NQDCCuf7pygI2+2SZEbFB6zPDuX3uwkUxlVLIF31fob4elEjiMLliq3szk0g==}
+    dev: true
+
   /@types/cacheable-request@6.0.3:
     resolution: {integrity: sha512-IQ3EbTzGxIigb1I3qPZc1rWJnH0BmSKv5QYTalEwweFvyBDLSAe24zP0le/hyi7ecGfZVlIVAg4BZqb8WBwKqw==}
     dependencies:
@@ -10409,6 +10425,10 @@ packages:
       - supports-color
     dev: true
 
+  /body-scroll-lock@4.0.0-beta.0:
+    resolution: {integrity: sha512-a7tP5+0Mw3YlUJcGAKUqIBkYYGlYxk2fnCasq/FUph1hadxlTRjF+gAcZksxANnaMnALjxEddmSi/H3OR8ugcQ==}
+    dev: true
+
   /boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
     dev: true
@@ -11602,6 +11622,14 @@ packages:
       cypress: 13.0.0
     dev: true
 
+  /cypress-real-events@1.10.3(cypress@13.0.0):
+    resolution: {integrity: sha512-YN3fn+CJIAM638sE6uMvv2/n3PsWowdd0rOiN6ZoyezNAMyENfuQHvccLKZpN+apGfQZYetCml6QXLYgDid2fg==}
+    peerDependencies:
+      cypress: ^4.x || ^5.x || ^6.x || ^7.x || ^8.x || ^9.x || ^10.x || ^11.x || ^12.x || ^13.x
+    dependencies:
+      cypress: 13.0.0
+    dev: true
+
   /cypress@13.0.0:
     resolution: {integrity: sha512-nWHU5dUxP2Wm/zrMd8SWTTl706aJex/l+H4vi/tbu2SWUr17BUcd/sIYeqyxeoSPW1JFV2pT1pf4JEImH/POMg==}
     engines: {node: ^16.0.0 || ^18.0.0 || >=20.0.0}
@@ -13489,6 +13517,12 @@ packages:
     engines: {node: '>=0.4.0'}
     dev: true
 
+  /focus-trap@7.5.3:
+    resolution: {integrity: sha512-7UsT/eSJcTPF0aZp73u7hBRTABz26knRRTJfoTGFCQD5mUImLIIOwWWCrtoQdmWa7dykBi6H+Cp5i3S/kvsMeA==}
+    dependencies:
+      tabbable: 6.2.0
+    dev: true
+
   /follow-redirects@1.15.2:
     resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
     engines: {node: '>=4.0'}
@@ -21261,6 +21295,10 @@ packages:
     resolution: {integrity: sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==}
     dev: true
 
+  /tabbable@6.2.0:
+    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
+    dev: true
+
   /tailwind-merge@1.14.0:
     resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==}