4d:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"RegistryDependencies"] 4e:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"Installation"] 4f:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"FilesView"] 50:Tae2,"use client"; import { Button } from "@/registry/default/ui/oui-button"; import { ButtonGroup } from "@/registry/default/ui/oui-button-group"; import { ComboBox } from "@/registry/default/ui/oui-combo-box"; import { FieldError, FieldLabel } from "@/registry/default/ui/oui-field"; import { Input } from "@/registry/default/ui/oui-input"; import { ListBoxHeader, ListBoxItem } from "@/registry/default/ui/oui-list-box"; import { Popover } from "@/registry/default/ui/oui-popover"; import { ChevronsUpDown } from "lucide-react"; import * as Rac from "react-aria-components"; const timezones = [ { label: "Americas", timezones: [ { value: "America/New_York", label: "(GMT-5) New York" }, { value: "America/Los_Angeles", label: "(GMT-8) Los Angeles" }, { value: "America/Chicago", label: "(GMT-6) Chicago" }, { value: "America/Toronto", label: "(GMT-5) Toronto" }, { value: "America/Vancouver", label: "(GMT-8) Vancouver" }, { value: "America/Sao_Paulo", label: "(GMT-3) São Paulo" }, ], }, { label: "Europe", timezones: [ { value: "Europe/London", label: "(GMT+0) London" }, { value: "Europe/Paris", label: "(GMT+1) Paris" }, { value: "Europe/Berlin", label: "(GMT+1) Berlin" }, { value: "Europe/Rome", label: "(GMT+1) Rome" }, { value: "Europe/Madrid", label: "(GMT+1) Madrid" }, { value: "Europe/Amsterdam", label: "(GMT+1) Amsterdam" }, ], }, { label: "Asia/Pacific", timezones: [ { value: "Asia/Tokyo", label: "(GMT+9) Tokyo" }, { value: "Asia/Shanghai", label: "(GMT+8) Shanghai" }, { value: "Asia/Singapore", label: "(GMT+8) Singapore" }, { value: "Asia/Dubai", label: "(GMT+4) Dubai" }, { value: "Australia/Sydney", label: "(GMT+11) Sydney" }, { value: "Asia/Seoul", label: "(GMT+9) Seoul" }, ], }, ]; export default function Component() { return ( Combo Box with Headers {timezones.map((group) => ( {group.label} {(item) => ( {item.label} )} ))} ); } 49:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4d",null,{"registryDependencies":["@oui/oui-button","@oui/oui-button-group","@oui/oui-combo-box","@oui/oui-field","@oui/oui-input","@oui/oui-list-box","@oui/oui-popover"]}]]}],["$","$L4e",null,{"sourceUrl":"https://oui.mw10013.workers.dev/r/oui-combo-box-demo-header.json","proxyUrl":"https://shadcnregistry.com/r/oui/oui-combo-box-demo-header","itemId":"@oui/oui-combo-box-demo-header"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L4f",null,{"files":[{"path":"registry/default/components/oui-combo-box-demo-header.tsx","content":"$50","type":"registry:component"}]}]]}],"$L51"]}]

Oui Combo Box Demo Header

Installation

Files

components

Styles