diff --git a/docs/src/assets/styles.css b/docs/src/assets/styles.css
index 498f08d..7b4895a 100644
--- a/docs/src/assets/styles.css
+++ b/docs/src/assets/styles.css
@@ -39,6 +39,7 @@
     --container-md: 28rem;
     --container-lg: 32rem;
     --container-xl: 36rem;
+    --container-3xl: 48rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -596,6 +597,9 @@
   .w-max {
     width: max-content;
   }
+  .max-w-3xl {
+    max-width: var(--container-3xl);
+  }
   .max-w-72 {
     max-width: calc(var(--spacing) * 72);
   }
@@ -659,6 +663,9 @@
   .shrink-0 {
     flex-shrink: 0;
   }
+  .basis-full {
+    flex-basis: 100%;
+  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -761,6 +768,9 @@
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
+  .gap-7 {
+    gap: calc(var(--spacing) * 7);
+  }
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
@@ -1673,16 +1683,41 @@
       width: 239px;
     }
   }
+  .md\:w-auto {
+    @media (width >= 48rem) {
+      width: auto;
+    }
+  }
   .md\:max-w-\[200px\] {
     @media (width >= 48rem) {
       max-width: 200px;
     }
   }
+  .md\:min-w-80 {
+    @media (width >= 48rem) {
+      min-width: calc(var(--spacing) * 80);
+    }
+  }
+  .md\:flex-auto {
+    @media (width >= 48rem) {
+      flex: auto;
+    }
+  }
   .md\:flex-row {
     @media (width >= 48rem) {
       flex-direction: row;
     }
   }
+  .md\:items-center {
+    @media (width >= 48rem) {
+      align-items: center;
+    }
+  }
+  .md\:items-start {
+    @media (width >= 48rem) {
+      align-items: flex-start;
+    }
+  }
   .md\:border-l {
     @media (width >= 48rem) {
       border-left-style: var(--tw-border-style);
@@ -3556,9 +3591,6 @@
       line-height: var(--tw-leading, var(--text-base--line-height));
       --tw-font-weight: var(--font-weight-medium);
       font-weight: var(--font-weight-medium);
-      & + p {
-        margin-top: calc(var(--spacing) * -1.5);
-      }
     }
   }
   .field {
@@ -3609,8 +3641,26 @@
       --tw-leading: var(--leading-snug);
       line-height: var(--leading-snug);
     }
+    &[data-orientation='horizontal'] {
+      flex-direction: row;
+      align-items: center;
+      &:has(>section) {
+        align-items: flex-start;
+      }
+      & p {
+        text-wrap: balance;
+      }
+      &:has(>section) {
+        &>[type=checkbox],[type=radio] {
+          margin-top: 1px;
+        }
+      }
+      &>label {
+        flex: auto;
+      }
+    }
   }
-  .fieldset legend + p, .field p {
+  .fieldset legend + p, .field > p, .field section > p {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
     --tw-leading: var(--leading-normal);
@@ -3618,12 +3668,6 @@
     --tw-font-weight: var(--font-weight-normal);
     font-weight: var(--font-weight-normal);
     color: var(--color-muted-foreground);
-    &:last-child {
-      margin-top: calc(var(--spacing) * 0);
-    }
-    &:nth-last-child(2) {
-      margin-top: calc(var(--spacing) * -1);
-    }
     &>a {
       text-decoration-line: underline;
     }
@@ -3634,6 +3678,17 @@
       color: var(--color-primary);
     }
   }
