> ## Documentation Index
> Fetch the complete documentation index at: https://docs.liv.tv/llms.txt
> Use this file to discover all available pages before exploring further.

# UI Components

> Overview of the LCKUI 3D component library for VR touch interaction in Unreal Engine, including buttons, toggles, steppers, displays, and styling with the LIV Camera Kit (LCK) SDK.

<Info>
  **Module:** LCKUI | **Version:** 1.0 | **Platforms:** All
</Info>

## Overview

LCKUI provides a comprehensive 3D UI component library designed for VR touch interaction. Components feature touch-based input, visual state management, and material-driven styling optimized for immersive environments.

<img src="https://mintcdn.com/liv/MwCn4kLMBfHUSvUi/images/unreal-images/image30.png?fit=max&auto=format&n=MwCn4kLMBfHUSvUi&q=85&s=ec366a85d3f80ccad0f0a3fec7e9f53f" alt="Tablet 3D UI" width="553" height="330" data-path="images/unreal-images/image30.png" />

## Component Hierarchy

```
USceneComponent
└── ULCKBaseButton (ILCKButtonable, ILCKShowable)
    ├── ULCKToggle
    │   ├── ULCKRectToggle
    │   ├── ULCKFollowButton
    │   ├── ULCKMicButton
    │   └── ULCKScreenOrientationButton
    ├── ULCKStepper
    │   ├── ULCKFOVButton
    │   ├── ULCKDistanceButton
    │   └── ULCKSmoothnessButton
    ├── ULCKRectButton
    │   └── ULCKFlipButton
    ├── ULCKPad2D
    ├── ULCKRecordButton
    ├── ULCKVideoQualityButton
    └── ULCKOnScreenButton
        ├── ULCKOnScreenFlipButton
        └── ULCKOnScreenPhotoButton
```

## Key Components

<CardGroup cols={2}>
  <Card title="ULCKBaseButton" icon="square">
    Base class for all UI buttons with touch interaction and visual states
  </Card>

  <Card title="ULCKToggle" icon="toggle-on">
    On/off toggle button with state-dependent icons
  </Card>

  <Card title="ULCKStepper" icon="plus-minus">
    Increment/decrement control for numerical values
  </Card>

  <Card title="ULCKDisplay" icon="tv">
    Render target display surface with overlay effects
  </Card>
</CardGroup>

## Button Types

<Tabs>
  <Tab title="Square">
    Standard icon button for actions and toggles.

    **Box Extent:** (0.4, 2.4, 2.4)

    **UV Step:** (0.1, 0.1)

    ```cpp theme={null}
    ULCKBaseButton* Button = CreateDefaultSubobject<ULCKBaseButton>(TEXT("MyButton"));
    Button->ButtonType = ELCKButtonType::Square;
    ```
  </Tab>

  <Tab title="Rectangle">
    Wide button for text labels and multi-action controls.

    **Box Extent:** (0.4, 6.0, 2.4)

    **UV Step:** (0.25, 0.1)

    ```cpp theme={null}
    ULCKRectButton* Button = CreateDefaultSubobject<ULCKRectButton>(TEXT("WideButton"));
    ```
  </Tab>

  <Tab title="Tab">
    Tab-shaped button for mode selection.

    **Box Extent:** (0.4, 4.4, 2.4)

    **UV Step:** (0.183333, 0.1)
  </Tab>

  <Tab title="Selector">
    Top selector for dropdowns and menus.

    **Box Extent:** (2.4, 4.4, 0.8)
  </Tab>
</Tabs>

## Quick Example

```cpp theme={null}
#include "LCKBaseButton.h"
#include "LCKToggle.h"

void AMyActor::SetupUI()
{
    // Create a toggle button
    ULCKToggle* MicToggle = CreateDefaultSubobject<ULCKToggle>(TEXT("MicToggle"));
    MicToggle->SetupAttachment(RootComponent);

    // Set toggle icons
    MicToggle->ToggleOnIcon = MicOnTexture;
    MicToggle->ToggleOffIcon = MicOffTexture;

    // Bind to tap event
    MicToggle->OnTapStarted.AddDynamic(this, &AMyActor::OnMicToggleTapped);
}

void AMyActor::OnMicToggleTapped()
{
    bIsMicOn = !bIsMicOn;
    MicToggle->UpdateVisuals(bIsMicOn);
}
```

## Interfaces

### ILCKButtonable

Marker interface for button-like objects that can be pressed.

### ILCKShowable

Visibility control interface for show/hide operations.

```cpp theme={null}
class ILCKShowable
{
public:
    virtual void Show() = 0;
    virtual void Hide() = 0;
};
```

### ILCKRecordable

Recording state interface for record button components.

```cpp theme={null}
class ILCKRecordable
{
public:
    virtual void SetTime(float NewTime) = 0;
    virtual void UpdateVisuals(const ELCKRecordingState NewState) = 0;
};
```

## Styling

### Color Palette

The SDK provides a consistent color palette via `FLCKColor`:

| Color           | RGB             | Usage                |
| --------------- | --------------- | -------------------- |
| `Primary`       | (8, 8, 8)       | Main background      |
| `PrimaryText`   | (220, 220, 220) | Primary text         |
| `ButtonDefault` | (40, 40, 40)    | Button background    |
| `ButtonActive`  | (94, 69, 255)   | Active/pressed state |
| `Alert`         | (255, 42, 42)   | Recording indicator  |
| `Success`       | (32, 196, 64)   | Success state        |

### Constants

```cpp theme={null}
struct FLCKConstants
{
    static constexpr float CoolDownTime = 0.25f;  // Button cooldown
    inline static const FName UICollisionProfileName = TEXT("OverlapOnlyPawn");
};
```

## Log Category

```cpp theme={null}
DECLARE_LOG_CATEGORY_EXTERN(LogLCKUI, Log, All);
```

## Next Steps

<CardGroup cols={3}>
  <Card title="Buttons" icon="square" href="/unreal/tablet-customization/buttons">
    Button components
  </Card>

  <Card title="Controls" icon="sliders" href="/unreal/tablet-customization/controls">
    Advanced controls
  </Card>

  <Card title="Customization" icon="palette" href="/unreal/tablet-customization/customization">
    Theming and styling
  </Card>
</CardGroup>