# Docs

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