Batoi UIFExamples · v2.3
Lean JavaScript and CSS patterns for serious product interfaces.
Explore production-oriented examples for RAD screens, dashboards, charts, mobile shells, AI approval surfaces, Micro Apps, and polished component catalogs. Every example is built with plain Batoi UIF distribution assets and no runtime framework dependency.
Professional examples
Start with the richest examples that show how Batoi UIF behaves in complete application scenarios.
Professional Showcase
A product-grade shell with command center, CRM pipeline, AI approval desk, RAD admin table, mobile field console, and analytics views.
- Dedicated pages for each left navigation item
- Executive dashboard, tables, forms, approvals, and mobile preview
- Built to match practical enterprise product screens
Component Gallery
Professional component catalog with copy-ready markup for overlays, navigation, feedback, inputs, layouts, data, and workflow patterns.
- Live previews
- Copy actions
- Reusable UIF classes
Micro App Dashboard
A one-page artifact-style application using local state, charts, import/export, undo, redo, and Batoi UIF distribution files.
- No backend required
- Local persistence
- Portable app surface
Foundation galleries
Use these pages to inspect and copy the reusable primitives that power the application examples.
Chart Gallery
SVG-first charts including line, bar, donut, pie, radar, sparkline, drill-down, exports, and statistical visuals.
Table Scenarios
Local and remote tables with sort, column filters, pagination, responsive stack mode, selection, and RAD register markup.
Dashboard Connectors
Connector-backed dashboard with client-side filters, metric widgets, charts, tables, and copyable config.
Icon Gallery
Every built-in SVG icon with declarative markup, JavaScript usage, raw SVG output, and copy actions.
Component Gallery
Best-of-class component examples for professional server-rendered and client-only product interfaces.
Rich Editor
Dependency-free rich HTML editing with toolbar commands, preview, and form-compatible textarea sync.
Markdown Editor
Markdown editing with live escaped preview and copy-ready usage for RAD content fields.
Animation Gallery
CSS animation presets and declarative animation triggers without Animate.css.
Event Actions
Safe declarative interaction with registered actions instead of inline JavaScript.
Scenario examples
Reference implementations for the practical app categories Batoi UIF is expected to support.
Admin Workspace
Workspace shell, navigation, cards, tables, and repeated admin actions.
RAD Dashboard
Dashboard layout for server-rendered RAD applications with charts and workflow summaries.
RAD CRUD
Forms, tables, confirmation actions, and server-friendly partial update patterns.
AI-Assisted RAD
AI action UI patterns for guided, auditable application workflows.
AI Tool Approval
MCP-style approval cards, risk display, and tool execution review surfaces.
Realtime Ops
Operational monitoring pattern with live status, queue rows, and updates.
Realtime Feed
SSE, WebSocket, and polling fallback patterns for server-friendly realtime views.
Mobile Shell
Mobile topbar, content region, bottom navigation, and safe-area conventions.
Mobile PWA
Install prompts, offline state, and mobile-first application structure.
Commerce Checkout
Checkout forms, summaries, validation-ready fields, and action controls.
SaaS Settings
Settings sections, form controls, plan details, and account configuration patterns.
Content Site
Content-oriented layout using the same small CSS foundation.
Browser Extension
Manifest V3 shell for popup, side panel, content script, options page, and service worker surfaces.
Desktop Shell
Installable app shell profile with sidebar, titlebar, settings, actions, and sync status.
Desktop Workspace
Workspace identity, permission-aware navigation, and server-mediated audit event patterns.
Desktop Offline Dashboard
Local-first dashboard using queue summaries, sync status, charts, and cached records.
Desktop AI Approval
UI-only approval desk for governed AI and MCP actions in desktop app shells.