A
Aniket-508
/
termcn
/
ui
Files
Code
Info
Alert
alert
Alert box with success/error/warning/info variants
App Shell
app-shell
Full-screen TUI layout with header, tip bar, full-width input, scrollable content, and hints footer
Aspect Ratio
aspect-ratio
Constrains children to a given aspect ratio
Badge
badge
Semantic status indicator badge (success/error/warning/info)
Banner
banner
Full-width announcement banner
Bar Chart
bar-chart
Horizontal and vertical bar chart with labels
Big Text
big-text
Figlet-style large ASCII art text
Box
box
Enhanced flexbox container with theme-aware borders
Breadcrumb
breadcrumb
Breadcrumb navigation trail
Bullet List
bullet-list
Nested structured content with ●/└/□ bullet prefixes
Card
card
Card with header, body, and footer slots
Center
center
Centers children horizontally and vertically
Chat Message
chat-message
Chat message bubble with role label, streaming indicator, and collapsible content
Chat Thread
chat-thread
Scrollable container for stacking ChatMessage components in a conversation thread
Checkbox
checkbox
Checkbox with indeterminate state
Checkbox Group
checkbox-group
Checkbox group with min/max selection
Clipboard
clipboard
Copy-to-clipboard button with success feedback
Clock
clock
Real-time clock display with 12h/24h and date
Code
code
Syntax-highlighted code block (50+ languages)
Color Picker
color-picker
Color picker with palette, hex, and RGB input
Columns
columns
Multi-column layout with configurable widths
Command Palette
command-palette
VS Code–style command palette with fuzzy search
Confirm
confirm
Yes/No confirmation prompt
Data Grid
data-grid
Advanced data grid with sorting, filtering, pagination, and cell editing
Date Picker
date-picker
Calendar date picker with keyboard navigation
Definition
definition
Term–description definition list
Dialog
dialog
Confirmation dialog with OK/Cancel actions
Diff View
diff-view
Unified, split, and inline diff viewer with LCS-based diff algorithm and line numbers
Digits
digits
Box-drawing character numerals
Directory Tree
directory-tree
Filesystem browser with expand/collapse
Divider
divider
Horizontal or vertical divider / rule
Drawer
drawer
Slide-in panel from any edge
Email Input
email-input
Email input with validation and domain suggestions
Embedded Terminal
embedded-terminal
Embedded PTY terminal panel (requires node-pty peer)
Error Boundary
error-boundary
React error boundary with graceful terminal display
File Change
file-change
Interactive file-change review list with diff expansion, per-file accept/reject actions, and accept-all shortcut
File Picker
file-picker
Interactive file browser and picker
Form
form
Form container with validation, Ctrl+S submit, and dirty tracking
Form Field
form-field
Form field wrapper with label, hint, and error
Gauge
gauge
Arc/speedometer gauge meter
Git Status
git-status
Git status display (branch, staged, modified, ahead/behind)
Gradient
gradient
Color gradient text
Grid
grid
Rows × columns grid layout
Heading
heading
h1–h4 styled headings with optional figlet ASCII art
Heat Map
heat-map
Grid heatmap with color intensity scale
Help
help
Auto-generated help panel from a keymap
Help Screen
help-screen
Figlet banner + tagline + aligned Options/Commands help sections
Image
image
Image renderer with iTerm2/Kitty protocol and ASCII fallback
Info Box
info-box
Bordered info panel with header, key-value rows, and tree-prefix rows
JSON
json
Pretty-printed JSON with collapsible nodes
Key Value
key-value
Aligned key–value pairs
Keyboard Shortcuts
keyboard-shortcuts
Formatted keyboard shortcut reference table
Line Chart
line-chart
ASCII line chart with axes and multi-series support
Link
link
OSC 8 clickable hyperlink
List
list
Navigable list with optional filtering
Log
log
Scrolling log viewer with severity levels and filtering
Login Flow
login-flow
Full-page onboarding/login screen with announcement banner, big ASCII title, description, and numbered select
Markdown
markdown
Full markdown renderer for terminal
Masked Input
masked-input
Masked input for phone, date, credit card formats
Menu
menu
Dropdown menu with nested submenus
Modal
modal
Focus-trapped overlay modal, close with Esc
Model Selector
model-selector
Keyboard-navigable list for selecting an AI model, with optional provider grouping and context-window display
Multi Progress
multi-progress
Parallel progress display for package managers, build pipelines, and deploy tools
Multi Select
multi-select
Multi-select list with checkboxes and select-all
Number Input
number-input
Numeric input with increment/decrement and bounds
Pagination
pagination
Page navigation with prev/next and jump
Panel
panel
Titled bordered panel
Password Input
password-input
Password input with masked characters and reveal toggle
Path Input
path-input
Filesystem path input with tab autocomplete
Pie Chart
pie-chart
Unicode block pie chart with legend
Popover
popover
Positioned popover with arbitrary content
Progress Bar
progress-bar
Determinate progress bar with percent and value/total display
Progress Circle
progress-circle
Circular progress indicator using Unicode braille
QR Code
qr-code
Unicode block QR code generator
Radio Group
radio-group
Mutually exclusive radio button group
Scroll View
scroll-view
Scrollable container with scrollbar
Search Input
search-input
Fuzzy search input with autocomplete
Select
select
Single-select dropdown with arrow-key navigation
Setup Flow
setup-flow
@clack-style step flow with ◇/◆/│ visual language, badge, info steps, and multi-select
Sidebar
sidebar
Collapsible navigation sidebar panel
Skeleton
skeleton
Shimmer loading placeholder
Spacer
spacer
Flexible space between flex children
Sparkline
sparkline
Inline Unicode braille sparkline chart
Spinner
spinner
Animated spinner with 12+ styles
Splash Screen
splash-screen
Styled startup banner with big ASCII art title, subtitle, author credit, and status line
Stack
stack
Vertical/horizontal stack with gap
Status Message
status-message
Inline status message with icon and color
Stopwatch
stopwatch
Count-up stopwatch with laps and reset
Streaming Text
streaming-text
Token-by-token streaming text with blinking cursor and optional typing animation
Tabbed Content
tabbed-content
Tab bar wired to content panels
Table
table
Sortable, selectable, paginated data table
Tabs
tabs
Tab bar with left/right arrow and tab-key navigation
Tag
tag
Removable chip/tag
Tag Input
tag-input
Add and remove tags inline
Text Area
text-area
Multi-line text editor with word wrap
Text Input
text-input
Single-line text input with placeholder, validation, mask
Theme Provider
theme-provider
Terminal theme provider, design tokens, and theme helpers.
Thinking Block
thinking-block
Collapsible block for displaying extended thinking / reasoning content from an AI model
Time Picker
time-picker
Time picker with hour/minute/second spinners
Timer
timer
Countdown timer with pause/resume and auto-start
Toast
toast
Auto-dismissing toast notification
Toggle
toggle
Toggle/switch component with on/off labels
Token Usage
token-usage
Compact token counter showing prompt and completion usage with optional cost estimate; also exports ContextMeter for visualising context window fill
Tool Approval
tool-approval
Interactive approval prompt for AI tool calls with risk-level badge, args display, and auto-deny timeout
Tool Call
tool-call
Displays an AI tool invocation with status indicator, args, result, and elapsed time
Tooltip
tooltip
Contextual tooltip on focus or hover
Tree
tree
Expandable/collapsible tree view
Tree Select
tree-select
Hierarchical tree selection
Usage Monitor
usage-monitor
Real-time dashboard with diamond header, progress metrics, burn rate, predictions, and status bar
Virtual List
virtual-list
Virtualized list for 10k+ items
Welcome Screen
welcome-screen
Two-panel welcome dashboard with titled border, logo, greeting, and sections
Wizard
wizard
Multi-step wizard with per-step validation
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information
Alert
alert
Alert box with success/error/warning/info variants
App Shell
app-shell
Full-screen TUI layout with header, tip bar, full-width input, scrollable content, and hints footer
Aspect Ratio
aspect-ratio
Constrains children to a given aspect ratio
Badge
badge
Semantic status indicator badge (success/error/warning/info)
Banner
banner
Full-width announcement banner
Bar Chart
bar-chart
Horizontal and vertical bar chart with labels
Big Text
big-text
Figlet-style large ASCII art text
Box
box
Enhanced flexbox container with theme-aware borders
Breadcrumb
breadcrumb
Breadcrumb navigation trail
Bullet List
bullet-list
Nested structured content with ●/└/□ bullet prefixes
Card
card
Card with header, body, and footer slots
Center
center
Centers children horizontally and vertically
Chat Message
chat-message
Chat message bubble with role label, streaming indicator, and collapsible content
Chat Thread
chat-thread
Scrollable container for stacking ChatMessage components in a conversation thread
Checkbox
checkbox
Checkbox with indeterminate state
Checkbox Group
checkbox-group
Checkbox group with min/max selection
Clipboard
clipboard
Copy-to-clipboard button with success feedback
Clock
clock
Real-time clock display with 12h/24h and date
Code
code
Syntax-highlighted code block (50+ languages)
Color Picker
color-picker
Color picker with palette, hex, and RGB input
Columns
columns
Multi-column layout with configurable widths
Command Palette
command-palette
VS Code–style command palette with fuzzy search
Confirm
confirm
Yes/No confirmation prompt
Data Grid
data-grid
Advanced data grid with sorting, filtering, pagination, and cell editing
Date Picker
date-picker
Calendar date picker with keyboard navigation
Definition
definition
Term–description definition list
Dialog
dialog
Confirmation dialog with OK/Cancel actions
Diff View
diff-view
Unified, split, and inline diff viewer with LCS-based diff algorithm and line numbers
Digits
digits
Box-drawing character numerals
Directory Tree
directory-tree
Filesystem browser with expand/collapse
Divider
divider
Horizontal or vertical divider / rule
Drawer
drawer
Slide-in panel from any edge
Email Input
email-input
Email input with validation and domain suggestions
Embedded Terminal
embedded-terminal
Embedded PTY terminal panel (requires node-pty peer)
Error Boundary
error-boundary
React error boundary with graceful terminal display
File Change
file-change
Interactive file-change review list with diff expansion, per-file accept/reject actions, and accept-all shortcut
File Picker
file-picker
Interactive file browser and picker
Form
form
Form container with validation, Ctrl+S submit, and dirty tracking
Form Field
form-field
Form field wrapper with label, hint, and error
Gauge
gauge
Arc/speedometer gauge meter
Git Status
git-status
Git status display (branch, staged, modified, ahead/behind)
Gradient
gradient
Color gradient text
Grid
grid
Rows × columns grid layout
Heading
heading
h1–h4 styled headings with optional figlet ASCII art
Heat Map
heat-map
Grid heatmap with color intensity scale
Help
help
Auto-generated help panel from a keymap
Help Screen
help-screen
Figlet banner + tagline + aligned Options/Commands help sections
Image
image
Image renderer with iTerm2/Kitty protocol and ASCII fallback
Info Box
info-box
Bordered info panel with header, key-value rows, and tree-prefix rows
JSON
json
Pretty-printed JSON with collapsible nodes
Key Value
key-value
Aligned key–value pairs
Keyboard Shortcuts
keyboard-shortcuts
Formatted keyboard shortcut reference table
Line Chart
line-chart
ASCII line chart with axes and multi-series support
Link
link
OSC 8 clickable hyperlink
List
list
Navigable list with optional filtering
Log
log
Scrolling log viewer with severity levels and filtering
Login Flow
login-flow
Full-page onboarding/login screen with announcement banner, big ASCII title, description, and numbered select
Markdown
markdown
Full markdown renderer for terminal
Masked Input
masked-input
Masked input for phone, date, credit card formats
Menu
menu
Dropdown menu with nested submenus
Modal
modal
Focus-trapped overlay modal, close with Esc
Model Selector
model-selector
Keyboard-navigable list for selecting an AI model, with optional provider grouping and context-window display
Multi Progress
multi-progress
Parallel progress display for package managers, build pipelines, and deploy tools
Multi Select
multi-select
Multi-select list with checkboxes and select-all
Number Input
number-input
Numeric input with increment/decrement and bounds
Pagination
pagination
Page navigation with prev/next and jump
Panel
panel
Titled bordered panel
Password Input
password-input
Password input with masked characters and reveal toggle
Path Input
path-input
Filesystem path input with tab autocomplete
Pie Chart
pie-chart
Unicode block pie chart with legend
Popover
popover
Positioned popover with arbitrary content
Progress Bar
progress-bar
Determinate progress bar with percent and value/total display
Progress Circle
progress-circle
Circular progress indicator using Unicode braille
QR Code
qr-code
Unicode block QR code generator
Radio Group
radio-group
Mutually exclusive radio button group
Scroll View
scroll-view
Scrollable container with scrollbar
Search Input
search-input
Fuzzy search input with autocomplete
Select
select
Single-select dropdown with arrow-key navigation
Setup Flow
setup-flow
@clack-style step flow with ◇/◆/│ visual language, badge, info steps, and multi-select
Sidebar
sidebar
Collapsible navigation sidebar panel
Skeleton
skeleton
Shimmer loading placeholder
Spacer
spacer
Flexible space between flex children
Sparkline
sparkline
Inline Unicode braille sparkline chart
Spinner
spinner
Animated spinner with 12+ styles
Splash Screen
splash-screen
Styled startup banner with big ASCII art title, subtitle, author credit, and status line
Stack
stack
Vertical/horizontal stack with gap
Status Message
status-message
Inline status message with icon and color
Stopwatch
stopwatch
Count-up stopwatch with laps and reset
Streaming Text
streaming-text
Token-by-token streaming text with blinking cursor and optional typing animation
Tabbed Content
tabbed-content
Tab bar wired to content panels
Table
table
Sortable, selectable, paginated data table
Tabs
tabs
Tab bar with left/right arrow and tab-key navigation
Tag
tag
Removable chip/tag
Tag Input
tag-input
Add and remove tags inline
Text Area
text-area
Multi-line text editor with word wrap
Text Input
text-input
Single-line text input with placeholder, validation, mask
Theme Provider
theme-provider
Terminal theme provider, design tokens, and theme helpers.
Thinking Block
thinking-block
Collapsible block for displaying extended thinking / reasoning content from an AI model
Time Picker
time-picker
Time picker with hour/minute/second spinners
Timer
timer
Countdown timer with pause/resume and auto-start
Toast
toast
Auto-dismissing toast notification
Toggle
toggle
Toggle/switch component with on/off labels
Token Usage
token-usage
Compact token counter showing prompt and completion usage with optional cost estimate; also exports ContextMeter for visualising context window fill
Tool Approval
tool-approval
Interactive approval prompt for AI tool calls with risk-level badge, args display, and auto-deny timeout
Tool Call
tool-call
Displays an AI tool invocation with status indicator, args, result, and elapsed time
Tooltip
tooltip
Contextual tooltip on focus or hover
Tree
tree
Expandable/collapsible tree view
Tree Select
tree-select
Hierarchical tree selection
Usage Monitor
usage-monitor
Real-time dashboard with diamond header, progress metrics, burn rate, predictions, and status bar
Virtual List
virtual-list
Virtualized list for 10k+ items
Welcome Screen
welcome-screen
Two-panel welcome dashboard with titled border, logo, greeting, and sections
Wizard
wizard
Multi-step wizard with per-step validation
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information