+  .fieldset legend + p {
+    margin-top: calc(var(--spacing) * -1.5);
+  }
+  .field > p {
+    &:last-child {
+      margin-top: calc(var(--spacing) * 0);
+    }
+    &:nth-last-child(2) {
+      margin-top: calc(var(--spacing) * -1);
+    }
+  }
 }
 @layer components {
   :is(.form, .field) input[type='text'], :is(.form, .field) input[type='email'], :is(.form, .field) input[type='password'], :is(.form, .field) input[type='number'], :is(.form, .field) input[type='file'], :is(.form, .field) input[type='tel'], :is(.form, .field) input[type='url'], :is(.form, .field) input[type='search'], :is(.form, .field) input[type='date'], :is(.form, .field) input[type='datetime-local'], :is(.form, .field) input[type='month'], :is(.form, .field) input[type='week'], :is(.form, .field) input[type='time'], .input[type='text'], .input[type='email'], .input[type='password'], .input[type='number'], .input[type='file'], .input[type='tel'], .input[type='url'], .input[type='search'], .input[type='date'], .input[type='datetime-local'], .input[type='month'], .input[type='week'], .input[type='time'] {
diff --git a/docs/src/components/field.njk b/docs/src/components/field.njk
index 74e7f7e..c281856 100644
--- a/docs/src/components/field.njk
+++ b/docs/src/components/field.njk
@@ -22,16 +22,13 @@ toc:
         id: example-radio
       - label: Switch
         id: example-switch
+      - label: Responsive Layout
+        id: example-responsive
 ---
 
 {% from "macros/code_preview.njk" import code_preview %}
 {% from "macros/code_block.njk" import code_block %}
 
-<div class="alert-destructive">
-  {% lucide "triangle-alert"%}
-  <h2>This component is still under development, API may change.</h2>
-</div>
-
 {% set code_demo %}
 <form class="w-full max-w-md space-y-6">
   <fieldset class="fieldset">
@@ -129,7 +126,7 @@ toc:
   <p><strong>Fields</strong> have the following HTML structure:</p>
   <dl>
     <dt><code class="highlight language-html">&lt;div role="group" class="field"&gt;</code></dt>
-    <dd>Field container.
+    <dd>Field container. Add <code>data-orientation="horizontal"</code> to align controls horizontally. For responsive layouts, use standard Tailwind responsive classes.
       <dl>
         <dt><code class="highlight language-html">&lt;label&gt;</code></dt>
         <dd>Label for the input.</dd>
@@ -139,6 +136,8 @@ toc:
         <dd>Helper text. Use <code>aria-describedby</code> on the input to reference this element's <code>id</code>.</dd>
         <dt><code class="highlight language-html">&lt;p role="alert"&gt;</code> <span class="badge-secondary">Optional</span></dt>
         <dd>Error message. Use <code>aria-describedby</code> on the input and <code>aria-invalid="true"</code> to reference this element's <code>id</code>.</dd>
+        <dt><code class="highlight language-html">&lt;section&gt;</code> <span class="badge-secondary">Optional</span></dt>
+        <dd>Wraps label and description when the label sits beside the input (e.g. <code>data-orientation="horizontal"</code>). Not required if you have no description.</dd>
       </dl>
     </dd>
   </dl>
@@ -321,14 +320,14 @@ toc:
 
   <hr role="separator">
 
-  <div class="field">
-    <div class="flex w-full gap-3 flex-row items-center">
+  <div class="field" data-orientation="horizontal">
+    {# <div class="flex w-full items-center gap-3"> #}
       <input id="sync-desktop-documents" type="checkbox" checked class="input self-start">
       <section>
         <label for="sync-desktop-documents">Sync Desktop & Documents folders</label>
         <p>Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other devices.</p>
       </section>
-    </div>
+    {# </div> #}
   </div>
 </fieldset>
 {% endset %}
@@ -370,11 +369,11 @@ toc:
 <h3 id="example-switch"><a href="#example-switch">Switch</a></h3>
 
 <section class="prose">
-  <p>Use horizontal layout for switches by wrapping in a flex container.</p>
+  <p>Set <code>data-orientation="horizontal"</code> on <code>.field</code> to align labels and controls side-by-side.</p>
 </section>
 
 {% set code_switch %}
-<div role="group" class="field flex-row">
+<div role="group" class="field" data-orientation="horizontal">
   <section>
     <label for="multi-factor-authentication">Multi-factor authentication</label>
     <p>Enable multi-factor authentication. If you do not have a two-factor device, you can use a one-time code sent to your email.</p>
@@ -410,7 +409,51 @@ toc:
       <input id="choice-card" type="radio" name="choice-card" class="self-start">
     </label>
   </div>
-</div>
+</fieldset>
 {% endset %}
 
-{{ code_preview("field-choice-card", code_choice_card, class="w-full max-w-md") }}
\ No newline at end of file
+{{ code_preview("field-choice-card", code_choice_card, class="w-full max-w-md") }}
+
+<h3 id="example-responsive"><a href="#example-responsive">Responsive Layout</a></h3>
+
+<section class="prose">
+  <p>For responsive layouts, use standard Tailwind responsive classes directly on <code>.field</code>. This example stacks vertically on mobile and switches to horizontal at the <code>md</code> breakpoint.</p>
+</section>
+
+{% set code_responsive %}
+<fieldset class="fieldset">
+  <legend>Profile</legend>
+  <p>Keep your profile details up to date.</p>
+
+  <hr role="separator">  
+
+  <div class="flex flex-col gap-7">
+    <div role="group" class="field flex-col md:flex-row md:items-center">
+      <section class="md:flex-auto">
+        <label for="profile-name">Name</label>
+        <p id="profile-name-desc">Provide your full name for identification.</p>
+      </section>
+      <input id="profile-name" type="text" placeholder="Evil Rabbit" aria-describedby="profile-name-desc" class="md:w-auto md:min-w-80">
+    </div>
+
+    <hr role="separator">
+
+    <div role="group" class="field flex-col md:flex-row md:items-start">
+      <section class="md:flex-auto">
+        <label for="profile-bio">Message</label>
+        <p id="profile-bio-desc">You can write your message here. Keep it short, preferably under 100 characters.</p>
+      </section>
+      <textarea id="profile-bio" rows="3" placeholder="Hello, world!" aria-describedby="profile-bio-desc" class="md:w-auto md:min-w-80"></textarea>
+    </div>
+
+    <hr role="separator">
+
+    <div role="group" class="field flex-col md:flex-row md:items-center">
+      <button type="submit" class="btn md:w-auto">Submit</button>
+      <button type="button" class="btn-outline md:w-auto">Cancel</button>
+    </div>
+  </div>
+</fieldset>
+{% endset %}
+
+{{ code_preview("field-responsive", code_responsive, class="w-full max-w-3xl") }}
\ No newline at end of file
diff --git a/docs/src/components/spinner.njk b/docs/src/components/spinner.njk
index 6109b06..70bc2fe 100644
--- a/docs/src/components/spinner.njk
+++ b/docs/src/components/spinner.njk
@@ -203,13 +203,12 @@ toc:
     <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">129 MB / 1000 MB</p>
   </div>
   <button class="btn-sm-outline self-start">Cancel</button>
-  <footer class="w-full">
+  <footer class="flex basis-full items-center justify-between gap-2">
     <div class="bg-primary/20 relative h-2 w-full overflow-hidden rounded-full">
-        <div id="demo-progress" class="bg-primary h-full w-full flex-1 transition-all" style="width: 13%"></div>
+      <div id="demo-progress" class="bg-primary h-full w-full flex-1 transition-all" style="width: 13%"></div>
     </div>
   </footer>
 </article>
 {% endset %}
 
-{{ code_preview("spinner-item", code_item, class="w-full max-w-md") }}
-
+{{ code_preview("spinner-item", code_item, class="w-full max-w-md") }}
\ No newline at end of file
diff --git a/package.json b/package.json
index afc3f99..450f439 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "basecoat",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "shadcn/ui for the rest of us",
   "author": "hunvreus",
   "type": "module",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 4b59715..ab9d5fc 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "basecoat-cli",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Add Basecoat components to your project",
   "author": "hunvreus",
   "license": "MIT",
diff --git a/packages/css/package.json b/packages/css/package.json
index 997c21b..bbbab26 100644
--- a/packages/css/package.json
+++ b/packages/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "basecoat-css",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Tailwind CSS for Basecoat components",
   "author": {
     "name": "hunvreus",
@@ -26,8 +26,7 @@
     "css",
     "html",
     "jinja",
-    "nunjucks",
-    "alpinejs"
+    "nunjucks"
   ],
   "repository": {
     "type": "git",
@@ -43,6 +42,8 @@
     "./css": "./dist/basecoat.css",
     "./all": "./dist/js/all.js",
     "./all.min": "./dist/js/all.min.js",
+    "./command": "./dist/js/command.js",
+    "./command.min": "./dist/js/command.min.js",
     "./dropdown-menu": "./dist/js/dropdown-menu.js",
     "./dropdown-menu.min": "./dist/js/dropdown-menu.min.js",
     "./popover": "./dist/js/popover.js",
diff --git a/src/css/basecoat.css b/src/css/basecoat.css
index 7345ea1..d9ef174 100644
--- a/src/css/basecoat.css
+++ b/src/css/basecoat.css
@@ -695,10 +695,6 @@
 
     > legend {
       @apply text-base font-medium mb-3;
-
-      & + p {
-        @apply -mt-1.5;
-      }
     }
   }
   .field {
@@ -718,10 +714,21 @@
     section {
       @apply flex flex-1 flex-col gap-1.5 leading-snug;
     }
+
+    &[data-orientation='horizontal'] {
+      @apply flex-row items-center [&>label]:flex-auto has-[>section]:items-start has-[>section]:[&>[type=checkbox],[type=radio]]:mt-px [&_p]:text-balance;
+    }
   }
   .fieldset legend + p,
-  .field p {
-    @apply text-muted-foreground text-sm leading-normal font-normal last:mt-0 nth-last-2:-mt-1 [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4;
+  .field > p,
+  .field section > p {
+    @apply text-muted-foreground text-sm leading-normal font-normal [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4;
+  }
+  .fieldset legend + p {
+    @apply -mt-1.5;
+  }
+  .field > p {
+    @apply last:mt-0 nth-last-2:-mt-1;
   }
 }