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

# Layout Components

> Box, CompactView, List, VStack, and HStack — containers for structuring your extension UI.

## Box

A generic container for custom layouts. Renders as a `<div>` with your styles applied directly — ideal for building custom overlays on the OBS layer.

```tsx theme={null}
import { Box, Text, Image } from "@1upvision/sdk";

<Box
  style={{
    display: "flex",
    alignItems: "center",
    gap: 12,
    padding: 16,
    background: "#1a1a2e",
    borderRadius: 8,
  }}
>
  <Image
    src="https://example.com/avatar.png"
    width={48}
    height={48}
    style={{ borderRadius: "50%" }}
  />
  <Text
    content="Player One"
    style={{ color: "#fff", fontSize: 20, fontWeight: "bold" }}
  />
</Box>;
```

<ParamField path="style" type="VisionStyle" optional>
  Custom inline styles applied to the container.
</ParamField>

<ParamField path="children" type="ReactNode">
  Child components.
</ParamField>

***

## CompactView

The main container for extension panels. Stacks children vertically with an optional title.

```tsx theme={null}
import { CompactView, Text, Toggle, useExtensionStorage } from "@1upvision/sdk";

function Settings() {
  const [storage, setStorage] = useExtensionStorage();

  return (
    <CompactView title="My Extension">
      <Text content="Configure your extension." variant="muted" />
      <Toggle
        label="Enabled"
        checked={storage.enabled ?? false}
        onChange={(checked) => setStorage({ ...storage, enabled: checked })}
      />
    </CompactView>
  );
}
```

Use `CompactView` as the root of every panel. The `title` prop renders a heading above the content.

<ParamField path="title" type="string" optional>
  Heading displayed above the content.
</ParamField>

<ParamField path="children" type="ReactNode">
  Child components.
</ParamField>

***

## List

A vertical stack with configurable spacing. Use it to group related fields with consistent gaps.

```tsx theme={null}
import {
  CompactView,
  List,
  TextField,
  Toggle,
  useExtensionStorage,
} from "@1upvision/sdk";

function Settings() {
  const [storage, setStorage] = useExtensionStorage();

  return (
    <CompactView title="Stream Info">
      <List gap={16}>
        <TextField
          label="Title"
          value={storage.title ?? ""}
          onChange={(value) => setStorage({ ...storage, title: value })}
        />
        <TextField
          label="Game"
          value={storage.game ?? ""}
          onChange={(value) => setStorage({ ...storage, game: value })}
        />
        <Toggle
          label="Show on stream"
          checked={storage.visible ?? false}
          onChange={(checked) => setStorage({ ...storage, visible: checked })}
        />
      </List>
    </CompactView>
  );
}
```

<ParamField path="gap" type="number" default="8" optional>
  Space between children in pixels.
</ParamField>

<ParamField path="children" type="ReactNode">
  Child components.
</ParamField>

<Tip>
  Nest a `List` inside a `CompactView` when you have multiple fields that need
  more breathing room than the default spacing.
</Tip>

***

## VStack and HStack

`VStack` and `HStack` are SwiftUI-style stack wrappers around `Box`:

* `VStack` enforces `display: "flex"` + `flexDirection: "column"`
* `HStack` enforces `display: "flex"` + `flexDirection: "row"`

Use them when you want predictable flex layout without repeating style boilerplate.

```tsx theme={null}
import { VStack, HStack, Text, Button } from "@1upvision/sdk";

function Controls() {
  return (
    <VStack spacing={12} align="stretch">
      <Text content="Match Controls" variant="heading" />

      <HStack spacing={8} justify="space-between" wrap="wrap">
        <Button label="Pause" variant="secondary" />
        <Button label="Resume" />
      </HStack>
    </VStack>
  );
}
```

<ParamField path="spacing" type="string | number" optional>
  Sets flex `gap`.
</ParamField>

<ParamField path="align" type="string" optional>
  Sets `alignItems`.
</ParamField>

<ParamField path="justify" type="string" optional>
  Sets `justifyContent`.
</ParamField>

<ParamField path="wrap" type="string" optional>
  Sets `flexWrap`.
</ParamField>

<ParamField path="style" type="VisionStyle" optional>
  Additional style fields merged in with the stack defaults.
</ParamField>

<ParamField path="children" type="ReactNode">
  Child components.
</ParamField>