Layout Components

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.

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>;

VisionStyle

Custom inline styles applied to the container.

ReactNode

Child components.

CompactView

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

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.

string

Heading displayed above the content.

ReactNode

Child components.

List

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

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>
  );
}

number

default:"8"

Space between children in pixels.

ReactNode

Child components.

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

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.

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>
  );
}

string | number

Sets flex gap.

string

Sets alignItems.

string

Sets justifyContent.

string

Sets flexWrap.

VisionStyle

Additional style fields merged in with the stack defaults.

ReactNode

Child components.

Custom Widgets

Extensions SDK

Box

CompactView

List

VStack and HStack

​Box

​CompactView

​List

​VStack and HStack

Box

CompactView

List

VStack and HStack