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:
- Confirm the project has RexUI setup. If not, use
rexui-setup-and-factory.
- Identify the user's UI intent: layout, basic control, popup, list/table, text/input, skin/state, or interaction.
- Read
references/component-catalog.md to choose the component and related skill.
- Use the specialized skill for config details and recipes.
Routing
| User asks for |
Route to |
Plugin install, this.rexUI, factory names |
rexui-setup-and-factory |
| Rows, columns, grids, wrapping, overlays, nested panels |
rexui-layout-sizers |
| Labels, buttons, tabs, sliders, toggles, settings controls |
rexui-basic-widgets |
| Dialogs, modals, menus, dropdowns, toasts |
rexui-dialogs-and-popups |
| Scrollable panels, virtual lists, trees, pages, grid tables |
rexui-scroll-lists-and-tables |
| Rich text, text boxes, editable input, file/color input |
rexui-text-and-input |
| Shapes, backgrounds, states, skins, progress, image boxes |
rexui-shapes-and-states |
| Click/tap/press/drag/swipe/pinch/anchor/fade/effects |
rexui-interactions-and-effects |
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.
1---2name: rexui-components-catalog3description: Use this skill when choosing RexUI components, browsing the RexUI component catalog, answering which RexUI widget or UI element to use, or routing a RexUI request to the right specialized skill. Triggers on: RexUI components, RexUI catalog, which RexUI widget, RexUI UI elements, choose RexUI component, RexUI factory list.4---56# RexUI Components Catalog78Use 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.910## Use This First1112For any RexUI request:13141. Confirm the project has RexUI setup. If not, use `rexui-setup-and-factory`.152. Identify the user's UI intent: layout, basic control, popup, list/table, text/input, skin/state, or interaction.163. Read `references/component-catalog.md` to choose the component and related skill.174. Use the specialized skill for config details and recipes.1819## Routing2021| User asks for | Route to |22|---|---|23| Plugin install, `this.rexUI`, factory names | `rexui-setup-and-factory` |24| Rows, columns, grids, wrapping, overlays, nested panels | `rexui-layout-sizers` |25| Labels, buttons, tabs, sliders, toggles, settings controls | `rexui-basic-widgets` |26| Dialogs, modals, menus, dropdowns, toasts | `rexui-dialogs-and-popups` |27| Scrollable panels, virtual lists, trees, pages, grid tables | `rexui-scroll-lists-and-tables` |28| Rich text, text boxes, editable input, file/color input | `rexui-text-and-input` |29| Shapes, backgrounds, states, skins, progress, image boxes | `rexui-shapes-and-states` |30| Click/tap/press/drag/swipe/pinch/anchor/fade/effects | `rexui-interactions-and-effects` |3132## Reference3334Read `references/component-catalog.md` for the complete compact selection table.3536Read `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.3738## Selection Rules3940- Default to `sizer` for ordinary row/column layout.41- Use `gridSizer` for known rows and columns.42- Use `fixWidthSizer` for wrapping chip/button/tag flows.43- Use `overlapSizer` for stacked layers in one rectangle.44- Use `label` as the default compound visual unit: background + icon + text + action.45- Use `dialog` for custom popups; use `confirmDialog` only when the intent is confirmation.46- Use `scrollablePanel` for composed scrollable UI; use `gridTable` for many repeated items or virtualized lists.47- Use `states*` objects when the visual object itself needs hover/down/disabled state styles.4849## Gotchas5051- This skill is an index, not a config reference. Do not invent full configs from it alone.52- Do not trigger on generic UI questions unless the user mentions RexUI, `rexUI`, or Rex plugin usage.53- 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`.
rexrainbow