UI/UX Components

Modules

Each cap-* primitive maps to an underlying component:

• cap-uix-switch ⇐ ui-switch — Toggle switch (on/off).
  oaicite:1
• cap-uix-layout ⇐ layout — Layout container (box/circle/grid/etc.). Default type is box.
  oaicite:2
• cap-uix-slider ⇐ ui-slider — Select a value from a range.
  oaicite:3
• cap-uix-icon ⇐ troika-text — Icon primitive (defaults configured for a close icon).
  oaicite:4
• cap-uix-card ⇐ uix-card — Rounded rectangular container for content.
  oaicite:5
• cap-uix-text ⇐ troika-text — 3D text in space.
  oaicite:6
• cap-uix-button ⇐ ui-btn — Clickable button; mixes rounded.
  oaicite:7
• cap-line ⇐ line2 — Draw a line in 3D space.
  oaicite:8
• cap-box-rounded ⇐ uix-box-rounded — Rounded box.
  oaicite:9
• cap-trigger ⇐ geometry — Interaction trigger; uses geometry, body, and trigger.
  oaicite:10
• cap-model-loader ⇐ gltf-model-plus — Load & display a glTF model.
  oaicite:11

---

cap-uix-switch ⇐ ui-switch

A toggle switch that allows the user to choose between two states (typically on/off).

oaicite:12

Extends

• ui-switch
  oaicite:13

Properties

Name	Type	Description
value	boolean	Value of the switch. oaicite:14
disabled	boolean	Whether the switch is disabled. oaicite:15

Example

<cap-uix-switch value="true"></cap-uix-switch>

---

cap-uix-layout ⇐ layout

A layout container that arranges its children in a specific layout (box, circle, grid-like layouts, etc.). Default type is box. ()

Extends

• layout ()

Properties

Name	Type	Description
type	'box' | 'circle' | 'cube' | 'dodecahedron' | 'line' | 'pyramid' | string	Type of layout (default: box). ()
radius	number	Radius of the layout. ()
angle	number	Angle of the layout. ()
columns	number	Number of columns in the layout. ()
margin-column	number	Margin between columns. ()
margin-row	number	Margin between rows. ()
order-attribute	string	Attribute to order elements. ()
plane	boolean	Whether the layout is planar. ()
reverse	boolean	Whether to reverse the layout. ()
fill	boolean	Whether to fill the layout. ()
align	string	Alignment of the layout. ()

Example

<cap-uix-layout type="circle" radius="1">
  <a-entity geometry="primitive: box"></a-entity>
  <a-entity geometry="primitive: sphere"></a-entity>
</cap-uix-layout>

---

cap-uix-slider ⇐ ui-slider

A slider that allows the user to select a value from a range. ()

Extends

• ui-slider ()

Properties

Name	Type	Description
value	number	Value of the slider. ()
disabled	boolean	Whether the slider is disabled. ()
width	number	Width of the slider. ()
height	number	Height of the slider. ()
rail-radius	number	Radius of the slider rail. ()
handle-radius	number	Radius of the slider handle. ()

Example

<cap-uix-slider value="0.5"></cap-uix-slider>

---

cap-uix-icon ⇐ troika-text

An icon primitive (implemented using troika-text), with defaults configured for a close icon. ()

Extends

• troika-text ()

Properties

Name	Type	Description
icon	string	Icon value (supports material-symbols-rounded icon names from Google Font Icons). ()
color	string	Color of the icon. ()
size	number	Size of the icon. ()

Example

<cap-uix-icon icon="home" color="red"></cap-uix-icon>

---

cap-uix-card ⇐ uix-card

A rectangular container with rounded corners, typically used to display content. ()

Extends

• uix-card ()

Properties

Name	Type	Description
height	number	Height of the card. ()
width	number	Width of the card. ()
color	string	Color of the card. ()
radius	number	Radius of the card corners. ()
opacity	number	Opacity of the card. ()
border-color	string	Color of the card border. ()
render-order	number	Render order of the card. ()
border-width	number	Width of the card border. ()
border-opacity	number	Opacity of the card border. ()

Example

<cap-uix-card width="1" height="1" color="red">
  <cap-uix-text value="Hello World!"></cap-uix-text>
</cap-uix-card>

---

cap-uix-text ⇐ troika-text

Displays text in 3D space using troika-text. ()

