# adobe/react-spectrum architecture

> Architecture diagram of the GitHub repository adobe/react-spectrum, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-10-01). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/adobe/react-spectrum
- Repository: https://github.com/adobe/react-spectrum

## Overview

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: [`packages/react-aria/src/dnd/useDrag.ts`](https://github.com/adobe/react-spectrum/blob/main/packages/react-aria/src/dnd/useDrag.ts) (Drag behavior), [`packages/react-aria-components/src/useDragAndDrop.tsx`](https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/src/useDragAndDrop.tsx) (Component DnD hooks), [`packages/react-stately/src/dnd/useDraggableCollectionState.ts`](https://github.com/adobe/react-spectrum/blob/main/packages/react-stately/src/dnd/useDraggableCollectionState.ts) (Collection drag state), [`packages/@adobe/react-spectrum/src/dnd/useDragAndDrop.ts`](https://github.com/adobe/react-spectrum/blob/main/packages/%40adobe/react-spectrum/src/dnd/useDragAndDrop.ts) (Spectrum drag and drop)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_spectrum["Styled components"]
  node_spectrum_components["Spectrum components"]
  node_spectrum_themes["Spectrum themes"]
  node_spectrum_dnd["Spectrum drag and drop<br/>[useDragAndDrop.ts]"]
end

subgraph group_aria["Accessible behavior"]
  node_rac_dnd["Component DnD hooks<br/>[useDragAndDrop.tsx]"]
  node_aria_dnd["Drag behavior<br/>[useDrag.ts]"]
  node_drag_manager["Drag manager<br/>[DragManager.ts]"]
  node_dnd_utils["Drag utilities<br/>[utils.ts]"]
  node_dom_helpers["Shadow DOM helpers<br/>[DOMFunctions.ts]"]
  node_aria_button["Button behavior<br/>[useButton.ts]"]
  node_focus_scope["Focus management<br/>[FocusScope.tsx]"]
  node_preview_trigger["Preview trigger"]
end

subgraph group_stately["UI state"]
  node_drag_state["Collection drag state"]
  node_selection_state["Selection manager"]
  node_search_state["Search field state"]
end

subgraph group_intl["Internationalization"]
  node_date_intl["Date internationalization"]
  node_number_intl["Number formatting<br/>[NumberFormatter.ts]"]
  node_number_parser["Number parsing<br/>[NumberParser.ts]"]
  node_message_intl["Message formatting"]
  node_string_intl["Localized strings"]
end

subgraph group_s2["Spectrum 2"]
  node_s2_dnd["S2 drag and drop<br/>[useDragAndDrop.ts]"]
  node_s2_style["S2 style utilities"]
end

node_developer(("Application developer"))

node_developer -->|"uses components"| node_spectrum_components
node_developer -->|"uses hooks"| node_rac_dnd
node_developer -->|"uses state hooks"| node_drag_state
node_spectrum_dnd -->|"configures state"| node_drag_state
node_spectrum_dnd -->|"uses drop behavior"| node_aria_dnd
node_rac_dnd -->|"configures state"| node_drag_state
node_rac_dnd -->|"uses drop behavior"| node_aria_dnd
node_aria_dnd -->|"uses button behavior"| node_aria_button
node_aria_dnd -->|"uses utilities"| node_dnd_utils
node_aria_dnd -->|"gets event target"| node_dom_helpers
node_drag_manager -->|"reads active element"| node_dom_helpers
node_drag_manager -.->|"manages drag session"| node_aria_dnd
node_dnd_utils -->|"uses modality hook"| node_focus_scope
node_preview_trigger -->|"gets focusable tree"| node_focus_scope
node_s2_dnd -->|"delegates to"| node_rac_dnd
node_spectrum_components -->|"supports custom themes"| node_spectrum_themes
node_number_intl -.->|"formats and parses"| node_number_parser

click node_spectrum_components "https://github.com/adobe/react-spectrum/tree/main/packages/%40adobe/react-spectrum/src"
click node_spectrum_themes "https://github.com/adobe/react-spectrum/tree/main/packages/%40adobe/react-spectrum/src/theme-default"
click node_spectrum_dnd "https://github.com/adobe/react-spectrum/blob/main/packages/%40adobe/react-spectrum/src/dnd/useDragAndDrop.ts"
click node_rac_dnd "https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/src/useDragAndDrop.tsx"
click node_aria_dnd "https://github.com/adobe/react-spectrum/blob/main/packages/react-aria/src/dnd/useDrag.ts"
click node_drag_manager "https://github.com/adobe/react-spectrum/blob/main/packages/react-aria/src/dnd/DragManager.ts"
click node_dnd_utils "https://github.com/adobe/react-spectrum/blob/main/packages/react-aria/src/dnd/utils.ts"
click node_dom_helpers "https://github.com/adobe/react-spectrum/blob/main/packages/react-aria/src/utils/shadowdom/DOMFunctions.ts"
click node_aria_button "https://github.com/adobe/react-spectrum/blob/main/packages/react-aria/src/button/useButton.ts"
click node_focus_scope "https://github.com/adobe/react-spectrum/blob/main/packages/react-aria/src/focus/FocusScope.tsx"
click node_preview_trigger "https://github.com/adobe/react-spectrum/blob/main/packages/react-aria/src/tooltip/usePreviewTrigger.ts"
click node_drag_state "https://github.com/adobe/react-spectrum/blob/main/packages/react-stately/src/dnd/useDraggableCollectionState.ts"
click node_selection_state "https://github.com/adobe/react-spectrum/blob/main/packages/react-stately/src/selection/SelectionManager.ts"
click node_search_state "https://github.com/adobe/react-spectrum/blob/main/packages/react-stately/src/searchfield/useSearchFieldState.ts"
click node_date_intl "https://github.com/adobe/react-spectrum/tree/main/packages/%40internationalized/date/src"
click node_number_intl "https://github.com/adobe/react-spectrum/blob/main/packages/%40internationalized/number/src/NumberFormatter.ts"
click node_number_parser "https://github.com/adobe/react-spectrum/blob/main/packages/%40internationalized/number/src/NumberParser.ts"
click node_message_intl "https://github.com/adobe/react-spectrum/blob/main/packages/%40internationalized/message/src/MessageFormatter.ts"
click node_string_intl "https://github.com/adobe/react-spectrum/blob/main/packages/%40internationalized/string/src/LocalizedStringFormatter.ts"
click node_s2_dnd "https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/s2/src/useDragAndDrop.ts"
click node_s2_style "https://github.com/adobe/react-spectrum/tree/main/packages/%40react-spectrum/s2/src"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_spectrum_components,node_spectrum_themes,node_spectrum_dnd toneBlue
class node_rac_dnd,node_aria_dnd,node_drag_manager,node_dnd_utils,node_dom_helpers,node_aria_button,node_focus_scope,node_preview_trigger toneAmber
class node_drag_state,node_selection_state,node_search_state toneMint
class node_date_intl,node_number_intl,node_number_parser,node_message_intl,node_string_intl toneRose
class node_s2_dnd,node_s2_style,node_developer toneIndigo
```

## Components

### Styled components

- [Spectrum components](https://github.com/adobe/react-spectrum/tree/main/packages/%40adobe/react-spectrum/src): `packages/@adobe/react-spectrum/src`
- [Spectrum themes](https://github.com/adobe/react-spectrum/tree/main/packages/%40adobe/react-spectrum/src/theme-default): `packages/@adobe/react-spectrum/src/theme-default`
- [Spectrum drag and drop](https://github.com/adobe/react-spectrum/blob/main/packages/%40adobe/react-spectrum/src/dnd/useDragAndDrop.ts): `packages/@adobe/react-spectrum/src/dnd/useDragAndDrop.ts`

### Accessible behavior

- [Component DnD hooks](https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/src/useDragAndDrop.tsx): `packages/react-aria-components/src/useDragAndDrop.tsx`
- [Drag behavior](https://github.com/adobe/react-spectrum/blob/main/packages/react-aria/src/dnd/useDrag.ts): `packages/react-aria/src/dnd/useDrag.ts`
- [Drag manager](https://github.com/adobe/react-spectrum/blob/main/packages/react-aria/src/dnd/DragManager.ts): `packages/react-aria/src/dnd/DragManager.ts`
- [Drag utilities](https://github.com/adobe/react-spectrum/blob/main/packages/react-aria/src/dnd/utils.ts): `packages/react-aria/src/dnd/utils.ts`
- [Shadow DOM helpers](https://github.com/adobe/react-spectrum/blob/main/packages/react-aria/src/utils/shadowdom/DOMFunctions.ts): `packages/react-aria/src/utils/shadowdom/DOMFunctions.ts`
- [Button behavior](https://github.com/adobe/react-spectrum/blob/main/packages/react-aria/src/button/useButton.ts): `packages/react-aria/src/button/useButton.ts`
- [Focus management](https://github.com/adobe/react-spectrum/blob/main/packages/react-aria/src/focus/FocusScope.tsx): `packages/react-aria/src/focus/FocusScope.tsx`
- [Preview trigger](https://github.com/adobe/react-spectrum/blob/main/packages/react-aria/src/tooltip/usePreviewTrigger.ts): `packages/react-aria/src/tooltip/usePreviewTrigger.ts`

### UI state

- [Collection drag state](https://github.com/adobe/react-spectrum/blob/main/packages/react-stately/src/dnd/useDraggableCollectionState.ts): `packages/react-stately/src/dnd/useDraggableCollectionState.ts`
- [Selection manager](https://github.com/adobe/react-spectrum/blob/main/packages/react-stately/src/selection/SelectionManager.ts): `packages/react-stately/src/selection/SelectionManager.ts`
- [Search field state](https://github.com/adobe/react-spectrum/blob/main/packages/react-stately/src/searchfield/useSearchFieldState.ts): `packages/react-stately/src/searchfield/useSearchFieldState.ts`

### Internationalization

- [Date internationalization](https://github.com/adobe/react-spectrum/tree/main/packages/%40internationalized/date/src): `packages/@internationalized/date/src`
- [Number formatting](https://github.com/adobe/react-spectrum/blob/main/packages/%40internationalized/number/src/NumberFormatter.ts): `packages/@internationalized/number/src/NumberFormatter.ts`
- [Number parsing](https://github.com/adobe/react-spectrum/blob/main/packages/%40internationalized/number/src/NumberParser.ts): `packages/@internationalized/number/src/NumberParser.ts`
- [Message formatting](https://github.com/adobe/react-spectrum/blob/main/packages/%40internationalized/message/src/MessageFormatter.ts): `packages/@internationalized/message/src/MessageFormatter.ts`
- [Localized strings](https://github.com/adobe/react-spectrum/blob/main/packages/%40internationalized/string/src/LocalizedStringFormatter.ts): `packages/@internationalized/string/src/LocalizedStringFormatter.ts`

### Spectrum 2

- [S2 drag and drop](https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/s2/src/useDragAndDrop.ts): `packages/@react-spectrum/s2/src/useDragAndDrop.ts`
- [S2 style utilities](https://github.com/adobe/react-spectrum/tree/main/packages/%40react-spectrum/s2/src): `packages/@react-spectrum/s2/src`

### Other components

- **Application developer**

## Connections

- 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 (evidence: `packages/@adobe/react-spectrum/src/dnd/useDragAndDrop.ts`)
- Spectrum drag and drop → Drag behavior: uses drop behavior (evidence: `packages/@adobe/react-spectrum/src/dnd/useDragAndDrop.ts`)
- Component DnD hooks → Collection drag state: configures state (evidence: `packages/react-aria-components/src/useDragAndDrop.tsx`)
- Component DnD hooks → Drag behavior: uses drop behavior (evidence: `packages/react-aria-components/src/useDragAndDrop.tsx`)
- Drag behavior → Button behavior: uses button behavior (evidence: `packages/react-aria/src/dnd/useDrag.ts`)
- Drag behavior → Drag utilities: uses utilities (evidence: `packages/react-aria/src/dnd/useDrag.ts`)
- Drag behavior → Shadow DOM helpers: gets event target (evidence: `packages/react-aria/src/dnd/useDrag.ts`)
- Drag manager → Shadow DOM helpers: reads active element (evidence: `packages/react-aria/src/dnd/DragManager.ts`)
- Drag manager → Drag behavior: manages drag session (evidence: `packages/react-aria/src/dnd/useDrag.ts`)
- Drag utilities → Focus management: uses modality hook (evidence: `packages/react-aria/src/dnd/utils.ts`)
- Preview trigger → Focus management: gets focusable tree (evidence: `packages/react-aria/src/tooltip/usePreviewTrigger.ts`)
- S2 drag and drop → Component DnD hooks: delegates to (evidence: `packages/@react-spectrum/s2/src/useDragAndDrop.ts`)
- Spectrum components → Spectrum themes: supports custom themes
- Number formatting → Number parsing: formats and parses