{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "dropdown",
"type": "registry:ui",
"title": "Dropdown",
"description": "Composable popover menu (trigger, panel, groups, rows, dividers) built on React Aria — the recipe behind the sidebar team/account menus.",
"dependencies": [
"react-aria-components@^1.17.0"
],
"registryDependencies": [
"cx",
"use-dismiss-on-outside-press"
],
"files": [
{
"path": "components/base/dropdown/dropdown.tsx",
"content": "\"use client\";\n\nimport { createContext, useContext, useRef, useState, type ComponentProps, type ReactNode, type RefObject } from \"react\";\nimport {\n Button as AriaButton,\n Dialog as AriaDialog,\n DialogTrigger as AriaDialogTrigger,\n Popover as AriaPopover,\n} from \"react-aria-components\";\nimport {\n MENU_ITEM,\n MENU_ITEM_ACTIVE,\n MENU_ITEM_INTERACTIVE,\n MENU_POPOVER_SURFACE,\n MENU_POPOVER_WIDTH,\n} from \"@/components/base/dropdown/menu-styles\";\nimport { cx } from \"@/utils/cx\";\nimport { useDismissOnOutsidePress, useTriggerToggle } from \"@/utils/use-dismiss-on-outside-press\";\n\n/**\n * Dropdown — the BoardUI popover-menu recipe as composable primitives, built\n * on React Aria's DialogTrigger/Popover. Unlike Select (which picks a value\n * into a trigger), Dropdown is a free-form menu surface: grouped rows of\n * actions, headers, footers, whatever the panel needs.\n *\n * The same recipe powers the dashboard sidebar's team/account menus and the\n * AI chat template's add/model/folder menus:\n *\n * - Panel: white, 1px border/button/default, radius 16, p 10, shadow/dropdown.\n * - Appear animation: 150ms fade + scale-95 + 2px blur in and out.\n * - Rows: rounded-2lg, background/secondary/hover on hover and on the selected\n * row, body-medium labels, 4px apart (the panel's flex column carries a\n * gap-1, the same rhythm as the Select listbox).\n *\n * Composition:\n *\n * ```tsx\n * \n * Open\n * \n * \n * …row content…\n * \n * \n * …\n * \n * \n * ```\n *\n * State can be uncontrolled (omit isOpen/onOpenChange) — control it when the\n * trigger needs to react to the open state (e.g. rotating a chevron).\n */\n\n/* ------------------------------------------------------------------- shell */\n\ninterface DropdownContextValue {\n triggerRef: RefObject;\n popoverRef: RefObject;\n}\n\nconst DropdownContext = createContext(null);\n\nexport interface DropdownProps {\n isOpen?: boolean;\n onOpenChange?: (isOpen: boolean) => void;\n /** Trigger (a DropdownTrigger) followed by a DropdownPopover. */\n children: ReactNode;\n}\n\n/**\n * The popover is `isNonModal`: react-aria's modal scroll lock puts\n * `overflow: hidden` on , which collapses the page scroll position and\n * visibly yanks sticky layout (e.g. the docs sidebar) whenever a menu opens.\n * Non-modal skips the lock, but react-aria hard-couples outside-press\n * dismissal to modality — so open state lives here (bridging any controlled\n * props) and dismissal is restored via useDismissOnOutsidePress, the same\n * fix as Select and the date-picker family.\n */\nexport function Dropdown({ isOpen: controlledOpen, onOpenChange, children }: DropdownProps) {\n const triggerRef = useRef(null);\n const popoverRef = useRef(null);\n const [uncontrolledOpen, setUncontrolledOpen] = useState(false);\n\n const isOpen = controlledOpen ?? uncontrolledOpen;\n const setOpen = (next: boolean) => {\n setUncontrolledOpen(next);\n onOpenChange?.(next);\n };\n\n useDismissOnOutsidePress(isOpen, () => setOpen(false), [triggerRef, popoverRef]);\n // Pressing the trigger while open closes the menu instead of reopening\n const allowOpenChange = useTriggerToggle(isOpen, triggerRef);\n\n return (\n \n allowOpenChange(o) && setOpen(o)}>\n {children}\n \n \n );\n}\n\n/** The element that opens the menu. Style it entirely via className. */\nexport function DropdownTrigger({ className, ...props }: ComponentProps) {\n const context = useContext(DropdownContext);\n return (\n \n );\n}\n\n/* ------------------------------------------------------------------- panel */\n\nexport interface DropdownPopoverProps\n extends Pick, \"placement\" | \"offset\" | \"crossOffset\"> {\n \"aria-label\": string;\n /** Extra classes on the panel — e.g. a width override (default w-[266px]). */\n className?: string;\n /** Classes on the inner dialog (the flex column), e.g. gap between groups. */\n dialogClassName?: string;\n children: ReactNode;\n}\n\nexport function DropdownPopover({\n \"aria-label\": ariaLabel,\n placement = \"bottom start\",\n offset = 4,\n crossOffset,\n className,\n dialogClassName,\n children,\n}: DropdownPopoverProps) {\n const context = useContext(DropdownContext);\n return (\n \n {/* gap-1 keeps bare DropdownItems 4px apart, the same rhythm as the\n Select listbox; DropdownDivider's margins are sized to absorb it. */}\n \n {children}\n \n \n );\n}\n\n/* ----------------------------------------------------------------- content */\n\nexport interface DropdownGroupProps {\n /** Muted body-medium heading above the rows. */\n label?: string;\n className?: string;\n children: ReactNode;\n}\n\nexport function DropdownGroup({ label, className, children }: DropdownGroupProps) {\n return (\n // pt-1 is spacing for the group LABEL — a label-less group must not\n // carry it, or its first row floats 4px lower than the panel padding\n // implies (visible as extra space above the first item's hover pill).\n
\n {label && {label}}\n
{children}
\n
\n );\n}\n\nexport interface DropdownItemProps {\n /** Highlights the row like the hover state (current selection). */\n selected?: boolean;\n onSelect?: () => void;\n /** Row padding defaults to p-2 — override for denser rows (px-2 py-1.5). */\n className?: string;\n children: ReactNode;\n}\n\n/**\n * A menu row. Content is free-form — icon + label, avatar + name, label +\n * trailing badge — laid out in a gap-2 flex row.\n */\nexport function DropdownItem({ selected, onSelect, className, children }: DropdownItemProps) {\n return (\n \n {children}\n \n );\n}\n\n/** Full-bleed 1px divider between groups (bleeds through the panel's p-2.5).\n * my-1.5 + the dialog's gap-1 on both sides = the original 10px breathing room. */\nexport function DropdownDivider({ className }: { className?: string }) {\n return ;\n}\n",
"type": "registry:component",
"target": "components/base/dropdown/dropdown.tsx"
},
{
"path": "components/base/dropdown/menu-styles.ts",
"content": "/**\n * Shared visual recipe for BoardUI menu surfaces.\n *\n * Select and Dropdown intentionally keep their distinct React Aria semantics\n * (single-value listbox vs. action menu), while consuming the same panel,\n * motion, and row treatments from here.\n */\nexport const MENU_POPOVER_SURFACE = [\n // z-110 sits above the modal layer (z-100), so menus opened inside a\n // Modal or Drawer render over it rather than behind its backdrop.\n \"z-110 max-w-[calc(100vw-32px)] overflow-y-auto\",\n \"rounded-2xl border border-border-button-default bg-background-primary-default p-2.5 shadow-dropdown\",\n \"transition duration-150 ease-out\",\n \"data-[entering]:opacity-0 data-[entering]:scale-95 data-[entering]:blur-[2px]\",\n \"data-[exiting]:opacity-0 data-[exiting]:scale-95 data-[exiting]:blur-[2px]\",\n \"data-[placement=bottom]:origin-top-left rtl:data-[placement=bottom]:origin-top-right data-[placement=top]:origin-bottom-left rtl:data-[placement=top]:origin-bottom-right\",\n \"data-[placement=left]:origin-right data-[placement=right]:origin-left\",\n].join(\" \");\n\nexport const MENU_POPOVER_WIDTH = \"w-[266px]\";\n\nexport const MENU_ITEMS_CONTAINER = \"flex w-full flex-col gap-1 outline-none\";\n\nexport const MENU_ITEM = [\n \"flex w-full cursor-pointer items-center gap-2 rounded-2lg p-2 text-start\",\n \"text-text-primary outline-none transition-colors\",\n].join(\" \");\n\nexport const MENU_ITEM_ACTIVE = \"bg-dropdown-item-hover-background\";\n\nexport const MENU_ITEM_INTERACTIVE =\n \"hover:bg-dropdown-item-hover-background focus-visible:bg-dropdown-item-hover-background\";\n",
"type": "registry:component",
"target": "components/base/dropdown/menu-styles.ts"
}
],
"meta": {
"docsUrl": "https://www.boardui.com/components/dropdown",
"example": "import { useState } from \"react\";\nimport { RiAddLine, RiAttachment2, RiFocus3Line, RiListCheck3 } from \"@remixicon/react\";\nimport {\n Dropdown,\n DropdownGroup,\n DropdownItem,\n DropdownPopover,\n DropdownTrigger,\n} from \"@/components/base/dropdown/dropdown\";\nimport { cx } from \"@/utils/cx\";\n\nconst ROWS = [\n { icon: RiAttachment2, label: \"Files and folders\" },\n { icon: RiFocus3Line, label: \"Goal\", description: \"Set a goal for faster results\" },\n { icon: RiListCheck3, label: \"Plan mode\", description: \"Manage complex tasks\" },\n];\n\nexport function Example() {\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n \n \n \n \n\n \n \n {ROWS.map(({ icon: Icon, label, description }) => (\n setIsOpen(false)} className=\"px-2 py-1.5\">\n \n \n {label}\n {description && {description}}\n \n \n ))}\n \n \n \n );\n}",
"snippets": [
{
"label": "model",
"code": "{/* Radio-group rows: selected state on the row + a radio glyph at the end */}\nconst [model, setModel] = useState(\"Fable 5\");\n\n\n \n {model}\n \n \n\n \n \n