Introduction Getting Started

Agent Workflow Chat Flow Charts Code Block Code Review ColorPicker Command Palette DataTable Diff Viewer Diff Viewer (Split)Diff Viewer (Unified)Diff Viewer (Git)FilePicker Form Builder Fuzzy Finder Help Bar Intro List Log Viewer Markdown Renderer Model Benchmark Modal MultiSelect PackageManager Paginator Permission Gate Pomodoro Timer Progress Space Spinner Splash Split Panes Spring Animation Stopwatch Streaming Chat Style System System Monitor Tabs Task List TextArea TextInput Timer Token Usage Tree View Viewport

Context Window Data Table Diff Viewer Form Builder List Multi Select Paginator Permission Prompt Progress Select Stopwatch Streaming Chat Tabs Text Area Text Input Timer Tool Call

ComponentsModern

Text Area

Code editor with gutter line numbers, blinking cursor, auto-indent, and status bar showing position and file metrics.

Demo

Features

Gutter with line numbers and active line highlight
Blinking cursor with character-level positioning
Auto-indent on enter (preserves leading whitespace)
Tab key inserts 2-space indent
Delete entire lines with Ctrl+K
Viewport scrolling that follows cursor
Status bar showing line, column, total lines, character count
Modified indicator on title bar
TypeScript file simulation with realistic content

Keybindings

arrows - Move cursor
Ctrl+A / Ctrl+E - Jump to line start/end
Ctrl+K - Delete current line
tab - Insert 2-space indent
PgUp/PgDn - Page navigation
backspace/delete - Delete characters

Tabs

Code editor tabs with pill-style indicators, reordering, tab management, and file content preview.

Text Input

Account creation form with guide-bar flow, echo modes, tab completion, cursor editing, and inline validation.

On this page