> ## 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.

# Display Components

> Text and Image — render content in your extension panels and OBS overlay.

## Text

Renders styled text. Use the `variant` prop to control the visual style.

```tsx theme={null}
<Text content="Stream Title" variant="heading" />
<Text content="A helpful description for the streamer." variant="muted" />
<Text content="Important value" variant="bold" />
<Text content="Regular text" />
```

<ParamField path="content" type="string" required>
  The text to display.
</ParamField>

<ParamField path="variant" type="'default' | 'muted' | 'bold' | 'heading'" default="default" optional>
  `"heading"` — large and bold, for titles. `"bold"` — semibold emphasis.
  `"muted"` — smaller and dimmed, for descriptions. `"default"` — normal text.
</ParamField>

### Practical Example

Use `Text` to show the current state of a storage value, or as labels and descriptions in your settings panel:

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

function Overlay() {
  const [storage] = useExtensionStorage();
  const score = storage.score ?? 0;

  return (
    <CompactView>
      <Text content={`Score: ${score}`} variant="heading" />
      <Text content="Updates in real-time from the editor." variant="muted" />
    </CompactView>
  );
}
```

***

## Image

Displays an image from a URL. Handles loading states automatically.

```tsx theme={null}
<Image
  src="https://example.com/logo.png"
  alt="Channel logo"
  width={200}
  height={100}
/>
```

<ParamField path="src" type="string" required>
  Image source. Supports `http(s)` URLs and extension-local files from
  `public/` (for example: `/assets/icon.png`).
</ParamField>

<ParamField path="alt" type="string" optional>
  Alt text for accessibility.
</ParamField>

<ParamField path="width" type="number" optional>
  Width in pixels.
</ParamField>

<ParamField path="height" type="number" optional>
  Height in pixels.
</ParamField>

### Practical Example

Let the streamer provide an avatar URL in the editor, then display it on the overlay:

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

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

  return (
    <CompactView title="Avatar">
      <TextField
        label="Image URL"
        placeholder="https://..."
        value={storage.avatarUrl ?? ""}
        onChange={(value) => setStorage({ ...storage, avatarUrl: value })}
      />
    </CompactView>
  );
}

// OBS layer
function Overlay() {
  const [storage] = useExtensionStorage();

  if (!storage.avatarUrl) return null;

  return (
    <CompactView>
      <List gap={8}>
        <Image src={storage.avatarUrl} alt="Avatar" width={64} height={64} />
        <Text content={storage.name ?? ""} variant="bold" />
      </List>
    </CompactView>
  );
}
```