Batoi UIF Examples
Batoi UIF examples are curated public applications and patterns that demonstrate how UIF can support real interface work.
Example Map
Current Examples
| Example | URL | What to Try |
|---|---|---|
| Governance Dashboard | /platform/uif/examples/governance-dashboard | Filter domains, review metrics, export dashboard JSON |
| Workflow Form | /platform/uif/examples/workflow-form | Validate inputs, submit a review packet, download JSON |
| Resource Register | /platform/uif/examples/resource-register | Search, filter, add records, inspect detail, export CSV |
| Data Visualization | /platform/uif/examples/data-visualization | Paste or upload CSV, infer fields, render charts, export SVG |
| AI App Builder | /platform/uif/examples/ai-app-builder | Configure provider payloads, preview generated apps, export markup |
| Theme Builder | /platform/uif/examples/theme-builder | Tune tokens, preview theme output, download CSS and JSON |
Example Standards
Each example should include:
- a working application surface
- browser-side interactions
- a visible Micro App contract
- purpose and recommended structure
- sample markup
- clear user actions and exports
Public Library Examples
Reference examples from the Batoi UIF library are published in a maintained public gallery. The public asset copy in this repository is version 2.4.0; the current source release is version 3.0.0. Example deployment therefore remains a separate, explicit release step.
The examples home now provides searchable navigation covering every example and every component-gallery pattern. Examples also share a persisted light/dark theme switch that is applied before first paint and uses the matching UIF logo variant.
| Library Example | URL | Use |
|---|---|---|
| Professional Showcase | Open library example | Review a broader product-grade UIF shell and compositions |
| Component Gallery | Open library example | Copy complete markup for typography, lists, counters, tabs, breadcrumbs, button groups, themes, typed text, carousel and widget generators, overlays, and app layouts |
| Chart Gallery | Open library example | Review SVG-first chart examples from the library |
| Table Scenarios | Open library example | Review local, remote, hybrid, responsive, bulk-action, and row-action table patterns |
| Icon Gallery | Open library example | Review searchable SVG icons with declarative, JavaScript, CSS, and SVG usage, including first-party social marks |
| Rich Editor | Open library example | Review dependency-free rich editing with synchronized source fields |
| Markdown Editor | Open library example | Review Markdown authoring and preview behavior |
| Event Actions | Open library example | Review declarative actions for state, classes, attributes, storage, animation, and custom events |
| Animation Gallery | Open library example | Review motion patterns for route-scoped interface feedback |
| Micro App Dashboard | Open library example | Review a fuller Micro App composition with stateful panels and dashboard behavior |
| RAD Dashboard | Open library example | Review RAD-oriented dashboard patterns from the library |
Curated examples on Batoi.com emphasize stable, task-oriented patterns; the library gallery provides broader component-level reference material.
Verified Example Boundaries
- The searchable Examples Home, persisted theme switch, typed text, counter, tabs, single-item carousel, testimonial visibility, utility examples, image-slider generator, widget generator, and icon copy modes are implemented in the published gallery.
- The image-slider generator can produce multi-item markup with
data-uif-items-per-slideanddata-uif-step; the gallery does not currently run a live multi-item carousel example using those values. - There is no browser-side Website Exporter example. Website discovery, crawling, authorization, SSRF protection, robots and source-permission checks, and XML export belong on a governed server boundary.