diff --git a/apps/v4/components/app-sidebar.tsx b/apps/v4/components/app-sidebar.tsx
index 0e08d4cc03..3054f115e5 100644
--- a/apps/v4/components/app-sidebar.tsx
+++ b/apps/v4/components/app-sidebar.tsx
@@ -151,9 +151,14 @@ const data = {
       ],
     },
   ],
-  components: Object.values(Index).filter(
-    (item) => item.type === "registry:ui"
-  ),
+  components: Object.values(Index)
+    .filter((item) => item.type === "registry:ui")
+    .concat([
+      {
+        name: "combobox",
+      },
+    ])
+    .sort((a, b) => a.name.localeCompare(b.name)),
 }
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
diff --git a/apps/v4/components/combobox-demo.tsx b/apps/v4/components/combobox-demo.tsx
index 920e9ff51c..966b17ed5e 100644
--- a/apps/v4/components/combobox-demo.tsx
+++ b/apps/v4/components/combobox-demo.tsx
@@ -119,6 +119,7 @@ export function ComboboxDemo() {
         timezones={[...timezones]}
         selectedTimezone={timezones[0].timezones[0]}
       />
+      <ComboboxWithCheckbox frameworks={[...frameworks]} />
     </div>
   )
 }
@@ -342,3 +343,63 @@ function TimezoneCombobox({
     </Popover>
   )
 }
+
+function ComboboxWithCheckbox({ frameworks }: { frameworks: Framework[] }) {
+  const [open, setOpen] = React.useState(false)
+  const [selectedFrameworks, setSelectedFrameworks] = React.useState<
+    Framework[]
+  >([])
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-fit min-w-[280px] justify-between"
+        >
+          {selectedFrameworks.length > 0
+            ? selectedFrameworks.map((framework) => framework.label).join(", ")
+            : "Select frameworks (multi-select)..."}
+          <ChevronsUpDown className="text-muted-foreground" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[300px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder="Search framework..." />
+          <CommandList>
+            <CommandEmpty>No framework found.</CommandEmpty>
+            <CommandGroup>
+              {frameworks.map((framework) => (
+                <CommandItem
+                  key={framework.value}
+                  value={framework.value}
+                  onSelect={(currentValue) => {
+                    setSelectedFrameworks(
+                      selectedFrameworks.some((f) => f.value === currentValue)
+                        ? selectedFrameworks.filter(
+                            (f) => f.value !== currentValue
+                          )
+                        : [...selectedFrameworks, framework]
+                    )
+                  }}
+                >
+                  <div
+                    className="border-input data-[selected=true]:border-primary data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground pointer-events-none size-4 shrink-0 rounded-[4px] border transition-all select-none *:[svg]:opacity-0 data-[selected=true]:*:[svg]:opacity-100"
+                    data-selected={selectedFrameworks.some(
+                      (f) => f.value === framework.value
+                    )}
+                  >
+                    <CheckIcon className="size-3.5 text-current" />
+                  </div>
+                  {framework.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}