Extends

• troika-text ()

Properties

Name	Type	Description
align	string	Alignment of the text. ()
anchor	string	Anchor point of the text. ()
baseline	string	Baseline alignment of the text. ()
clip-rect	string	Clip rectangle of the text. ()
color	string	Color of the text. ()
depth-offset	number	Depth offset of the text. ()
font	string	Font of the text. ()
font-size	number	Font size of the text. ()
letter-spacing	number	Letter spacing of the text. ()
line-height	number	Line height of the text. ()
max-width	number	Maximum width of the text. ()
outline-color	string	Outline color of the text. ()
outline-width	number	Outline width of the text. ()
overflow-wrap	string	Overflow wrap of the text. ()
render-order	number	Render order of the text. ()
side	string	Side of the text. ()
tone-mapped	boolean	Whether the text is tone-mapped. ()
value	string	Value of the text. ()
white-space	string	White space handling of the text. ()
y-offset	number	Y offset of the text. ()
z-offset	number	Z offset of the text. ()

Example

<cap-uix-text value="Hello World!" color="red" font-size="0.5"></cap-uix-text>

---

cap-uix-button ⇐ ui-btn

A clickable button for triggering actions or navigation. Uses ui-btn and mixes rounded. ()

Extends / Mixes

• Extends: ui-btn
• Mixes: rounded ()

Properties

Name	Type	Description
height	number	Height of the button. ()
width	number	Width of the button. ()
color	string	Color of the button. ()
radius	number	Radius of the button corners. ()
disabled	boolean	Whether the button is disabled. ()
tooltip-text	string	Tooltip text. ()

Example

<cap-uix-button
  value="Click Me!"
  color="red"
  width="1"
  height="0.5"
></cap-uix-button>

---

cap-line ⇐ line2

Draws a line in 3D space. ()

Extends

• line2 ()

Properties

Name	Type	Description
color	string	Color of the line. ()
width	number	Width of the line. ()
start	string	Starting point of the line. ()
end	string	Ending point of the line. ()

Example

<cap-line start="0 0 0" end="1 1 1" color="red" width="0.1"></cap-line>

---

cap-box-rounded ⇐ uix-box-rounded

A box with rounded corners. ()

Extends

• uix-box-rounded ()

Properties

Name	Type	Description
depth	number	Depth of the box. ()
height	number	Height of the box. ()
width	number	Width of the box. ()
color	string	Color of the box. ()
transparent	boolean	Whether the box is transparent. ()
opacity	number	Opacity of the box. ()
radius	number	Radius of the box border. ()

Example

<cap-box-rounded
  width="1"
  height="1"
  depth="1"
  color="red"
  radius="0.2"
></cap-box-rounded>

---

cap-trigger ⇐ geometry

A trigger component for detecting interactions in 3D space; built from geometry, body, and trigger. ()

Extends

• geometry, body, trigger ()

Emits

• collide — triggered when a collision occurs (regardless of local-trigger). ()
• beginCollide — triggered when a collision begins (respects local-trigger). ()
• endCollide — triggered when a collision ends (respects local-trigger). ()

Properties

Name	Type	Description
geometry	Object	Geometry component settings. ()
geometry.primitive	string	Type of geometry primitive. ()
body	Object	Physics body component settings. ()
body.type	string	Type of physics body. ()
body.isTrigger	boolean	Whether the body is a trigger. ()
local-trigger	boolean	Only interactions from local objects. ()
visible	boolean	Debug: show the collider geometry mesh. ()

Example

<cap-trigger
  visible="false"
  local-trigger="true"
  @beginCollide=${(e) => {
    console.info(e.target)
  }}
  @endCollide=${(e) => {
    console.info(e.target)
  }}
  geometry="primitive:box;width:8;height:8;depth:8;">
</cap-trigger>

---

cap-model-loader ⇐ gltf-model-plus

A model loader for displaying 3D models, based on gltf-model-plus. ()

Extends

• gltf-model-plus ()

Properties

Name	Type	Description
src	string	The src to a glTF file. ()
env-map-intensity	number	Intensity of the environment map. ()
cast-shadow	boolean	Whether the model casts shadows. ()
receive-shadow	boolean	Whether the model receives shadows. ()

Example

<cap-model-loader src="#my-model-asset" cast-shadow="true"></cap-model-loader>