rexrainbow/phaser3-rex-notes/rexui-components-catalog

RexUI Components Catalog

Use this skill as the component selection index for RexUI. It should answer "Which RexUI component should I use?" and then route to the correct specialized RexUI skill for implementation details.

Use This First

For any RexUI request:

1. Confirm the project has RexUI setup. If not, use rexui-setup-and-factory.
2. Identify the user's UI intent: layout, basic control, popup, list/table, text/input, skin/state, or interaction.
3. Read references/component-catalog.md to choose the component and related skill.
4. Use the specialized skill for config details and recipes.

Routing

Reference

Read references/component-catalog.md for the complete compact selection table.

Read references/high-frequency-demos.md when the user refers to common RexUI demos such as scrollablePanel panel, textbox, yes-no dialog, popup menu, dialog, gridtable, or tabs table.

Selection Rules

• Default to sizer for ordinary row/column layout.
• Use gridSizer for known rows and columns.
• Use fixWidthSizer for wrapping chip/button/tag flows.
• Use overlapSizer for stacked layers in one rectangle.
• Use label as the default compound visual unit: background + icon + text + action.
• Use dialog for custom popups; use confirmDialog only when the intent is confirmation.
• Use scrollablePanel for composed scrollable UI; use gridTable for many repeated items or virtualized lists.
• Use states* objects when the visual object itself needs hover/down/disabled state styles.

Gotchas

• This skill is an index, not a config reference. Do not invent full configs from it alone.
• Do not trigger on generic UI questions unless the user mentions RexUI, rexUI, or Rex plugin usage.
• Some factory names have source/type declaration mismatches. For exact factory signatures, use rexui-setup-and-factory/references/factory-map.md and inspect templates/ui/<component>/Factory.js.