Overlay Molecules

ImportCC

Available via @stackmates/ui-interactive/molecules

Drawer

Slide-out panel built on Headless UI Dialog. Supports 4 positions with close button, overlay, and compound sub-components (DrawerHeader, DrawerBody, DrawerFooter).

DrawerProps

Prop	Type	Default	Description
open*	boolean	—	Whether the drawer is open
onClose*	() => void	—	Callback when the drawer should close
position	'left' \| 'right' \| 'top' \| 'bottom'	'right'	Slide-in position
showCloseButton	boolean	true	Show the X close button
showOverlay	boolean	true	Show backdrop overlay

Installation

typescript

import { Drawer, DrawerHeader, DrawerBody, DrawerFooter } from '@stackmates/ui-interactive/molecules';

Accessibility

Headless UI Dialog with focus trapping and Escape to close
Close button has sr-only "Close panel" label
Respects prefers-reduced-motion for transitions

SheetRx DialogRx

SheetRx

Radix-based side panel with animated slide transitions. Compound component pattern: Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter.

Sheet / SheetContent

Prop	Type	Default	Description
side	'top' \| 'right' \| 'bottom' \| 'left'	'right'	Slide-in side (on SheetContent)
open	boolean	—	Controlled open state (on Sheet root)
onOpenChange	(open: boolean) => void	—	Open state change callback (on Sheet root)

Installation

typescript

import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter, SheetClose } from '@stackmates/ui-interactive/molecules';

Accessibility

Radix Dialog with focus trapping, scroll locking, and Escape to dismiss
Close button has sr-only "Close" label
Animated enter/exit with configurable duration

Drawer DialogRx

DropdownMenu

Radix-based dropdown context menu with icon, shortcut, checkbox, radio, sub-menu, and destructive item support.

DropdownMenuItem (enhanced)

Prop	Type	Default	Description
icon	LucideIcon	—	Icon before item label (on DropdownMenuItem)
shortcut	string	—	Keyboard shortcut hint on the right (on DropdownMenuItem)
variant	'default' \| 'destructive'	'default'	Visual variant (on DropdownMenuItem)

Installation

typescript

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuRadioGroup } from '@stackmates/ui-interactive/molecules';

Accessibility

Full keyboard navigation (Arrow keys, Enter, Escape) with typeahead
Proper role="menu" and role="menuitem" ARIA attributes
Disabled items excluded from keyboard navigation

ContextMenuRx EntityActionsDropdown

Command

Command palette built on cmdk. Compound component with search input, grouped items, empty state, and keyboard shortcuts. Use CommandDialog for modal overlay variant.

Command

Prop	Type	Default	Description
children*	ReactNode	—	CommandInput, CommandList, CommandGroup, CommandItem composition
className	string	—	Additional CSS classes on the Command root

Installation

typescript

import { Command, CommandDialog, CommandInput, CommandList, CommandGroup, CommandItem, CommandEmpty, CommandSeparator, CommandShortcut } from '@stackmates/ui-interactive/molecules';

Accessibility

Built on cmdk with full keyboard navigation and auto-filtering
Search input auto-focused inside CommandDialog
Items support aria-selected state

Combobox SearchFilterBar

Combobox

Searchable dropdown built on Headless UI Combobox. Supports custom filtering, virtual scrolling, and render-prop children for option rendering.

ComboboxProps<T>

Prop	Type	Default	Description
options*	T[]	—	Array of options to display
displayValue*	(value: T \| null) => string \| undefined	—	Extract display string from an option
filter	(value: T, query: string) => boolean	—	Custom filter. Falls back to displayValue includes check.
placeholder	string	—	Placeholder text for the input
children*	(value: T) => ReactElement	—	Render function for each option row

Installation

typescript

import { Combobox, ComboboxOption, ComboboxLabel, ComboboxDescription } from '@stackmates/ui-interactive/molecules';

Accessibility

Headless UI ARIA combobox pattern with aria-label support
Arrow keys + Enter for keyboard navigation and selection
Selected option shows check icon indicator

Command Listbox

ContextMenuRx

Right-click context menu built on Radix ContextMenu. Supports items, checkbox items, radio items, sub-menus, labels, separators, and keyboard shortcuts.

Right-click here

ContextMenuItem / ContextMenuCheckboxItem

Prop	Type	Default	Description
variant	'default' \| 'destructive'	'default'	Visual variant (on ContextMenuItem)
inset	boolean	—	Indent to align with icon items (on ContextMenuItem)
checked	boolean	—	Checked state (on ContextMenuCheckboxItem)

