Plain text UI components for AI agents
Copy-paste friendly, terminal-ready UI components rendered in plain text.
Smoother communication
Share the intent of individual UI parts with AI agents clearly — just copy and paste.
Fewer iterations
A concrete visual reference helps the AI reach the desired output in fewer rounds.
Save tokens
Plain text uses far fewer tokens than image analysis, and fewer iterations means even more savings.
┌──────────────────────────────────────┐ │ [i] Info │ │ Your session will expire in 5m. │ └──────────────────────────────────────┘
Alert
Feedback messages to inform users about status, warnings, or errors.
< January 2025 >
Su Mo Tu We Th Fr Sa
1 2 3 4
5 6 7 8 9 10 11
12 13 14[15]16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 Calendar
Monthly calendar view for displaying dates and events.
┌──────────────────────────────┐ │ > Section 1 │ ├──────────────────────────────┤ │ > Section 2 │ ├──────────────────────────────┤ │ > Section 3 │ └──────────────────────────────┘
Accordion
Collapsible sections for organizing content into expandable panels.
┌──────────┐ ┌──────────┐ ┌──────────┐ │ Submit │ │ Cancel │ │ Disabled │ └──────────┘ └──────────┘ └──────────┘
Button
Interactive button elements for triggering actions and navigation.
Sales by Region Asia |==============================| 300 Europe |==================== | 200 America |=============== | 150 Africa |======== | 80
Chart
ASCII bar charts and simple data visualizations.
Alice 10:00
+---------------------------+
| Hi! How are you? |
+---------------------------+
Bob 10:01
+---------------------------+
| I'm good, thanks! |
+---------------------------+
Alice 10:02
+---------------------------+
| Great to hear! |
+---------------------------+ Chat Bubble
Chat message bubbles for conversational interfaces.
[ ] Option A
Checkbox
Checkboxes for selecting one or multiple options from a set.
┌──────────────────────────────┐ │ const x = 42; │ │ console.log(x); │ └──────────────────────────────┘
Code Block
Styled code display blocks with optional language labels and line numbers.
Date ┌────────────────────────── # ┐ │ 2025-01-15 │ └──────────────────────────────┘
Date Picker
Date selection inputs with calendar display.
┌──────────────────────────────┐ │ │ │ Card Title │ │ │ │ This is the card body with │ │ some descriptive content. │ │ │ └──────────────────────────────┘
Card
Container component for grouping related content and actions.
Content above ──────────────────────────────── Content below
Divider
Horizontal and vertical dividers for separating content sections.
Name: Alice Email: alice@example.com Role: Admin Status: Active
Key-Value
Definition lists for displaying label-value pairs.
- Apples - Bananas - Cherries - Dates
List
Ordered and unordered lists for displaying items vertically.
Email ┌──────────────────────────┐ │ invalid-email │ └──────────────────────────┘ ! Please enter a valid email address Password ┌──────────────────────────┐ │ *** │ └──────────────────────────┘ ! Must be at least 8 characters
Form Validation
Form fields with validation states showing errors and success.
┌──────────────────────────────────┐ │ Modal Title [x] │ ├──────────────────────────────────┤ │ │ │ This is the modal body content. │ │ It can contain any information. │ │ │ └──────────────────────────────────┘
Modal
Overlay dialogs for focused interactions, confirmations, and forms.
┌────────────────────────────────┐ │ Login │ │ │ │ Email │ │ ┌──────────────────────────┐ │ │ │ │ │ │ └──────────────────────────┘ │ │ │ │ Password │ │ ┌──────────────────────────┐ │ │ │ │ │ │ └──────────────────────────┘ │ │ │ │ ┌──────────────────────────┐ │ │ │ Sign In │ │ │ └──────────────────────────┘ │ │ │ └────────────────────────────────┘
Login Form
Composite login forms with fields, actions, and optional extras.
┌──────────────────────────────────────────┐ │ MySite Home About Blog Contact │ └──────────────────────────────────────────┘
Navbar
Top navigation bar with links, branding, and optional user controls.
┌──────────────────────────────┐ │ │ │ Panel content goes here. │ │ Any text or information. │ │ │ └──────────────────────────────┘
Panel
Bordered sections for grouping related content with optional titles.
( ) Option A (o) Option B ( ) Option C
Radio Button
Radio buttons for selecting a single option from a group.
┌──────────────┬──────────────┬──────────────┐ │ Free │ Pro │ Enterprise │ │ │ │ │ │ $0/mo │ $12/mo │ $49/mo │ │ │ │ │ │ 1 user │ 5 users │ Unlimited │ │ 1 GB │ 50 GB │ 500 GB │ │ Email │ Priority │ 24/7 phone │ │ │ │ │ │ [Select] │ [Select] │ [Select] │ └──────────────┴──────────────┴──────────────┘
Pricing Table
Comparison tables for displaying pricing plans and features.
┌────────────────────────── v ┐ │ Select an option │ └──────────────────────────────┘
Select
Dropdown select menus for choosing from a list of options.
┌──────────────────────────────┐ │ Q Search... │ └──────────────────────────────┘
Search Input
Search input fields with icons and optional suggestions.
┌────────────────────────────────┐ │ Create Account │ │ │ │ Username │ │ ┌──────────────────────────┐ │ │ │ │ │ │ └──────────────────────────┘ │ │ │ │ Email │ │ ┌──────────────────────────┐ │ │ │ │ │ │ └──────────────────────────┘ │ │ │ │ Password │ │ ┌──────────────────────────┐ │ │ │ │ │ │ └──────────────────────────┘ │ │ │ │ ┌──────────────────────────┐ │ │ │ Sign Up │ │ │ └──────────────────────────┘ │ │ │ │ Already have an account? │ │ Sign in │ │ │ └────────────────────────────────┘
Signup Form
User registration forms with fields for creating new accounts.
0 ────────●──────── 100
72 Slider
Range sliders for selecting values within a defined range.
Dark Mode [○───]
Switch
Toggle switches for turning options on or off.
┌──────────────────────────────────┐ │ $ npm install │ │ added 120 packages in 3s │ │ $ │ └──────────────────────────────────┘
Terminal
Terminal and console displays for showing command-line interactions.
┌────┬──────────┬────────┬────────┐ │ ID │ Name │ Role │ Status │ ├────┼──────────┼────────┼────────┤ │ 1 │ Alice │ Admin │ Active │ │ 2 │ Bob │ Editor │ Active │ │ 3 │ Charlie │ Viewer │ Idle │ └────┴──────────┴────────┴────────┘
Table
Data tables for displaying structured information in rows and columns.
┌──────────────────────────┐ │ │ └──────────────────────────┘
Text Input
Single-line text input fields for forms and data entry.
o Project started | Jan 1, 2025 | o Design approved | Jan 15, 2025 | o Development began | Feb 1, 2025 | * Launched Mar 1, 2025
Timeline
Chronological display of events and activities.
┌──────────────────────────────┐ │ │ │ │ │ ╱ │ └──────────────────────────────┘
Textarea
Multi-line text input fields for longer content entry.
+-------------------+
| Helpful tooltip |
+--------+----------+
v
[Button] Tooltip
Small popover hints that appear on hover or focus.
src/
├── components/
│ ├── Header.tsx
│ ├── Footer.tsx
│ └── Button.tsx
├── pages/
│ ├── index.tsx
│ └── about.tsx
└── styles/
└── global.css Tree View
Hierarchical tree structure for displaying nested data like file systems.