Reference
Cross References
A living atlas connecting the vocabulary of component architecture — patterns, primitives, and accessibility concepts across every chapter.
- Primitive (Primitive): Base component that renders a native HTML element and supports polymorphism via asChild.. Connected to: asChild, Polymorphism
- asChild (Pattern): Prop that merges a component's behavior onto its child element via Slot, enabling composition without wrapper divs.. Connected to: Slot, Primitive, Polymorphism
- Slot (Pattern): Merges parent props (event handlers, styles, refs) onto a single child element.. Connected to: Compound Component, asChild, Composition
- Composition (Pattern): Building complex UIs by combining small, focused components rather than configuring monolithic ones.. Connected to: Slot, Render Prop
- Compound Component (Pattern): A component that shares implicit state with sub-components through React Context.. Connected to: Context, Slot
- Context (Primitive): React's dependency injection mechanism for sharing data without prop drilling.. Connected to: Compound Component, Collection
- Render Prop (Pattern): A function prop that lets a component delegate its rendering to the consumer.. Connected to: Composition
- Controlled Component (Pattern): Component whose state is managed by its parent via props and callbacks.. Connected to: Uncontrolled Component
- Uncontrolled Component (Pattern): Component that manages its own internal state, exposing it through refs or callbacks.. Connected to: Controlled Component
- Portal (Architecture): Renders children into a DOM node outside the parent hierarchy, breaking out of overflow and stacking contexts.. Connected to: DismissableLayer, Presence
- FocusScope (Accessibility): Traps and manages keyboard focus within a DOM subtree, essential for modal dialogs and popovers.. Connected to: Focus Trap, DismissableLayer, Roving Focus
- Focus Trap (Accessibility): Prevents focus from leaving a designated region, cycling Tab between first and last focusable elements.. Connected to: FocusScope
- DismissableLayer (Interaction): Listens for outside clicks and Escape key to dismiss overlays, coordinating with nested layers.. Connected to: FocusScope, Portal, Presence
- Presence (Architecture): Controls mount/unmount lifecycle with animation support, keeping elements in the DOM until exit animations complete.. Connected to: DismissableLayer, Portal
- Collection (Primitive): Manages an ordered list of item refs for components like Listbox and Combobox that need DOM-order awareness.. Connected to: Roving Focus, Context
- Roving Focus (Accessibility): Arrow-key navigation pattern where a single item in a group is tabbable and arrows move focus between items.. Connected to: Collection, FocusScope
- Floating UI (Architecture): Positioning engine for tooltips, popovers, and dropdowns that handles overflow, flipping, and shifting.. Connected to: Middleware, Virtual Element
- Middleware (Architecture): Composable positioning logic in Floating UI that transforms coordinates (flip, shift, offset, arrow).. Connected to: Floating UI
- Virtual Element (Primitive): A non-DOM reference element (like cursor position) that Floating UI can anchor to.. Connected to: Floating UI
- Polymorphism (Pattern): Rendering a component as different HTML elements or other components, via 'as' prop or asChild pattern.. Connected to: asChild, Primitive