Installation

typescript

import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuRadioGroup, ContextMenuLabel, ContextMenuSeparator, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent } from '@stackmates/ui-interactive/molecules';

Accessibility

Activated via right-click or long-press on touch devices
Full keyboard navigation with role="menu" ARIA attributes
CheckboxItem and RadioItem announce their state

DropdownMenu

HoverCardRx

Hover-triggered popover card built on Radix HoverCard. Displays rich content on pointer hover with animated enter/exit transitions.

HoverCardContent

Prop	Type	Default	Description
align	'start' \| 'center' \| 'end'	'center'	Alignment relative to trigger (on HoverCardContent)
sideOffset	number	4	Distance in px from trigger (on HoverCardContent)

Installation

typescript

import { HoverCard, HoverCardTrigger, HoverCardContent } from '@stackmates/ui-interactive/molecules';

Accessibility

Content accessible via pointer hover and focus (Radix Portal)
Not suitable for essential info (hover unavailable on touch)
Use Tooltip for brief labels; HoverCard for rich previews

Tooltip Popover

TooltipRx

Radix-based tooltip with arrow indicator and animated enter/exit transitions. Rx suffix avoids conflict with atoms/Tooltip. Wraps its own TooltipProvider with zero delay by default.

TooltipRx / TooltipContentRx

Prop	Type	Default	Description
sideOffset	number	0	Distance in px from the trigger (on TooltipContentRx)
side	'top' \| 'right' \| 'bottom' \| 'left'	'top'	Preferred side of the trigger (on TooltipContentRx)
align	'start' \| 'center' \| 'end'	'center'	Alignment along the side edge (on TooltipContentRx)
delayDuration	number	0	Delay in ms before tooltip shows (on TooltipProviderRx)

Installation

typescript

import { TooltipRx, TooltipTriggerRx, TooltipContentRx, TooltipProviderRx } from '@stackmates/ui-interactive/molecules';

Usage

Icon button with tooltip

tsx

<TooltipRx>
  <TooltipTriggerRx asChild>
    <Button variant="ghost" size="icon">
      <Settings className="h-4 w-4" />
    </Button>
  </TooltipTriggerRx>
  <TooltipContentRx side="bottom">
    Settings
  </TooltipContentRx>
</TooltipRx>

Accessibility

Radix Tooltip provides aria-describedby linking trigger to content
Content portaled to document body to avoid clipping
Arrow element rendered with matching background color for visual continuity

Tooltip (atom)HoverCardRx

Popover

Click-triggered floating content panel built on Radix Popover. Supports configurable alignment, side, offset, arrow, and collision avoidance. Dismisses on click outside or Escape.

PopoverContent

Prop	Type	Default	Description
align	'start' \| 'center' \| 'end'	'center'	Alignment relative to trigger (on PopoverContent)
side	'top' \| 'right' \| 'bottom' \| 'left'	'bottom'	Preferred side of the trigger (on PopoverContent)
sideOffset	number	4	Distance in px from trigger (on PopoverContent)
showArrow	boolean	false	Show arrow pointing to trigger (on PopoverContent)

Installation

typescript

import { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from '@stackmates/ui-interactive/molecules';

Usage

Settings popover

tsx

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Settings</Button>
  </PopoverTrigger>
  <PopoverContent className="w-80">
    <div className="space-y-2">
      <h4 className="font-medium">Preferences</h4>
      <p className="text-sm text-muted-foreground">Configure options.</p>
    </div>
  </PopoverContent>
</Popover>

Accessibility

Built on Radix Popover with focus management
Escape closes the popover and returns focus to trigger
Click outside dismisses by default (configurable)
Content portaled to avoid clipping

HoverCardRx TooltipRx DropdownMenu

DialogRx

Modal dialog built on Radix Dialog. Compound component with overlay, content, header, title, description, footer, and close button. Supports both controlled and uncontrolled modes.

DialogRx (root)

Prop	Type	Default	Description
open	boolean	—	Controlled open state
onOpenChange	(open: boolean) => void	—	Callback when open state changes
defaultOpen	boolean	false	Initial open state (uncontrolled)

Installation

typescript

import {
  Dialog, DialogTrigger, DialogContent,
  DialogHeader, DialogTitle, DialogDescription,
  DialogFooter, DialogClose,
} from '@stackmates/ui-interactive/molecules';

Usage

Edit form dialog

tsx

<Dialog>
  <DialogTrigger asChild>
    <Button>Edit</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Edit Item</DialogTitle>
      <DialogDescription>Make changes here.</DialogDescription>
    </DialogHeader>
    <form>...</form>
    <DialogFooter>
      <Button type="submit">Save</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Accessibility

Built on Radix Dialog with role="dialog" and aria-modal
Focus trapped inside the dialog while open
Escape key and close button dismiss the dialog
Overlay click dismisses (unlike AlertDialog)

AlertDialog SheetRx Drawer

Prop

Type

Default

Description

open*

boolean

—

Whether the drawer is open

onClose*

() => void

—

Callback when the drawer should close

position

'left' | 'right' | 'top' | 'bottom'

'right'

Slide-in position

showCloseButton

boolean

true

Show the X close button

showOverlay

boolean

true

Show backdrop overlay

Prop

Type

Default

Description

side

'top' | 'right' | 'bottom' | 'left'

'right'

Slide-in side (on SheetContent)

open

boolean

—

Controlled open state (on Sheet root)

onOpenChange

(open: boolean) => void

—

Open state change callback (on Sheet root)

Prop

Type

Default

Description

icon

LucideIcon

—

Icon before item label (on DropdownMenuItem)

shortcut

string

—

Keyboard shortcut hint on the right (on DropdownMenuItem)

variant

'default' | 'destructive'

'default'

Visual variant (on DropdownMenuItem)

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuRadioGroup } from '@stackmates/ui-interactive/molecules';

