# Rexui Basic Widgets

> Use this skill when building basic RexUI widgets such as labels, buttons, gridButtons, fixWidthButtons, tabs, sliders, checkboxes, toggleSwitch, numberBar, knob, badgeLabel, titleLabel, simpleLabel, or settings panels. Triggers on: RexUI label, RexUI button, RexUI buttons, RexUI tabs, RexUI slider, RexUI checkbox, RexUI toggle, RexUI settings panel, RexUI knob, RexUI numberBar.

- Skill: `rexrainbow/rexui-basic-widgets` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add rexrainbow/rexui-basic-widgets`
- Raw SKILL.md: https://api.skillmd.com/api/skills/rexrainbow/rexui-basic-widgets/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: rexrainbow (https://skillmd.com/u/rexrainbow)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/rexrainbow/rexui-basic-widgets

---


# RexUI Basic Widgets

Use this skill for common RexUI controls used in HUDs, settings panels, menus, and compact tool surfaces.

## Use This First

Choose the widget family:

| Need | Use |
|---|---|
| Background + icon + text + action | `label` |
| Button list | `buttons` |
| Button grid | `gridButtons` |
| Wrapping buttons | `fixWidthButtons` |
| Tab controls | `tabs` |
| Linear numeric input | `slider` |
| Circular numeric input | `knob` |
| Icon + slider + value text | `numberBar` |
| Binary option | `checkbox` or `toggleSwitch` |

For layout-only work, use `rexui-layout-sizers` first. For popups or modal flows, use `rexui-dialogs-and-popups`.

## Required Setup

This skill assumes RexUI is available as `this.rexUI`. If not, use `rexui-setup-and-factory`.

## References

Read these only when needed:

- `references/widget-catalog.md`: what each widget is for and where its public API lives.
- `references/basic-widget-recipes.md`: reduced recipes for labels, buttons, tabs, sliders, and choice controls.
- `references/events.md`: common button/value events and state handling.

## Core Rules

- Most widgets are RexUI sizers internally; call `.layout()` after creation.
- Build button visuals with `label` unless the user needs a custom game object.
- Use `buttonsType: 'radio'` for single selection and `buttonsType: 'checkboxes'` for multi-selection.
- Use `setValueCallback` to reflect selected state in button visuals.
- Use `valuechangeCallback` or `valuechange` events for `slider`, `knob`, and `numberBar`.
- Use package imports only in full setup examples; local `templates/ui/...` paths are source-map paths.

## Source File Map

- `templates/ui/label/Label.d.ts`
- `templates/ui/buttons/Buttons.d.ts`
- `templates/ui/gridbuttons/GridButtons.d.ts`
- `templates/ui/fixwidthbuttons/FixWidthButtons.d.ts`
- `templates/ui/tabs/Tabs.d.ts`
- `templates/ui/slider/Slider.d.ts`
- `templates/ui/numberbar/NumberBar.d.ts`
- `templates/ui/knob/Knob.d.ts`
- `templates/ui/checkbox/Checkbox.d.ts`
- `templates/ui/toggleswitch/ToggleSwitch.d.ts`
- `templates/ui/utils/buttongroup/Buttons.d.ts`

## Related Skills

- `rexui-setup-and-factory`: plugin setup and factory discovery.
- `rexui-components-catalog`: choose the right component family.
- `rexui-layout-sizers`: layout composition.
- `rexui-dialogs-and-popups`: modal and popup workflows.
- `rexui-shapes-and-states`: state-aware skins and visual primitives.