@navyk/opentui-solid

@opentui/solid bindings for the @navyk/opentui-core package.

Install

bun add @navyk/opentui-core @navyk/opentui-solid @opentui/solid @opentui/core solid-js

Setup

Import the package once during app bootstrap. This registers grid, cell, scope, and target as OpenTUI components for Solid.

import "@navyk/opentui-solid";

Minimal usage

import "@navyk/opentui-solid";

const movement = {
    overflowBehavior: "stop",
    left: { name: "left" },
    right: { name: "right" },
    up: { name: "up" },
    down: { name: "down" },
} as const;

export function App() {
    return (
        <scope id="app" defaultFocus="menu-grid">
            <grid
                id="menu-grid"
                size={[2, 2]}
                movement={movement}
                focusCurrentFocusLocal
                style={{ width: "100%", height: "100%" }}
            >
                <cell id="a" style={{ width: "50%", height: "50%" }} />
                <cell id="b" style={{ width: "50%", height: "50%" }} />
                <cell id="c" style={{ width: "50%", height: "50%" }} />
                <cell id="d" style={{ width: "50%", height: "50%" }} />
            </grid>
        </scope>
    );
}