Prop

Type

Default

Description

children*

ReactNode

—

CommandInput, CommandList, CommandGroup, CommandItem composition

className

string

—

Additional CSS classes on the Command root

Prop

Type

Default

Description

options*

T[]

—

Array of options to display

displayValue*

(value: T | null) => string | undefined

—

Extract display string from an option

filter

(value: T, query: string) => boolean

—

Custom filter. Falls back to displayValue includes check.

placeholder

string

—

Placeholder text for the input

children*

(value: T) => ReactElement

—

Render function for each option row

Prop

Type

Default

Description

variant

'default' | 'destructive'

'default'

Visual variant (on ContextMenuItem)

inset

boolean

—

Indent to align with icon items (on ContextMenuItem)

checked

boolean

—

Checked state (on ContextMenuCheckboxItem)

import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuRadioGroup, ContextMenuLabel, ContextMenuSeparator, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent } from '@stackmates/ui-interactive/molecules';

Prop

Type

Default

Description

align

'start' | 'center' | 'end'

'center'

Alignment relative to trigger (on HoverCardContent)

sideOffset

number

Distance in px from trigger (on HoverCardContent)

Prop

Type

Default

Description

sideOffset

number

Distance in px from the trigger (on TooltipContentRx)

side

'top' | 'right' | 'bottom' | 'left'

'top'

Preferred side of the trigger (on TooltipContentRx)

align

'start' | 'center' | 'end'

'center'

Alignment along the side edge (on TooltipContentRx)

delayDuration

number

Delay in ms before tooltip shows (on TooltipProviderRx)

<TooltipRx> <TooltipTriggerRx asChild> <Button variant="ghost" size="icon"> <Settings className="h-4 w-4" /> </Button> </TooltipTriggerRx> <TooltipContentRx side="bottom"> Settings </TooltipContentRx> </TooltipRx>

Prop

Type

Default

Description

align

'start' | 'center' | 'end'

'center'

Alignment relative to trigger (on PopoverContent)

side

'top' | 'right' | 'bottom' | 'left'

'bottom'

Preferred side of the trigger (on PopoverContent)

sideOffset

number

Distance in px from trigger (on PopoverContent)

showArrow

boolean

false

Show arrow pointing to trigger (on PopoverContent)

<Popover> <PopoverTrigger asChild> <Button variant="outline">Settings</Button> </PopoverTrigger> <PopoverContent className="w-80"> <div className="space-y-2"> <h4 className="font-medium">Preferences</h4> <p className="text-sm text-muted-foreground">Configure options.</p> </div> </PopoverContent> </Popover>

Prop

Type

Default

Description

open

boolean

—

Controlled open state

onOpenChange

(open: boolean) => void

—

Callback when open state changes

defaultOpen

boolean

false

Initial open state (uncontrolled)

<Dialog> <DialogTrigger asChild> <Button>Edit</Button> </DialogTrigger> <DialogContent> <DialogHeader> <DialogTitle>Edit Item</DialogTitle> <DialogDescription>Make changes here.</DialogDescription> </DialogHeader> <form>...</form> <DialogFooter> <Button type="submit">Save</Button> </DialogFooter> </DialogContent> </Dialog>