@tuiparts/react

The React Adapter for tuiparts.sh Primitives.

New to package primitives and editable recipes? Start with the primitive and recipe guide.

Installation

Add the Adapter to an existing OpenTUI React application:

pnpm add @tuiparts/react

Peer requirements are @opentui/core and @opentui/react ^0.4.3, React >=19.2.0 <20.

Primitive example

import {
  Accordion,
  Button,
  Checkbox,
  Collapsible,
  Input,
  NumberField,
  Radio,
  RadioGroup,
  Slider,
  Switch,
  Textarea,
  Toggle,
  ToggleGroup,
} from "@tuiparts/react";
import { useState } from "react";

export function Settings() {
  const [checked, setChecked] = useState(false);
  return (
    <box flexDirection="column" gap={1}>
      <Button onPress={({ source }) => console.log(source)}>
        <text content="Run" />
      </Button>
      <Checkbox.Root checked={checked} onCheckedChange={setChecked}>
        <Checkbox.Indicator>
          <text content="✓" />
        </Checkbox.Indicator>
        <text content="Run checks" />
      </Checkbox.Root>
      <Accordion.Root defaultValue={["details"]}>
        <Accordion.Item value="details">
          <Accordion.Trigger>
            <text content="Details" />
          </Accordion.Trigger>
          <Accordion.Panel>
            <text content="Expanded content" />
          </Accordion.Panel>
        </Accordion.Item>
      </Accordion.Root>
      <Input placeholder="Release name" onSubmit={console.log} />
      <NumberField.Root defaultValue={1} min={0} max={20}>
        <NumberField.Decrement><text content="−" /></NumberField.Decrement>
        <NumberField.Input width={8} />
        <NumberField.Increment><text content="+" /></NumberField.Increment>
      </NumberField.Root>
      <Textarea initialValue="Release notes" onSubmit={console.log} />
      <Slider.Root defaultValue={25} max={100}>
        <Slider.Track width={20}><text content="────────────────────" /></Slider.Track>
      </Slider.Root>
      <Switch.Root checked={checked} onCheckedChange={setChecked}>
        {(state) => <text content={state.checked ? "On" : "Off"} />}
      </Switch.Root>
      <RadioGroup defaultValue="stable">
        <Radio.Root value="stable">
          <text content="Stable" />
        </Radio.Root>
      </RadioGroup>
      <Toggle defaultPressed>
        {(state) => <text content={state.pressed ? "Pinned" : "Unpinned"} />}
      </Toggle>
      <ToggleGroup defaultValue={["bold"]} multiple>
        <Toggle value="bold"><text content="Bold" /></Toggle>
        <Toggle value="italic"><text content="Italic" /></Toggle>
      </ToggleGroup>
    </box>
  );
}

From a repository checkout, run a focused tracer with pnpm --filter @tuiparts/react demo:number-field, pnpm --filter @tuiparts/react demo:slider, pnpm --filter @tuiparts/react demo:checkbox-group, pnpm --filter @tuiparts/react demo:accordion, or pnpm --filter @tuiparts/react demo:collapsible.

Imports

All Primitives are exported from @tuiparts/react. Focused imports are also supported:

import { Accordion } from "@tuiparts/react/accordion";
import { Button } from "@tuiparts/react/button";
import { Checkbox } from "@tuiparts/react/checkbox";
import { CheckboxGroup } from "@tuiparts/react/checkbox-group";
import { Collapsible } from "@tuiparts/react/collapsible";
import { Input } from "@tuiparts/react/input";
import { NumberField } from "@tuiparts/react/number-field";
import { Radio } from "@tuiparts/react/radio";
import { RadioGroup } from "@tuiparts/react/radio-group";
import { Slider } from "@tuiparts/react/slider";
import { Switch } from "@tuiparts/react/switch";
import { Textarea } from "@tuiparts/react/textarea";
import { Dialog } from "@tuiparts/react/dialog";
import { Toggle } from "@tuiparts/react/toggle";
import { ToggleGroup } from "@tuiparts/react/toggle-group";
import { Tabs } from "@tuiparts/react/tabs";

Dialog

Dialog is the React compound adapter for the packaged Dialog behavior in @tuiparts/core/dialog. Compose its Root, Trigger, Portal, Backdrop, Popup, Title, Description, and Close parts, or install the editable react/dialog registry recipe for an opinionated visual assembly. The adapter preserves coordinator-owned visibility and z-index plus portal, focus, and controlled-state lifecycle behavior.

The existing @tuiparts/dialog/react provider, hooks, and async APIs remain the companion convenience surface; they are not re-exported by the React adapter.

Input

Input is an additive, unstyled adapter that preserves OpenTUI's mutable value and event model. It has no defaultValue, controlled rollback, or callback aliases.

import { Input } from "@tuiparts/react/input";

<Input
  value="initial"
  onInput={console.log}
  onChange={commit}
  onSubmit={submit}
/>;

onInput reports mutations, onChange reports commits on blur or submit, and onSubmit reports Enter after any changed-value onChange. Visual defaults belong in editable recipes. This is the canonical primitive contract.

Textarea

Textarea is the named single-part adapter for OpenTUI's multiline editor. It preserves initialValue, the native EditBuffer, editing methods, keybindings, and cursor/content/submit callbacks. Refs resolve to the actual Core TextareaRenderable; there is no controlled value facade or Store.

Recipes

Behaviorless presentation such as Badge is installed from the registry rather than imported from this package. Consumer-owned recipes use ordinary TypeScript and native OpenTUI properties.

License

MIT