Primitives

Primitives are not another UI kit inventory. They are Varo runtime contracts for state, triggers, overlays, positioning, and dismiss behavior so H5 and mini-program wrappers share the same interaction semantics. Presentation components stay in the component docs; this section keeps the behavior building blocks.

01

Runtime contract

Root owns state and context, Trigger owns entry, Content/Overlay owns the visible layer, and Close owns exit. Platforms may change rendering details, not the contract.

02

Composition order

Place Root first, then Trigger, then Overlay and Content. Stable composition keeps business blocks consistent across H5 and mini-programs.

03

Controlled and uncontrolled

Use internal state for local UI. Switch to controlled mode when routing, analytics, or form coordination needs an external source of truth.

Catalog

Browse the current 17 public primitives by capability. Every page includes an H5 live preview, a mini-program runtime contract, copyable code, and API reference.

Foundation

2

ButtonOpen page

Shared pressed, disabled, loading, and native activation semantics.

Parts ButtonRoot / usePressableRoot

InputOpen page

Text value, formatting, readonly, invalid, and input-event foundation.

Parts InputRoot / useFieldRoot

Selection & Toggle

6

Number FieldOpen page

Numeric bounds, step, precision, and composable increment controls.

Parts NumberFieldRoot / Decrement / Input / Increment

CheckboxOpen page

Checked state, disabled behavior, and indicator rendering.

Parts CheckboxRoot / CheckboxIndicator

Radio GroupOpen page

Single-select group value with item-level disabled support.

Parts RadioGroup / RadioItem / RadioIndicator

SwitchOpen page

Binary toggle with loading and disabled contracts.

Parts SwitchRoot / SwitchThumb

TabsOpen page

Tab value ownership, orientation, and panel association.

Parts TabsRoot / TabsList / TabsTrigger / TabsContent

SelectOpen page

Composable select state, open contract, and option rendering.

Parts SelectRoot / Trigger / Value / Content / Item

Content & Layout

3

ImageOpen page

Image loading, failure, placeholder, and sizing state.

Parts ImageRoot / useImageRoot

CellOpen page

List row, settings item, link row, and keyboard activation contract.

Parts CellGroupRoot / CellRoot

StickyOpen page

Sticky state, offset, and runtime-specific scroll events.

Parts StickyRoot

Disclosure & Floating

3

CollapsibleOpen page

Single disclosure open state for expandable content.

Parts CollapsibleRoot / Trigger / Content

AccordionOpen page

Single or multiple expandable sections with item disable.

Parts AccordionRoot / Item / Trigger / Content

PopoverOpen page

Lightweight floating layer open/close and explicit dismiss contract.

Parts PopoverRoot / Trigger / Content / Close

Layers

3

DialogOpen page

Modal open state, overlay, content, and exit actions.

Parts DialogRoot / Trigger / Overlay / Content / Close

OverlayOpen page

Overlay visibility, click dismiss, and scroll locking.

Parts OverlayRoot

PopupOpen page

Positioned popup with overlay, safe area, and close behavior.

Parts PopupRoot

Next foundational candidates

More primitives are not automatically better. A behavior moves down only when state, keyboard/touch interaction, or dismiss logic would otherwise be repeated by several components.

Candidate	Enables	Why it belongs below UI
Tooltip	Tooltips, chart hints, truncated-copy help	Delayed open, hover/focus, and dismiss policy
Menu / DropdownMenu	Dropdown, context, and action menus	Roving focus, arrow keys, and item activation
ToggleGroup	Segmented controls, formatting bars, filters	Single/multiple selection and roving focus
Slider	Volume, range, and parameter controls	Bounds, step, keyboard, and drag state
Combobox / Listbox	Search select, remote select, command palette	Input, filtering, active option, and selection
Toast	Global feedback, async results, undo	Queue, lifecycle, pause, and dismiss behavior

Prioritize Menu, Tooltip, ToggleGroup, and Slider, then evaluate Combobox and Toast; their cross-runtime input models need explicit H5 and mini-program boundaries first.

Product boundaries

• Primitives own behavior contracts: controlled/uncontrolled state, disabled rules, ARIA, data-* attributes, and dismiss events.
• UI wrappers own visuals and positioning: tokens, motion, icons, floating placement, and platform rendering details.
• Business wrappers own data and product policy: remote search, permissions, pagination, domain models, and copy.

This split keeps Base Kit source readable and editable. Teams can build their own UI packages on the same primitives without forking state machines.

Authoring rules

• H5 and mini-program share the same part names and state model.
• Values inside one TabsRoot / AccordionRoot must stay unique.
• Mini-program docs never pretend a browser render is a real mini-program preview; they use a runtime contract table instead.
• Build custom product UI upward from primitives, or continue with the component docs and the upcoming Blocks authoring guide.

Related docs

• Installation
• Theme
• Components
• Examples