Customizable components library built on top of opentui/core
npm install opentuituiA customizable components library built on top of opentui/core.
- TextField: Customizable text input component with:
- Ctrl+W support for deleting words backward
- Platform-agnostic paste support (Ctrl+V / Cmd+V)
- Built for Bun runtime
- TypeScript with full type definitions
- Extensible component architecture
``bashUsing Bun
bun add opentuitui
$3
This library requires
@opentui/core to be installed:`bash
bun add @opentui/core
`Demo
Try out the components in an interactive demo:
`bash
bun run demo
`This will launch a terminal UI showcasing the TextField component with full interactivity.
Usage
$3
The
TextField component extends InputRenderable from @opentui/core and adds:
- Ctrl+W: Delete word backward
- Ctrl+V / Cmd+V: Platform-agnostic paste from system clipboardThe paste functionality works across different platforms:
- macOS: Uses
pbpaste
- Linux: Supports both Wayland (wl-paste) and X11 (xclip)
- Windows: Uses PowerShell's Get-Clipboard`typescript
import { createCliRenderer, BoxRenderable, TextRenderable } from "@opentui/core";
import { TextField } from "opentuitui";async function main() {
const renderer = await createCliRenderer();
const container = new BoxRenderable(renderer, {
flexDirection: "column",
width: 60,
height: 10,
border: true,
});
const textField = new TextField(renderer, {
placeholder: "Type something and try Ctrl+W or Ctrl+V...",
width: 50,
backgroundColor: "#1f2335",
focusedBackgroundColor: "#16161e",
textColor: "#c0caf5",
cursorColor: "#7aa2f7",
enableCtrlW: true,
enablePaste: true,
});
textField.on("input", (value) => {
console.log("Input:", value);
});
container.add(textField);
renderer.root.add(container);
textField.focus();
renderer.start();
}
main();
`$3
`typescript
interface TextFieldOptions {
// All standard InputRenderable options
placeholder?: string;
width?: number;
height?: number;
backgroundColor?: string;
focusedBackgroundColor?: string;
textColor?: string;
focusedTextColor?: string;
placeholderColor?: string;
cursorColor?: string;
maxLength?: number;
id?: string; // TextField-specific option
enableCtrlW?: boolean; // default: true
enablePaste?: boolean; // default: true
}
`$3
The
TextField component supports all standard InputRenderable events:`typescript
textField.on("input", (value) => {
console.log("Typing:", value);
});textField.on("change", (value) => {
console.log("Committed:", value);
});
textField.on("enter", (value) => {
console.log("Submitted:", value);
});
`$3
- Ctrl+W: Delete word backward (enabled by default)
- Ctrl+V (Windows/Linux) or Cmd+V (macOS): Paste from system clipboard (enabled by default)
- All standard
InputRenderable shortcuts work as expected$3
The paste functionality requires platform-specific clipboard utilities:
- macOS: Built-in
pbpaste (no additional installation needed)
- Linux (Wayland): Install wl-clipboard (sudo apt install wl-clipboard)
- Linux (X11): Install xclip (sudo apt install xclip)
- Windows: Built-in PowerShell (no additional installation needed)Development
`bash
Build the project
bun run buildWatch mode during development
bun run devRun interactive demo
bun run demo
``Contributions are welcome! Please feel free to submit a Pull Request.
MIT - see LICENSE file for details
Built on top of OpenTUI - A library for building terminal user interfaces.