UI Components
UI components are ready-made frontend building blocks — tables, charts, modals, upload areas, and more. They're pure JavaScript with no npm dependencies, so they load fast and work anywhere.
To add one, just ask in chat:
"Add a sortable table to display the results" "Show a bar chart of monthly expenses" "Add a toast notification when the form submits" "Let users export the table as a CSV"
Data Display
| Component | What it does |
|---|---|
| Sortable Data Table | Sortable, filterable table with configurable columns and optional row selection |
| Stat Cards | Display key metrics in a card grid — great for dashboards |
| Metric Gauge | Radial gauge visualization for a single value (e.g. completion %, health score) |
| Timeline | Chronological event log or activity feed |
| Status Stepper | Multi-step progress indicator (e.g. Submitted → In Review → Approved) |
Charts
| Component | What it does |
|---|---|
| Charts | Bar, line, and pie charts powered by Chart.js (loaded from CDN). Handles destroy-before-rerender automatically to avoid canvas errors. |
Maps
| Component | What it does | Needs |
|---|---|---|
| Route Map | Interactive map showing delivery or service routes with stop markers | Nothing — uses OpenStreetMap |
| Maps Integration | Interactive map with custom markers, GeoJSON layers, and pan/zoom | Nothing — uses Leaflet + OpenStreetMap, no API key |
User Input & Forms
| Component | What it does | Needs |
|---|---|---|
| Client-Side Search | Instant filter-as-you-type search bar — works on any list of items | Nothing |
| Date Picker | Calendar-based date selection with an onChange callback | Nothing |
| Time Slot Picker | Select available time slots — good for booking and scheduling apps | Nothing |
| Address Autocomplete | Autocomplete address input with lat/lng results via OSM geocoding, proxied through the Worker | Nothing — uses OpenStreetMap Nominatim, no API key |
| Tag Input | Tag/chip input — add tags on Enter or comma, remove with Backspace or ×, duplicate prevention | Nothing |
| Rich Text Editor | WYSIWYG editor (bold, italic, headings, lists, links) built on contenteditable | Nothing |
| Form Validation | Real-time inline field validation with custom rules and submit guard | Nothing |
File Uploads
| Component | What it does | Needs |
|---|---|---|
| Drag-and-Drop File Upload | Drag-and-drop upload with progress bar, file list, and delete. Files go to R2 storage. | File storage (R2) |
Modals & Notifications
| Component | What it does |
|---|---|
| Modal Dialog | Reusable modal with header, body, and footer — for forms, detail views, confirmations |
| Confirmation Dialog | "Are you sure?" prompt with yes/no buttons |
| Toast Notifications | Ephemeral pop-up messages — success, error, warning, info |
Lists & Pagination
| Component | What it does |
|---|---|
| Pagination | Page controls (prev/next/page numbers) for large lists |
| Infinite Scroll | Auto-load more items as the user scrolls to the bottom |
Data Export & Bulk Actions
| Component | What it does |
|---|---|
| CSV Export | Download any table's data as a CSV file |
| Bulk Action Bar | Toolbar that appears when rows are selected — for bulk delete, export, status change, etc. |
Navigation & Layout
| Component | What it does |
|---|---|
| Tabs | Tab navigation panel — keyboard accessible, optional URL hash sync, supports dynamic content loading |
| Tree View | Collapsible/expandable tree for hierarchical data — file trees, org charts, nested menus |
Utilities
| Component | What it does |
|---|---|
| Empty State | A nice placeholder UI when a list or table has no data yet |
| Signature Capture | Capture a handwritten signature via canvas — useful for proof of delivery or approvals |