Skip to main content

​
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>;
​
style
VisionStyle
Custom inline styles applied to the container.
​
children
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.
​
title
string
Heading displayed above the content.
​
children
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>
  );
}
​
gap
number
default:"8"
Space between children in pixels.
​
children
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>
  );
}
​
spacing
string | number
Sets flex gap.
​
align
string
Sets alignItems.
​
justify
string
Sets justifyContent.
​
wrap
string
Sets flexWrap.
​
style
VisionStyle
Additional style fields merged in with the stack defaults.
​
children
ReactNode
Child components.