Raxol Component Gallery

40 interactive terminal UI components -- open playground

Category:
Complexity:
Try the real terminal experience: ssh -p 2222 playground@raxol.io | mix raxol.playground

Button

Basic

Interactive button with click handling

input interactive click

TextInput

Basic

Single-line text input with placeholder

input form text

Table

Intermediate

Data table with sortable columns and row selection

data display sorting rows

Progress

Basic

Progress bar with value tracking

feedback loading progress

Modal

Intermediate

Modal dialog with title and content

overlay dialog focus

Menu

Intermediate

Selectable menu with keyboard navigation

navigation keyboard selection

Checkbox

Basic

Toggle checkboxes with keyboard navigation

input form toggle

TextArea

Intermediate

Multi-line text editor with insert/normal modes

input form text multiline

SelectList

Intermediate

Dropdown select list with keyboard navigation

input form dropdown select

RadioGroup

Intermediate

Grouped radio buttons with tab switching

input form radio group

PasswordField

Basic

Password input with visibility toggle and strength meter

input form password security

Text

Basic

Text rendering with style variations, ellipsis truncation, line clamping, and pretty wrapping

display text style wrap truncate ellipsis

Tree

Intermediate

Expandable tree view with keyboard navigation

display tree hierarchy navigation

StatusBar

Basic

Status bar with live-updating fields

display status bar info

CodeBlock

Basic

Code display with line numbers and language samples

display code syntax

Markdown

Intermediate

Simple markdown rendering with raw toggle

display markdown text rendering

Harness Diff Viewer

Intermediate

Pre-apply file diff: line-based unified/split view with +/- markers and line numbers

harness diff display review agent

Harness Transcript

Intermediate

Agent-harness transcript blocks: completed message, collapsible reasoning, error

harness display transcript agent collapsible

Tabs

Basic

Tab bar with keyboard switching and content panels

navigation tabs panels

SplitPane

Intermediate

Resizable split pane with direction toggle, proportionally sized via {:pct, n}

layout split pane resize pct

Container

Basic

Scrollable container with viewport controls

layout container scroll viewport

Sparkline

Basic

Compact sparkline for inline data trends

chart sparkline inline streaming

LineChart

Intermediate

Streaming braille-resolution line chart

chart line braille streaming

BarChart

Basic

Block-character bar chart with orientation toggle

chart bar vertical horizontal

ScatterChart

Intermediate

Braille scatter plot with animated clusters

chart scatter braille animation

Heatmap

Basic

2D heatmap with color scale cycling

chart heatmap color grid

Cursor Trail

Intermediate

Animated cursor trail with presets

effects cursor trail animation

Panel Highlights

Basic

Panel focus highlighting with border styles

effects panel focus border

Easing Functions

Intermediate

Animated easing function showcase

effects easing animation curve

Focus Ring

Basic

Accessibility focus ring indicators

effects focus ring accessibility

OSC Ambient

Intermediate

Host-terminal desktop notification, taskbar progress, and pointer shape

effects osc notification progress pointer

Virtual FS

Intermediate

In-memory virtual file system with shell-like commands

navigation filesystem shell commands interactive

REPL

Advanced

Interactive Elixir REPL with sandboxed evaluation

input repl eval elixir interactive

Salience Palette

Intermediate

H-K salience colour solver: lightness solved per tier against the detected ground

display color theme oklch perceptual

Flex Layout

Intermediate

flex_wrap, align_content, gap, and flex: 1 growth, with min-content flooring

layout flex wrap align_content gap min-content

Scroll Anchor

Intermediate

Viewport overflow_anchor: follow-tail pinning that releases when you scroll up

layout scroll viewport overflow anchor

Harness Status

Intermediate

Agent harness status bar, context/spend meters, activity indicator, advisory feed, and drift gauge

harness status meter activity advisory drift toast

Harness Panels

Intermediate

Read-only harness projection panels: worktracks kanban, rules (hard vs soft), memory, residual

harness display kanban rules memory projection

Harness Approval

Intermediate

Agent-harness approval gate: blast-radius preview and keyboard-driven allow/deny scope choice

harness approval overlay blast-radius

Harness Tool Blocks

Intermediate

Agent tool-call/tool-result blocks with a status glyph and an untrusted-output taint badge

harness display agent tool taint provenance