diff --git a/apps/v4/app/(app)/examples/dashboard/components/chart-area-interactive.tsx b/apps/v4/app/(app)/examples/dashboard/components/chart-area-interactive.tsx
index 6c3359d836d..9e53448c377 100644
--- a/apps/v4/app/(app)/examples/dashboard/components/chart-area-interactive.tsx
+++ b/apps/v4/app/(app)/examples/dashboard/components/chart-area-interactive.tsx
@@ -21,6 +21,7 @@ import {
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
@@ -189,15 +190,17 @@ export function ChartAreaInteractive() {
               <SelectValue placeholder="Last 3 months" />
             </SelectTrigger>
             <SelectContent className="rounded-xl">
-              <SelectItem value="90d" className="rounded-lg">
-                Last 3 months
-              </SelectItem>
-              <SelectItem value="30d" className="rounded-lg">
-                Last 30 days
-              </SelectItem>
-              <SelectItem value="7d" className="rounded-lg">
-                Last 7 days
-              </SelectItem>
+              <SelectGroup>
+                <SelectItem value="90d" className="rounded-lg">
+                  Last 3 months
+                </SelectItem>
+                <SelectItem value="30d" className="rounded-lg">
+                  Last 30 days
+                </SelectItem>
+                <SelectItem value="7d" className="rounded-lg">
+                  Last 7 days
+                </SelectItem>
+              </SelectGroup>
             </SelectContent>
           </Select>
         </CardAction>
diff --git a/apps/v4/app/(app)/examples/dashboard/components/data-table.tsx b/apps/v4/app/(app)/examples/dashboard/components/data-table.tsx
index def0a697fe3..3ebb4468156 100644
--- a/apps/v4/app/(app)/examples/dashboard/components/data-table.tsx
+++ b/apps/v4/app/(app)/examples/dashboard/components/data-table.tsx
@@ -86,6 +86,7 @@ import { Label } from "@/registry/new-york-v4/ui/label"
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
@@ -275,10 +276,12 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
               <SelectValue placeholder="Assign reviewer" />
             </SelectTrigger>
             <SelectContent align="end">
-              <SelectItem value="Eddie Lake">Eddie Lake</SelectItem>
-              <SelectItem value="Jamik Tashpulatov">
-                Jamik Tashpulatov
-              </SelectItem>
+              <SelectGroup>
+                <SelectItem value="Eddie Lake">Eddie Lake</SelectItem>
+                <SelectItem value="Jamik Tashpulatov">
+                  Jamik Tashpulatov
+                </SelectItem>
+              </SelectGroup>
             </SelectContent>
           </Select>
         </>
@@ -419,10 +422,12 @@ export function DataTable({
             <SelectValue placeholder="Select a view" />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="outline">Outline</SelectItem>
-            <SelectItem value="past-performance">Past Performance</SelectItem>
-            <SelectItem value="key-personnel">Key Personnel</SelectItem>
-            <SelectItem value="focus-documents">Focus Documents</SelectItem>
+            <SelectGroup>
+              <SelectItem value="outline">Outline</SelectItem>
+              <SelectItem value="past-performance">Past Performance</SelectItem>
+              <SelectItem value="key-personnel">Key Personnel</SelectItem>
+              <SelectItem value="focus-documents">Focus Documents</SelectItem>
+            </SelectGroup>
           </SelectContent>
         </Select>
         <TabsList className="hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex">
@@ -552,11 +557,13 @@ export function DataTable({
                   />
                 </SelectTrigger>
                 <SelectContent side="top">
-                  {[10, 20, 30, 40, 50].map((pageSize) => (
-                    <SelectItem key={pageSize} value={`${pageSize}`}>
-                      {pageSize}
-                    </SelectItem>
-                  ))}
+                  <SelectGroup>
+                    {[10, 20, 30, 40, 50].map((pageSize) => (
+                      <SelectItem key={pageSize} value={`${pageSize}`}>
+                        {pageSize}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
                 </SelectContent>
               </Select>
             </div>
@@ -735,22 +742,24 @@ function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
                     <SelectValue placeholder="Select a type" />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="Table of Contents">
-                      Table of Contents
-                    </SelectItem>
-                    <SelectItem value="Executive Summary">
-                      Executive Summary
-                    </SelectItem>
-                    <SelectItem value="Technical Approach">
-                      Technical Approach
-                    </SelectItem>
-                    <SelectItem value="Design">Design</SelectItem>
-                    <SelectItem value="Capabilities">Capabilities</SelectItem>
-                    <SelectItem value="Focus Documents">
-                      Focus Documents
-                    </SelectItem>
-                    <SelectItem value="Narrative">Narrative</SelectItem>
-                    <SelectItem value="Cover Page">Cover Page</SelectItem>
+                    <SelectGroup>
+                      <SelectItem value="Table of Contents">
+                        Table of Contents
+                      </SelectItem>
+                      <SelectItem value="Executive Summary">
+                        Executive Summary
+                      </SelectItem>
+                      <SelectItem value="Technical Approach">
+                        Technical Approach
+                      </SelectItem>
+                      <SelectItem value="Design">Design</SelectItem>
+                      <SelectItem value="Capabilities">Capabilities</SelectItem>
+                      <SelectItem value="Focus Documents">
+                        Focus Documents
+                      </SelectItem>
+                      <SelectItem value="Narrative">Narrative</SelectItem>
+                      <SelectItem value="Cover Page">Cover Page</SelectItem>
+                    </SelectGroup>
                   </SelectContent>
                 </Select>
               </div>
@@ -761,9 +770,11 @@ function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
                     <SelectValue placeholder="Select a status" />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="Done">Done</SelectItem>
-                    <SelectItem value="In Progress">In Progress</SelectItem>
-                    <SelectItem value="Not Started">Not Started</SelectItem>
+                    <SelectGroup>
+                      <SelectItem value="Done">Done</SelectItem>
+                      <SelectItem value="In Progress">In Progress</SelectItem>
+                      <SelectItem value="Not Started">Not Started</SelectItem>
+                    </SelectGroup>
                   </SelectContent>
                 </Select>
               </div>
@@ -785,11 +796,13 @@ function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
                   <SelectValue placeholder="Select a reviewer" />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="Eddie Lake">Eddie Lake</SelectItem>
-                  <SelectItem value="Jamik Tashpulatov">
-                    Jamik Tashpulatov
-                  </SelectItem>
-                  <SelectItem value="Emily Whalen">Emily Whalen</SelectItem>
+                  <SelectGroup>
+                    <SelectItem value="Eddie Lake">Eddie Lake</SelectItem>
+                    <SelectItem value="Jamik Tashpulatov">
+                      Jamik Tashpulatov
+                    </SelectItem>
+                    <SelectItem value="Emily Whalen">Emily Whalen</SelectItem>
+                  </SelectGroup>
                 </SelectContent>
               </Select>
             </div>
diff --git a/apps/v4/app/(app)/examples/tasks/components/data-table-pagination.tsx b/apps/v4/app/(app)/examples/tasks/components/data-table-pagination.tsx
index 04cefa556a1..d3153686385 100644
--- a/apps/v4/app/(app)/examples/tasks/components/data-table-pagination.tsx
+++ b/apps/v4/app/(app)/examples/tasks/components/data-table-pagination.tsx
@@ -10,6 +10,7 @@ import { Button } from "@/registry/new-york-v4/ui/button"
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
@@ -41,11 +42,13 @@ export function DataTablePagination<TData>({
               <SelectValue placeholder={table.getState().pagination.pageSize} />
             </SelectTrigger>
             <SelectContent side="top">
-              {[10, 20, 25, 30, 40, 50].map((pageSize) => (
-                <SelectItem key={pageSize} value={`${pageSize}`}>
-                  {pageSize}
-                </SelectItem>
-              ))}
+              <SelectGroup>
+                {[10, 20, 25, 30, 40, 50].map((pageSize) => (
+                  <SelectItem key={pageSize} value={`${pageSize}`}>
+                    {pageSize}
+                  </SelectItem>
+                ))}
+              </SelectGroup>
             </SelectContent>
           </Select>
         </div>
diff --git a/apps/v4/components/cards/payment-method.tsx b/apps/v4/components/cards/payment-method.tsx
index 4932e483d0f..dabdcc2283f 100644
--- a/apps/v4/components/cards/payment-method.tsx
+++ b/apps/v4/components/cards/payment-method.tsx
@@ -18,6 +18,7 @@ import {
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
@@ -90,18 +91,20 @@ export function CardsPaymentMethod() {
                 <SelectValue placeholder="Month" />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="1">January</SelectItem>
-                <SelectItem value="2">February</SelectItem>
-                <SelectItem value="3">March</SelectItem>
-                <SelectItem value="4">April</SelectItem>
-                <SelectItem value="5">May</SelectItem>
-                <SelectItem value="6">June</SelectItem>
-                <SelectItem value="7">July</SelectItem>
-                <SelectItem value="8">August</SelectItem>
-                <SelectItem value="9">September</SelectItem>
-                <SelectItem value="10">October</SelectItem>
-                <SelectItem value="11">November</SelectItem>
-                <SelectItem value="12">December</SelectItem>
+                <SelectGroup>
+                  <SelectItem value="1">January</SelectItem>
+                  <SelectItem value="2">February</SelectItem>
+                  <SelectItem value="3">March</SelectItem>
+                  <SelectItem value="4">April</SelectItem>
+                  <SelectItem value="5">May</SelectItem>
+                  <SelectItem value="6">June</SelectItem>
+                  <SelectItem value="7">July</SelectItem>
+                  <SelectItem value="8">August</SelectItem>
+                  <SelectItem value="9">September</SelectItem>
+                  <SelectItem value="10">October</SelectItem>
+                  <SelectItem value="11">November</SelectItem>
+                  <SelectItem value="12">December</SelectItem>
+                </SelectGroup>
               </SelectContent>
             </Select>
           </div>
diff --git a/apps/v4/components/cards/report-issue.tsx b/apps/v4/components/cards/report-issue.tsx
index c1c96967838..ba295eca6bb 100644
--- a/apps/v4/components/cards/report-issue.tsx
+++ b/apps/v4/components/cards/report-issue.tsx
@@ -15,6 +15,7 @@ import { Input } from "@/registry/new-york-v4/ui/input"
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
@@ -46,11 +47,13 @@ export function CardsReportIssue() {
                   <SelectValue placeholder="Select" />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="team">Team</SelectItem>
-                  <SelectItem value="billing">Billing</SelectItem>
-                  <SelectItem value="account">Account</SelectItem>
-                  <SelectItem value="deployments">Deployments</SelectItem>
-                  <SelectItem value="support">Support</SelectItem>
+                  <SelectGroup>
+                    <SelectItem value="team">Team</SelectItem>
+                    <SelectItem value="billing">Billing</SelectItem>
+                    <SelectItem value="account">Account</SelectItem>
+                    <SelectItem value="deployments">Deployments</SelectItem>
+                    <SelectItem value="support">Support</SelectItem>
+                  </SelectGroup>
                 </SelectContent>
               </Select>
             </Field>
@@ -67,10 +70,12 @@ export function CardsReportIssue() {
                   <SelectValue placeholder="Select level" />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="1">Severity 1 (Highest)</SelectItem>
-                  <SelectItem value="2">Severity 2</SelectItem>
-                  <SelectItem value="3">Severity 3</SelectItem>
-                  <SelectItem value="4">Severity 4 (Lowest)</SelectItem>
+                  <SelectGroup>
+                    <SelectItem value="1">Severity 1 (Highest)</SelectItem>
+                    <SelectItem value="2">Severity 2</SelectItem>
+                    <SelectItem value="3">Severity 3</SelectItem>
+                    <SelectItem value="4">Severity 4 (Lowest)</SelectItem>
+                  </SelectGroup>
                 </SelectContent>
               </Select>
             </Field>
diff --git a/apps/v4/components/cards/share.tsx b/apps/v4/components/cards/share.tsx
index 0ed232e5199..59233b53548 100644
--- a/apps/v4/components/cards/share.tsx
+++ b/apps/v4/components/cards/share.tsx
@@ -26,6 +26,7 @@ import { Label } from "@/registry/new-york-v4/ui/label"
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
@@ -102,8 +103,10 @@ export function CardsShare() {
                       <SelectValue placeholder="Select" />
                     </SelectTrigger>
                     <SelectContent align="end">
-                      <SelectItem value="edit">Can edit</SelectItem>
-                      <SelectItem value="view">Can view</SelectItem>
+                      <SelectGroup>
+                        <SelectItem value="edit">Can edit</SelectItem>
+                        <SelectItem value="view">Can view</SelectItem>
+                      </SelectGroup>
                     </SelectContent>
                   </Select>
                 </ItemActions>
diff --git a/apps/v4/components/color-format-selector.tsx b/apps/v4/components/color-format-selector.tsx
index a1160be1732..35ed575d7f6 100644
--- a/apps/v4/components/color-format-selector.tsx
+++ b/apps/v4/components/color-format-selector.tsx
@@ -8,6 +8,7 @@ import { useColors } from "@/hooks/use-colors"
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
 } from "@/registry/new-york-v4/ui/select"
@@ -41,18 +42,20 @@ export function ColorFormatSelector({
         <span className="font-mono text-muted-foreground">{format}</span>
       </SelectTrigger>
       <SelectContent align="end" position="popper" className="rounded-xl">
-        {Object.entries(formats).map(([format, value]) => (
-          <SelectItem
-            key={format}
-            value={format}
-            className="gap-2 rounded-lg [&>span]:flex [&>span]:items-center [&>span]:gap-2"
-          >
-            <span className="font-medium">{format}</span>
-            <span className="font-mono text-xs text-muted-foreground">
-              {value}
-            </span>
-          </SelectItem>
-        ))}
+        <SelectGroup>
+          {Object.entries(formats).map(([format, value]) => (
+            <SelectItem
+              key={format}
+              value={format}
+              className="gap-2 rounded-lg [&>span]:flex [&>span]:items-center [&>span]:gap-2"
+            >
+              <span className="font-medium">{format}</span>
+              <span className="font-mono text-xs text-muted-foreground">
+                {value}
+              </span>
+            </SelectItem>
+          ))}
+        </SelectGroup>
       </SelectContent>
     </Select>
   )
diff --git a/apps/v4/examples/radix/input-form.tsx b/apps/v4/examples/radix/input-form.tsx
index f0a56ee8303..b0e656cfa12 100644
--- a/apps/v4/examples/radix/input-form.tsx
+++ b/apps/v4/examples/radix/input-form.tsx
@@ -9,6 +9,7 @@ import { Input } from "@/styles/radix-nova/ui/input"
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
@@ -46,9 +47,11 @@ export function InputForm() {
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="us">United States</SelectItem>
-                <SelectItem value="uk">United Kingdom</SelectItem>
-                <SelectItem value="ca">Canada</SelectItem>
+                <SelectGroup>
+                  <SelectItem value="us">United States</SelectItem>
+                  <SelectItem value="uk">United Kingdom</SelectItem>
+                  <SelectItem value="ca">Canada</SelectItem>
+                </SelectGroup>
               </SelectContent>
             </Select>
           </Field>
diff --git a/apps/v4/registry/bases/base/blocks/dashboard-01/components/chart-area-interactive.tsx b/apps/v4/registry/bases/base/blocks/dashboard-01/components/chart-area-interactive.tsx
index b826b4424c4..17936f6f248 100644
--- a/apps/v4/registry/bases/base/blocks/dashboard-01/components/chart-area-interactive.tsx
+++ b/apps/v4/registry/bases/base/blocks/dashboard-01/components/chart-area-interactive.tsx
@@ -21,6 +21,7 @@ import {
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
@@ -204,15 +205,17 @@ export function ChartAreaInteractive() {
               <SelectValue placeholder="Last 3 months" />
             </SelectTrigger>
             <SelectContent className="rounded-xl">
-              <SelectItem value="90d" className="rounded-lg">
-                Last 3 months
-              </SelectItem>
-              <SelectItem value="30d" className="rounded-lg">
-                Last 30 days
-              </SelectItem>
-              <SelectItem value="7d" className="rounded-lg">
-                Last 7 days
-              </SelectItem>
+              <SelectGroup>
+                <SelectItem value="90d" className="rounded-lg">
+                  Last 3 months
+                </SelectItem>
+                <SelectItem value="30d" className="rounded-lg">
+                  Last 30 days
+                </SelectItem>
+                <SelectItem value="7d" className="rounded-lg">
+                  Last 7 days
+                </SelectItem>
+              </SelectGroup>
             </SelectContent>
           </Select>
         </CardAction>
diff --git a/apps/v4/registry/bases/radix/blocks/dashboard-01/components/chart-area-interactive.tsx b/apps/v4/registry/bases/radix/blocks/dashboard-01/components/chart-area-interactive.tsx
index f201fe59c03..28c0b74ef5b 100644
--- a/apps/v4/registry/bases/radix/blocks/dashboard-01/components/chart-area-interactive.tsx
+++ b/apps/v4/registry/bases/radix/blocks/dashboard-01/components/chart-area-interactive.tsx
@@ -21,6 +21,7 @@ import {
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
@@ -195,15 +196,17 @@ export function ChartAreaInteractive() {
               <SelectValue placeholder="Last 3 months" />
             </SelectTrigger>
             <SelectContent className="rounded-xl">
-              <SelectItem value="90d" className="rounded-lg">
-                Last 3 months
-              </SelectItem>
-              <SelectItem value="30d" className="rounded-lg">
-                Last 30 days
-              </SelectItem>
-              <SelectItem value="7d" className="rounded-lg">
-                Last 7 days
-              </SelectItem>
+              <SelectGroup>
+                <SelectItem value="90d" className="rounded-lg">
+                  Last 3 months
+                </SelectItem>
+                <SelectItem value="30d" className="rounded-lg">
+                  Last 30 days
+                </SelectItem>
+                <SelectItem value="7d" className="rounded-lg">
+                  Last 7 days
+                </SelectItem>
+              </SelectGroup>
             </SelectContent>
           </Select>
         </CardAction>
diff --git a/apps/v4/registry/bases/radix/examples/alert-example.tsx b/apps/v4/registry/bases/radix/examples/alert-example.tsx
index 0357b93dbc4..c97fabf67d7 100644
--- a/apps/v4/registry/bases/radix/examples/alert-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/alert-example.tsx
@@ -29,6 +29,7 @@ import { Label } from "@/registry/bases/radix/ui/label"
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
@@ -284,10 +285,12 @@ function AlertExample5() {
                 <SelectValue placeholder="Select a framework" />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="next">Next.js</SelectItem>
-                <SelectItem value="remix">Remix</SelectItem>
-                <SelectItem value="astro">Astro</SelectItem>
-                <SelectItem value="nuxt">Nuxt</SelectItem>
+                <SelectGroup>
+                  <SelectItem value="next">Next.js</SelectItem>
+                  <SelectItem value="remix">Remix</SelectItem>
+                  <SelectItem value="astro">Astro</SelectItem>
+                  <SelectItem value="nuxt">Nuxt</SelectItem>
+                </SelectGroup>
               </SelectContent>
             </Select>
           </div>
diff --git a/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/chart-area-interactive.tsx b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/chart-area-interactive.tsx
index 46c767fb922..0461b7881ef 100644
--- a/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/chart-area-interactive.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/chart-area-interactive.tsx
@@ -21,6 +21,7 @@ import {
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
@@ -195,15 +196,17 @@ export function ChartAreaInteractive() {
               <SelectValue placeholder="Last 3 months" />
             </SelectTrigger>
             <SelectContent className="rounded-xl">
-              <SelectItem value="90d" className="rounded-lg">
-                Last 3 months
-              </SelectItem>
-              <SelectItem value="30d" className="rounded-lg">
-                Last 30 days
-              </SelectItem>
-              <SelectItem value="7d" className="rounded-lg">
-                Last 7 days
-              </SelectItem>
+              <SelectGroup>
+                <SelectItem value="90d" className="rounded-lg">
+                  Last 3 months
+                </SelectItem>
+                <SelectItem value="30d" className="rounded-lg">
+                  Last 30 days
+                </SelectItem>
+                <SelectItem value="7d" className="rounded-lg">
+                  Last 7 days
+                </SelectItem>
+              </SelectGroup>
             </SelectContent>
           </Select>
         </CardAction>
diff --git a/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/data-table.tsx b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/data-table.tsx
index def0a697fe3..3ebb4468156 100644
--- a/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/data-table.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/data-table.tsx
@@ -86,6 +86,7 @@ import { Label } from "@/registry/new-york-v4/ui/label"
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
@@ -275,10 +276,12 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
               <SelectValue placeholder="Assign reviewer" />
             </SelectTrigger>
             <SelectContent align="end">
-              <SelectItem value="Eddie Lake">Eddie Lake</SelectItem>
-              <SelectItem value="Jamik Tashpulatov">
-                Jamik Tashpulatov
-              </SelectItem>
+              <SelectGroup>
+                <SelectItem value="Eddie Lake">Eddie Lake</SelectItem>
+                <SelectItem value="Jamik Tashpulatov">
+                  Jamik Tashpulatov
+                </SelectItem>
+              </SelectGroup>
             </SelectContent>
           </Select>
         </>
@@ -419,10 +422,12 @@ export function DataTable({
             <SelectValue placeholder="Select a view" />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="outline">Outline</SelectItem>
-            <SelectItem value="past-performance">Past Performance</SelectItem>
-            <SelectItem value="key-personnel">Key Personnel</SelectItem>
-            <SelectItem value="focus-documents">Focus Documents</SelectItem>
+            <SelectGroup>
+              <SelectItem value="outline">Outline</SelectItem>
+              <SelectItem value="past-performance">Past Performance</SelectItem>
+              <SelectItem value="key-personnel">Key Personnel</SelectItem>
+              <SelectItem value="focus-documents">Focus Documents</SelectItem>
+            </SelectGroup>
           </SelectContent>
         </Select>
         <TabsList className="hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex">
@@ -552,11 +557,13 @@ export function DataTable({
                   />
                 </SelectTrigger>
                 <SelectContent side="top">
-                  {[10, 20, 30, 40, 50].map((pageSize) => (
-                    <SelectItem key={pageSize} value={`${pageSize}`}>
-                      {pageSize}
-                    </SelectItem>
-                  ))}
+                  <SelectGroup>
+                    {[10, 20, 30, 40, 50].map((pageSize) => (
+                      <SelectItem key={pageSize} value={`${pageSize}`}>
+                        {pageSize}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
                 </SelectContent>
               </Select>
             </div>
@@ -735,22 +742,24 @@ function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
                     <SelectValue placeholder="Select a type" />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="Table of Contents">
-                      Table of Contents
-                    </SelectItem>
-                    <SelectItem value="Executive Summary">
-                      Executive Summary
-                    </SelectItem>
-                    <SelectItem value="Technical Approach">
-                      Technical Approach
-                    </SelectItem>
-                    <SelectItem value="Design">Design</SelectItem>
-                    <SelectItem value="Capabilities">Capabilities</SelectItem>
-                    <SelectItem value="Focus Documents">
-                      Focus Documents
-                    </SelectItem>
-                    <SelectItem value="Narrative">Narrative</SelectItem>
-                    <SelectItem value="Cover Page">Cover Page</SelectItem>
+                    <SelectGroup>
+                      <SelectItem value="Table of Contents">
+                        Table of Contents
+                      </SelectItem>
+                      <SelectItem value="Executive Summary">
+                        Executive Summary
+                      </SelectItem>
+                      <SelectItem value="Technical Approach">
+                        Technical Approach
+                      </SelectItem>
+                      <SelectItem value="Design">Design</SelectItem>
+                      <SelectItem value="Capabilities">Capabilities</SelectItem>
+                      <SelectItem value="Focus Documents">
+                        Focus Documents
+                      </SelectItem>
+                      <SelectItem value="Narrative">Narrative</SelectItem>
+                      <SelectItem value="Cover Page">Cover Page</SelectItem>
+                    </SelectGroup>
                   </SelectContent>
                 </Select>
               </div>
@@ -761,9 +770,11 @@ function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
                     <SelectValue placeholder="Select a status" />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="Done">Done</SelectItem>
-                    <SelectItem value="In Progress">In Progress</SelectItem>
-                    <SelectItem value="Not Started">Not Started</SelectItem>
+                    <SelectGroup>
+                      <SelectItem value="Done">Done</SelectItem>
+                      <SelectItem value="In Progress">In Progress</SelectItem>
+                      <SelectItem value="Not Started">Not Started</SelectItem>
+                    </SelectGroup>
                   </SelectContent>
                 </Select>
               </div>
@@ -785,11 +796,13 @@ function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
                   <SelectValue placeholder="Select a reviewer" />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="Eddie Lake">Eddie Lake</SelectItem>
-                  <SelectItem value="Jamik Tashpulatov">
-                    Jamik Tashpulatov
-                  </SelectItem>
-                  <SelectItem value="Emily Whalen">Emily Whalen</SelectItem>
+                  <SelectGroup>
+                    <SelectItem value="Eddie Lake">Eddie Lake</SelectItem>
+                    <SelectItem value="Jamik Tashpulatov">
+                      Jamik Tashpulatov
+                    </SelectItem>
+                    <SelectItem value="Emily Whalen">Emily Whalen</SelectItem>
+                  </SelectGroup>
                 </SelectContent>
               </Select>
             </div>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-area-interactive.tsx b/apps/v4/registry/new-york-v4/charts/chart-area-interactive.tsx
index 8f6e69d4097..df524657cb9 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-area-interactive.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-area-interactive.tsx
@@ -21,6 +21,7 @@ import {
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
@@ -170,15 +171,17 @@ export function ChartAreaInteractive() {
             <SelectValue placeholder="Last 3 months" />
           </SelectTrigger>
           <SelectContent className="rounded-xl">
-            <SelectItem value="90d" className="rounded-lg">
-              Last 3 months
-            </SelectItem>
-            <SelectItem value="30d" className="rounded-lg">
-              Last 30 days
-            </SelectItem>
-            <SelectItem value="7d" className="rounded-lg">
-              Last 7 days
-            </SelectItem>
+            <SelectGroup>
+              <SelectItem value="90d" className="rounded-lg">
+                Last 3 months
+              </SelectItem>
+              <SelectItem value="30d" className="rounded-lg">
+                Last 30 days
+              </SelectItem>
+              <SelectItem value="7d" className="rounded-lg">
+                Last 7 days
+              </SelectItem>
+            </SelectGroup>
           </SelectContent>
         </Select>
       </CardHeader>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-pie-interactive.tsx b/apps/v4/registry/new-york-v4/charts/chart-pie-interactive.tsx
index dfe17b688b3..5d674d928c8 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-pie-interactive.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-pie-interactive.tsx
@@ -24,6 +24,7 @@ import {
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
@@ -117,31 +118,33 @@ export function ChartPieInteractive() {
             <SelectValue placeholder="Select month" />
           </SelectTrigger>
           <SelectContent align="end" className="rounded-xl">
-            {months.map((key) => {
-              const config = chartConfig[key as keyof typeof chartConfig]
+            <SelectGroup>
+              {months.map((key) => {
+                const config = chartConfig[key as keyof typeof chartConfig]
 
-              if (!config) {
-                return null
-              }
+                if (!config) {
+                  return null
+                }
 
-              return (
-                <SelectItem
-                  key={key}
-                  value={key}
-                  className="rounded-lg [&_span]:flex"
-                >
-                  <div className="flex items-center gap-2 text-xs">
-                    <span
-                      className="flex h-3 w-3 shrink-0 rounded-xs"
-                      style={{
-                        backgroundColor: `var(--color-${key})`,
-                      }}
-                    />
-                    {config?.label}
-                  </div>
-                </SelectItem>
-              )
-            })}
+                return (
+                  <SelectItem
+                    key={key}
+                    value={key}
+                    className="rounded-lg [&_span]:flex"
+                  >
+                    <div className="flex items-center gap-2 text-xs">
+                      <span
+                        className="flex h-3 w-3 shrink-0 rounded-xs"
+                        style={{
+                          backgroundColor: `var(--color-${key})`,
+                        }}
+                      />
+                      {config?.label}
+                    </div>
+                  </SelectItem>
+                )
+              })}
+            </SelectGroup>
           </SelectContent>
         </Select>
       </CardHeader>
diff --git a/apps/v4/registry/new-york-v4/examples/button-group-select.tsx b/apps/v4/registry/new-york-v4/examples/button-group-select.tsx
index fc50518e4b9..e99bc4ba82f 100644
--- a/apps/v4/registry/new-york-v4/examples/button-group-select.tsx
+++ b/apps/v4/registry/new-york-v4/examples/button-group-select.tsx
@@ -9,6 +9,7 @@ import { Input } from "@/registry/new-york-v4/ui/input"
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
 } from "@/registry/new-york-v4/ui/select"
@@ -37,12 +38,14 @@ export default function ButtonGroupSelect() {
         <Select value={currency} onValueChange={setCurrency}>
           <SelectTrigger className="font-mono">{currency}</SelectTrigger>
           <SelectContent className="min-w-24">
-            {CURRENCIES.map((currency) => (
-              <SelectItem key={currency.value} value={currency.value}>
-                {currency.value}{" "}
-                <span className="text-muted-foreground">{currency.label}</span>
-              </SelectItem>
-            ))}
+            <SelectGroup>
+              {CURRENCIES.map((currency) => (
+                <SelectItem key={currency.value} value={currency.value}>
+                  {currency.value}{" "}
+                  <span className="text-muted-foreground">{currency.label}</span>
+                </SelectItem>
+              ))}
+            </SelectGroup>
           </SelectContent>
         </Select>
         <Input placeholder="10.00" pattern="[0-9]*" />
diff --git a/apps/v4/registry/new-york-v4/examples/card-with-form.tsx b/apps/v4/registry/new-york-v4/examples/card-with-form.tsx
index 56558966e2d..fd6ae8bfd1d 100644
--- a/apps/v4/registry/new-york-v4/examples/card-with-form.tsx
+++ b/apps/v4/registry/new-york-v4/examples/card-with-form.tsx
@@ -14,6 +14,7 @@ import { Label } from "@/registry/new-york-v4/ui/label"
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
@@ -40,10 +41,12 @@ export default function CardWithForm() {
                   <SelectValue placeholder="Select" />
                 </SelectTrigger>
                 <SelectContent position="popper">
-                  <SelectItem value="next">Next.js</SelectItem>
-                  <SelectItem value="sveltekit">SvelteKit</SelectItem>
-                  <SelectItem value="astro">Astro</SelectItem>
-                  <SelectItem value="nuxt">Nuxt.js</SelectItem>
+                  <SelectGroup>
+                    <SelectItem value="next">Next.js</SelectItem>
+                    <SelectItem value="sveltekit">SvelteKit</SelectItem>
+                    <SelectItem value="astro">Astro</SelectItem>
+                    <SelectItem value="nuxt">Nuxt.js</SelectItem>
+                  </SelectGroup>
                 </SelectContent>
               </Select>
             </div>
diff --git a/apps/v4/registry/new-york-v4/examples/date-picker-with-presets.tsx b/apps/v4/registry/new-york-v4/examples/date-picker-with-presets.tsx
index a72a8404a6d..16dd4003d0f 100644
--- a/apps/v4/registry/new-york-v4/examples/date-picker-with-presets.tsx
+++ b/apps/v4/registry/new-york-v4/examples/date-picker-with-presets.tsx
@@ -15,6 +15,7 @@ import {
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
@@ -50,10 +51,12 @@ export default function DatePickerWithPresets() {
             <SelectValue placeholder="Select" />
           </SelectTrigger>
           <SelectContent position="popper">
-            <SelectItem value="0">Today</SelectItem>
-            <SelectItem value="1">Tomorrow</SelectItem>
-            <SelectItem value="3">In 3 days</SelectItem>
-            <SelectItem value="7">In a week</SelectItem>
+            <SelectGroup>
+              <SelectItem value="0">Today</SelectItem>
+              <SelectItem value="1">Tomorrow</SelectItem>
+              <SelectItem value="3">In 3 days</SelectItem>
+              <SelectItem value="7">In a week</SelectItem>
+            </SelectGroup>
           </SelectContent>
         </Select>
         <div className="rounded-md border">
diff --git a/apps/v4/registry/new-york-v4/examples/field-demo.tsx b/apps/v4/registry/new-york-v4/examples/field-demo.tsx
index 01c4f6f4734..b927949f258 100644
--- a/apps/v4/registry/new-york-v4/examples/field-demo.tsx
+++ b/apps/v4/registry/new-york-v4/examples/field-demo.tsx
@@ -13,6 +13,7 @@ import { Input } from "@/registry/new-york-v4/ui/input"
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
@@ -63,18 +64,20 @@ export default function FieldDemo() {
                       <SelectValue placeholder="MM" />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="01">01</SelectItem>
-                      <SelectItem value="02">02</SelectItem>
-                      <SelectItem value="03">03</SelectItem>
-                      <SelectItem value="04">04</SelectItem>
-                      <SelectItem value="05">05</SelectItem>
-                      <SelectItem value="06">06</SelectItem>
-                      <SelectItem value="07">07</SelectItem>
-                      <SelectItem value="08">08</SelectItem>
-                      <SelectItem value="09">09</SelectItem>
-                      <SelectItem value="10">10</SelectItem>
-                      <SelectItem value="11">11</SelectItem>
-                      <SelectItem value="12">12</SelectItem>
+                      <SelectGroup>
+                        <SelectItem value="01">01</SelectItem>
+                        <SelectItem value="02">02</SelectItem>
+                        <SelectItem value="03">03</SelectItem>
+                        <SelectItem value="04">04</SelectItem>
+                        <SelectItem value="05">05</SelectItem>
+                        <SelectItem value="06">06</SelectItem>
+                        <SelectItem value="07">07</SelectItem>
+                        <SelectItem value="08">08</SelectItem>
+                        <SelectItem value="09">09</SelectItem>
+                        <SelectItem value="10">10</SelectItem>
+                        <SelectItem value="11">11</SelectItem>
+                        <SelectItem value="12">12</SelectItem>
+                      </SelectGroup>
                     </SelectContent>
                   </Select>
                 </Field>
@@ -87,12 +90,14 @@ export default function FieldDemo() {
                       <SelectValue placeholder="YYYY" />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="2024">2024</SelectItem>
-                      <SelectItem value="2025">2025</SelectItem>
-                      <SelectItem value="2026">2026</SelectItem>
-                      <SelectItem value="2027">2027</SelectItem>
-                      <SelectItem value="2028">2028</SelectItem>
-                      <SelectItem value="2029">2029</SelectItem>
+                      <SelectGroup>
+                        <SelectItem value="2024">2024</SelectItem>
+                        <SelectItem value="2025">2025</SelectItem>
+                        <SelectItem value="2026">2026</SelectItem>
+                        <SelectItem value="2027">2027</SelectItem>
+                        <SelectItem value="2028">2028</SelectItem>
+                        <SelectItem value="2029">2029</SelectItem>
+                      </SelectGroup>
                     </SelectContent>
                   </Select>
                 </Field>
diff --git a/apps/v4/registry/new-york-v4/examples/field-select.tsx b/apps/v4/registry/new-york-v4/examples/field-select.tsx
index 5c05af1eaeb..3f49707a287 100644
--- a/apps/v4/registry/new-york-v4/examples/field-select.tsx
+++ b/apps/v4/registry/new-york-v4/examples/field-select.tsx
@@ -6,6 +6,7 @@ import {
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
@@ -21,14 +22,16 @@ export default function FieldSelect() {
             <SelectValue placeholder="Choose department" />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="engineering">Engineering</SelectItem>
-            <SelectItem value="design">Design</SelectItem>
-            <SelectItem value="marketing">Marketing</SelectItem>
-            <SelectItem value="sales">Sales</SelectItem>
-            <SelectItem value="support">Customer Support</SelectItem>
-            <SelectItem value="hr">Human Resources</SelectItem>
-            <SelectItem value="finance">Finance</SelectItem>
-            <SelectItem value="operations">Operations</SelectItem>
+            <SelectGroup>
+              <SelectItem value="engineering">Engineering</SelectItem>
+              <SelectItem value="design">Design</SelectItem>
+              <SelectItem value="marketing">Marketing</SelectItem>
+              <SelectItem value="sales">Sales</SelectItem>
+              <SelectItem value="support">Customer Support</SelectItem>
+              <SelectItem value="hr">Human Resources</SelectItem>
+              <SelectItem value="finance">Finance</SelectItem>
+              <SelectItem value="operations">Operations</SelectItem>
+            </SelectGroup>
           </SelectContent>
         </Select>
         <FieldDescription>
diff --git a/apps/v4/registry/new-york-v4/examples/form-next-complex.tsx b/apps/v4/registry/new-york-v4/examples/form-next-complex.tsx
index 5da09b25d0e..b30aa5357e2 100644
--- a/apps/v4/registry/new-york-v4/examples/form-next-complex.tsx
+++ b/apps/v4/registry/new-york-v4/examples/form-next-complex.tsx
@@ -26,6 +26,7 @@ import {
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
@@ -115,8 +116,10 @@ export default function FormNextComplex() {
                   <SelectValue placeholder="Select" />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="monthly">Monthly</SelectItem>
-                  <SelectItem value="yearly">Yearly</SelectItem>
+                  <SelectGroup>
+                    <SelectItem value="monthly">Monthly</SelectItem>
+                    <SelectItem value="yearly">Yearly</SelectItem>
+                  </SelectGroup>
                 </SelectContent>
               </Select>
               <FieldDescription>
diff --git a/apps/v4/registry/new-york-v4/examples/form-rhf-complex.tsx b/apps/v4/registry/new-york-v4/examples/form-rhf-complex.tsx
index c290cb0ab89..79833648d30 100644
--- a/apps/v4/registry/new-york-v4/examples/form-rhf-complex.tsx
+++ b/apps/v4/registry/new-york-v4/examples/form-rhf-complex.tsx
@@ -35,6 +35,7 @@ import {
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
@@ -197,8 +198,10 @@ export default function FormRhfComplex() {
                       <SelectValue placeholder="Select" />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="monthly">Monthly</SelectItem>
-                      <SelectItem value="yearly">Yearly</SelectItem>
+                      <SelectGroup>
+                        <SelectItem value="monthly">Monthly</SelectItem>
+                        <SelectItem value="yearly">Yearly</SelectItem>
+                      </SelectGroup>
                     </SelectContent>
                   </Select>
                   <FieldDescription>
diff --git a/apps/v4/registry/new-york-v4/examples/form-rhf-select.tsx b/apps/v4/registry/new-york-v4/examples/form-rhf-select.tsx
index 3cb5100c357..98cd3c6c5c2 100644
--- a/apps/v4/registry/new-york-v4/examples/form-rhf-select.tsx
+++ b/apps/v4/registry/new-york-v4/examples/form-rhf-select.tsx
@@ -26,6 +26,7 @@ import {
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectSeparator,
   SelectTrigger,
@@ -120,13 +121,17 @@ export default function FormRhfSelect() {
                       <SelectValue placeholder="Select" />
                     </SelectTrigger>
                     <SelectContent position="item-aligned">
-                      <SelectItem value="auto">Auto</SelectItem>
+                      <SelectGroup>
+                        <SelectItem value="auto">Auto</SelectItem>
+                      </SelectGroup>
                       <SelectSeparator />
-                      {spokenLanguages.map((language) => (
-                        <SelectItem key={language.value} value={language.value}>
-                          {language.label}
-                        </SelectItem>
-                      ))}
+                      <SelectGroup>
+                        {spokenLanguages.map((language) => (
+                          <SelectItem key={language.value} value={language.value}>
+                            {language.label}
+                          </SelectItem>
+                        ))}
+                      </SelectGroup>
                     </SelectContent>
                   </Select>
                 </Field>
diff --git a/apps/v4/registry/new-york-v4/examples/form-tanstack-complex.tsx b/apps/v4/registry/new-york-v4/examples/form-tanstack-complex.tsx
index 94736bbc186..265583e1138 100644
--- a/apps/v4/registry/new-york-v4/examples/form-tanstack-complex.tsx
+++ b/apps/v4/registry/new-york-v4/examples/form-tanstack-complex.tsx
@@ -28,6 +28,7 @@ import {
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
@@ -198,8 +199,10 @@ export default function FormTanstackComplex() {
                         <SelectValue placeholder="Select" />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value="monthly">Monthly</SelectItem>
-                        <SelectItem value="yearly">Yearly</SelectItem>
+                        <SelectGroup>
+                          <SelectItem value="monthly">Monthly</SelectItem>
+                          <SelectItem value="yearly">Yearly</SelectItem>
+                        </SelectGroup>
                       </SelectContent>
                     </Select>
                     <FieldDescription>
diff --git a/apps/v4/registry/new-york-v4/examples/form-tanstack-select.tsx b/apps/v4/registry/new-york-v4/examples/form-tanstack-select.tsx
index 844adf4dbfa..2b1e36f5498 100644
--- a/apps/v4/registry/new-york-v4/examples/form-tanstack-select.tsx
+++ b/apps/v4/registry/new-york-v4/examples/form-tanstack-select.tsx
@@ -25,6 +25,7 @@ import {
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectSeparator,
   SelectTrigger,
@@ -125,16 +126,20 @@ export default function FormTanstackSelect() {
                         <SelectValue placeholder="Select" />
                       </SelectTrigger>
                       <SelectContent position="item-aligned">
-                        <SelectItem value="auto">Auto</SelectItem>
+                        <SelectGroup>
+                          <SelectItem value="auto">Auto</SelectItem>
+                        </SelectGroup>
                         <SelectSeparator />
-                        {spokenLanguages.map((language) => (
-                          <SelectItem
-                            key={language.value}
-                            value={language.value}
-                          >
-                            {language.label}
-                          </SelectItem>
-                        ))}
+                        <SelectGroup>
+                          {spokenLanguages.map((language) => (
+                            <SelectItem
+                              key={language.value}
+                              value={language.value}
+                            >
+                              {language.label}
+                            </SelectItem>
+                          ))}
+                        </SelectGroup>
                       </SelectContent>
                     </Select>
                   </Field>