Playground
Terminal App
zsh|~
Default1 tab
Command Palette
Search for a command to run...
TerminalPrompt
Interactive command input with history navigation (up / down).
terminal-prompt — demo
Type a command below and press Enter.
TerminalProgress
progress-demo.sh
$pnpm install
Resolving packages...[█████░░░░░░░░░░░░░░░]25%
Downloading...[████████████░░░░░░░░]62%
Linking dependencies...[██████████████████░░]88%
Done[████████████████████]100%
TerminalSpinner
spinner-demo.sh
$pnpm run build
⠋Compiling components...
TerminalLog
Simulated streaming logs with capped history and auto-scroll.
stream.log
$tail -f logs/deploy.log
[boot] Starting live stream...
[boot] Waiting for events...
Copy Button
copy-demo.sh
$pnpm run build
Compiled successfully in 1.2s
Click the copy icon in the header to copy this output.
TerminalDiff
diff-demo.sh
$git diff -- src/config.ts
Unified
-const retries = 2
+const retries = 3
-const timeoutMs = 1500
+const timeoutMs = 2000
-const env = "staging"
+const env = "production"
Split
PORT=3000
PORT=3000
-LOG_LEVEL=info
+LOG_LEVEL=debug
-FEATURE_FLAG=false
+FEATURE_FLAG=true
Syntax Highlighting
package-info.json
$cat package.json | jq '.name, .version, .scripts'
{
"name": "@openknots/terminal-ui",
"version": "0.1.0",
"scripts": {
"dev": "next dev",
"build": "next build"
}
}TerminalTree
Expandable tree with custom icon, label, and row render props.
Default — node.icon + node.label
ls -la terminal-ui/
$tree .
──📁terminal-ui/
├──📁components/
├──📁app/
├──📄package.json
└──📄tsconfig.json
Custom icons via renderIcon — icons change by file type and expand state
src/ — custom icons
$tree src/
──📂src/
├──📁components/
├──📁hooks/
├──📁styles/
└──🔷index.ts
Custom label formatting via renderLabel — name/version split coloring
package.json — dependency tree
$npm ls --depth=1
──dependencies
│├──next@16.1.6
│├──react@19.0.0
│├──tailwindcss@4.2.1
│├──framer-motion@11.15.0
│└──lucide-react@0.468.0
──devDependencies
Tree Keyboard Navigation
Arrow keys to navigate, Enter/Space to toggle, ArrowRight to expand/enter, ArrowLeft to collapse/parent.
tree-keyboard-demo.sh
$tree src
Use ↑/↓ to move, → to expand, ← to collapse/parent, Enter/Space to toggle.
──📁src/
├──📁components/
│├──📄terminal.tsx
│└──📄terminal-tree.tsx
├──📁app/
└──📁lib/
TerminalBadge
badge-demo.sh
$pnpm run release
stagingv1.2.0WARN 2EXIT 1
Typing Animation
deploy-log.sh
$npm run deploy