How adobe/react-spectrum works
This monorepo provides React Spectrum’s styled design-system components, React Aria’s accessible behavior, React Stately’s state hooks, and framework-agnostic internationalization packages. A typical custom-component workflow combines Aria behavior with Stately state; Spectrum offers a prebuilt themed component layer. The sampled drag-and-drop path shows React Spectrum and React Aria Components configuring collection behavior through Stately state and React Aria hooks. Other capabilities, including date/number formatting and adaptive themes, are represented from README claims and the repository tree; unsampled implementation links are omitted.
Main entry points: useDrag.ts Drag behavior · useDragAndDrop.tsx Component DnD hooks · useDraggableCollectionState.ts Collection drag state · useDragAndDrop.ts Spectrum drag and drop
Components 22
Styled components
- Spectrum components
packages/@adobe/react-spectrum/src - Spectrum themes
packages/@adobe/react-spectrum/src/theme-default - Spectrum drag and drop
packages/@adobe/react-spectrum/src/dnd/useDragAndDrop.ts
Accessible behavior
- Component DnD hooks
packages/react-aria-components/src/useDragAndDrop.tsx - Drag behavior
packages/react-aria/src/dnd/useDrag.ts - Drag manager
packages/react-aria/src/dnd/DragManager.ts - Drag utilities
packages/react-aria/src/dnd/utils.ts - Shadow DOM helpers
packages/react-aria/src/utils/shadowdom/DOMFunctions.ts - Button behavior
packages/react-aria/src/button/useButton.ts - Focus management
packages/react-aria/src/focus/FocusScope.tsx - Preview trigger
packages/react-aria/src/tooltip/usePreviewTrigger.ts
UI state
- Collection drag state
packages/react-stately/src/dnd/useDraggableCollectionState.ts - Selection manager
packages/react-stately/src/selection/SelectionManager.ts - Search field state
packages/react-stately/src/searchfield/useSearchFieldState.ts
Internationalization
- Date internationalization
packages/@internationalized/date/src - Number formatting
packages/@internationalized/number/src/NumberFormatter.ts - Number parsing
packages/@internationalized/number/src/NumberParser.ts - Message formatting
packages/@internationalized/message/src/MessageFormatter.ts - Localized strings
packages/@internationalized/string/src/LocalizedStringFormatter.ts
Spectrum 2
- S2 drag and drop
packages/@react-spectrum/s2/src/useDragAndDrop.ts - S2 style utilities
packages/@react-spectrum/s2/src
Other components
- Application developer
Connections 17
- Application developer → Spectrum components: uses components
- Application developer → Component DnD hooks: uses hooks
- Application developer → Collection drag state: uses state hooks
- Spectrum drag and drop → Collection drag state: configures state
packages/@adobe/react-spectrum/src/dnd/useDragAndDrop.ts - Spectrum drag and drop → Drag behavior: uses drop behavior
packages/@adobe/react-spectrum/src/dnd/useDragAndDrop.ts - Component DnD hooks → Collection drag state: configures state
packages/react-aria-components/src/useDragAndDrop.tsx - Component DnD hooks → Drag behavior: uses drop behavior
packages/react-aria-components/src/useDragAndDrop.tsx - Drag behavior → Button behavior: uses button behavior
packages/react-aria/src/dnd/useDrag.ts - Drag behavior → Drag utilities: uses utilities
packages/react-aria/src/dnd/useDrag.ts - Drag behavior → Shadow DOM helpers: gets event target
packages/react-aria/src/dnd/useDrag.ts - Drag manager → Shadow DOM helpers: reads active element
packages/react-aria/src/dnd/DragManager.ts - Drag manager → Drag behavior: manages drag session
packages/react-aria/src/dnd/useDrag.ts - Drag utilities → Focus management: uses modality hook
packages/react-aria/src/dnd/utils.ts - Preview trigger → Focus management: gets focusable tree
packages/react-aria/src/tooltip/usePreviewTrigger.ts - S2 drag and drop → Component DnD hooks: delegates to
packages/@react-spectrum/s2/src/useDragAndDrop.ts - Spectrum components → Spectrum themes: supports custom themes
- Number formatting → Number parsing: formats and parses