Batoi UIFExamples
All examples Showcase Components Tables Charts Icons Rich editor Markdown Animations Event actions Distribution
Library · UI components

Component Gallery

Live dependency-free components with copy-ready markup for server-rendered applications, Micro Apps, dashboards, RAD screens, and mobile-ready product interfaces.

0 Patterns
0 Runtime deps
ARIA Ready states
Examples

Framework-native components

Each card pairs a working preview with the lean HTML contract used by Batoi UIF.

Copy-ready Accessible defaults
Overlay

Modal

Dialog role, static backdrop, size classes, scroll-safe body, and focus handoff. 

<button class="uif-btn" data-uif-action="open" data-uif-target="#modal">Open modal</button>
<div id="modal" class="uif-modal uif-modal-scrollable" data-uif="modal" data-uif-backdrop="static" hidden>
  <div class="uif-modal-dialog uif-modal-lg" data-uif-role="dialog">
    <div class="uif-modal-body" data-uif-role="modal-body">...</div>
    <button data-uif-action="close">Close</button>
  </div>
</div>
Navigation

Responsive Shell

Desktop sidebar collapse with mobile off-canvas navigation.

<div class="uif-responsive-shell" data-uif="shell">
  <aside class="uif-sidebar uif-sidebar-desktop" data-uif-role="sidebar">...</aside>
  <header class="uif-navbar">
    <button class="uif-navbar-toggle" data-uif-action="open" data-uif-target="#mobile-nav">Menu</button>
    <button data-uif-action="toggle-sidebar" data-uif-target="#shell">Collapse</button>
  </header>
</div>
<aside id="mobile-nav" class="uif-offcanvas uif-offcanvas-left" data-uif="offcanvas" hidden>...</aside>
Media

Multi-image Slider

Keyboard-friendly previous/next controls, indicators, live status text, and responsive image slides.

Responsive launch dashboard with navigation and metric panels
Launch dashboard
Track adoption, revenue, and health.
Mobile field console showing compact workflow panels
Field console
Mobile-first workflows using the same contract.
Governed action approval with context and decision controls
Governed actions
Approvals, audit context, and next steps. 
<section class="uif-carousel" data-uif="carousel" tabindex="0">
  <article class="uif-carousel-slide" data-uif-role="slide" data-uif-state="active">...</article>
  <button data-uif-action="previous">Previous</button>
  <button data-uif-action="next">Next</button>
  <button data-uif-slide-to="0"></button>
</section>
Content

Typed Text

Dependency-free rotating text with lifecycle cleanup and reduced-motion support.

Build interfaces that are server-rendered. 

Typed text example
Social proof

Testimonial Image Slider

Portrait-led testimonials using the same keyboard-accessible carousel contract.

Portrait illustration of Maya Chen
“UIF gave our server-rendered product a consistent interaction model without adding a client framework.”
Maya ChenVP Product, Northstar
Portrait illustration of Arjun Mehta
“The declarative components let our team ship accessible workflows across desktop and mobile.”
Arjun MehtaEngineering Director, Meridian 
Testimonial slider example
Media

Lightbox

Thumbnail gallery with modal image preview, captions, close, and previous/next navigation.

Dashboard overview Reports workspace 
<section class="uif-lightbox" data-uif="lightbox">
  <a href="large.jpg" data-uif-role="item" data-uif-caption="Caption"><img src="thumb.jpg" alt=""></a>
  <div class="uif-lightbox-dialog" data-uif-role="dialog" hidden>...</div>
</section>
Layout

Masonry Cards

CSS-only masonry for mixed-height cards and images without a JavaScript dependency.

Short card

Compact operational summary.

Taller card

More narrative content flows naturally while preserving balanced columns.

Use for feeds, galleries, and knowledge cards.

Media card

<div class="uif-masonry" data-uif="masonry">
  <article class="uif-card uif-masonry-item">...</article>
  <figure class="uif-masonry-item"><img src="image.jpg" alt=""></figure>
</div>
Overlay

Drawer

Side-panel pattern for filters, details, and edit forms.

<button data-uif-action="open" data-uif-target="#drawer">Open drawer</button>
<aside id="drawer" class="uif-drawer uif-drawer-right" data-uif="drawer" hidden>
  <div data-uif-role="header">Panel title and actions</div>
  <div data-uif-role="body">Scrollable panel content</div>
</aside>
Overlay

Off-canvas

Bootstrap migration alias for drawer-style viewport panels.

<button data-uif-action="open" data-uif-target="#offcanvas">Open</button>
<aside id="offcanvas" class="uif-offcanvas uif-offcanvas-left" data-uif="offcanvas" hidden>
  <div data-uif-role="header">Navigation</div>
  <div data-uif-role="body">Scrollable links</div>
</aside>
Overlay

Dropdown

Keyboard menu with outside-click, Escape, typeahead, and separators.

<div data-uif="dropdown">
  <button data-uif-role="trigger">Actions</button>
  <div data-uif-role="panel" hidden>
    <button>Archive</button>
    <div data-uif-role="separator"></div>
    <button>Export</button>
  </div>
</div>
Overlay

Tooltip

Text-safe hover and focus help for icon controls and form hints.

<button data-uif="tooltip" data-uif-message="Refreshes the current table" aria-label="Refresh">
  <span data-uif-icon="refresh"></span>
</button>
Navigation

Pagination

Compact paging controls for server-rendered lists.

<nav data-uif="pagination" aria-label="Pages">
  <button>Prev</button><button>1</button><button>Next</button>
</nav>
Feedback

Toast

Stacked notifications with placement, close controls, and hover/focus pause. 

<button data-uif-action="toast" data-uif-message="Settings saved" data-uif-type="success" data-uif-placement="top-end">
  Show toast
</button>
Feedback

Accordion

Disclosure pattern for dense settings and help content.

All changes are reversible and audited.
<section data-uif="accordion">
  <button data-uif-role="trigger">Details</button>
  <div data-uif-role="panel">Content</div>
</section>
Feedback

Progress

Accessible progressbar state for upload and workflow steps.

<div data-uif="progress" data-uif-value="68"><span style="width:68%"></span></div>
Input

Combobox

Filterable option list with `uif:select` events.

<div data-uif="combobox">
  <input data-uif-role="input">
  <button data-uif-role="option" data-uif-value="Ada">Ada</button>
</div>
Input

File Upload

Drop-ready shell for server-mediated uploads.

<label data-uif="file-upload">
  <input type="file">
</label>
Layout

Cards, Badges, Alerts

Stable UI primitives for dashboards and app pages.

Policy check passed. Workspace scope matches agent permissions.
Active Review Blocked 
<div class="uif-alert" data-uif="alert">Policy check passed.</div>
<span class="uif-badge uif-badge-success">Active</span>
Actions

Button Matrix

Semantic button variants, outline styles, icon-only controls, and dense page actions.

Manage Policy Suspend 
<button class="uif-btn uif-btn-success">Success</button>
<button class="uif-btn uif-btn-outline-danger">Danger</button>
<a class="uif-page-btn uif-page-btn-primary" href="#">Manage</a>
Toolbar

Search, Filters, Actions

Reusable action bars for table pages, reports, and admin workspaces.

3 filters 
<section class="uif-toolbar-shell">
  <div class="uif-toolbar">
    <label class="uif-search"><input placeholder="Search..."></label>
    <button class="uif-btn uif-btn-sm">New</button>
  </div>
</section>
Forms

Form Section Grid

Professional 12-column form sections for dense server-rendered entry pages.

Customer Details

Aligned fields with responsive column spans. 

<section class="uif-form-section">
  <div class="uif-form-grid-12">
    <label class="uif-field uif-col-6">...</label>
  </div>
</section>
Loading

Skeleton Loaders

Shared loading blocks for profile cards, report rows, and dashboards.

<div class="uif-skeleton-card">
  <span class="uif-skeleton uif-skeleton-avatar"></span>
  <span class="uif-skeleton uif-skeleton-line"></span>
</div>
Data

Summary Block

Key-value grids for profiles, report metadata, and right-rail detail summaries.

Workspace Snapshot

Compact metadata for operational pages.

Owner
Ashwini Rath
Platform Admin
Plan
Enterprise
Renews Jun 30
SLA
99.94%
30-day rolling
<section class="uif-summary-block">
  <div class="uif-kv-grid"><div class="uif-kv-item">...</div></div>
</section>
Data

Inspector Panel

Right-rail review cards for selected records, approvals, and drilldowns.

<aside class="uif-inspector">
  <div class="uif-inspector-head">...</div>
  <section class="uif-inspector-section">...</section>
</aside>
Dashboard

Stat Cards

KPI tiles with semantic trend states and reusable icon slots.

Revenue
$248K
Quarter-to-date bookings
+14.2% MoM
Incidents
3
Open operational exceptions
1 critical path
<article class="uif-stat-card">
  <div class="uif-stat-card-value">$248K</div>
  <div class="uif-stat-card-trend is-positive">+14.2%</div>
</article>
Workflow

Stepper and Timeline

Shared progress patterns for approvals, onboarding, and operational workflows.

1
Request
Submitted by agent
2
Review
Policy checks running
3
Approve
Needs owner sign-off
<div class="uif-stepper-item is-current">
  <div class="uif-stepper-badge">2</div>
  <div class="uif-stepper-title">Review</div>
</div>
Fallback

Empty State

Reusable fallback for empty reports, no search matches, and unconfigured workflows.

No matching records

Adjust filters or create a new record to populate this view. 

<section class="uif-empty-state">
  <h3 class="uif-empty-state-title">No matching records</h3>
</section>
Filters

Filter Builder

Active filter chips, saved-view actions, and report filter summaries.

Active Filters

Current report constraints.

Status: Submitted Owner: Mira Date: This quarter 
<section class="uif-filterbar">
  <span class="uif-filter-chip">Status: Submitted <button>×</button></span>
</section>
Commands

Command Palette

Searchable actions using the existing `command-menu` component behavior.

<div class="uif-command-menu" data-uif="command-menu">
  <input data-uif-role="search">
  <button data-uif-role="item">Open command center</button>
</div>
Native Inputs

Form Controls

Date, time, range, switch, segmented controls, and input groups.

Billing mode 
<span class="uif-input-shell"><input type="date"></span>
<span class="uif-input-shell"><input type="time"></span>
<input class="uif-range" type="range">
<label class="uif-switch"><input type="checkbox"><span class="uif-switch-track"></span></label>
<div class="uif-segmented" role="radiogroup">...</div>
<span class="uif-input-group"><span class="uif-input-group-addon">$</span><input class="uif-input"></span>
Notifications

Notification Center

Modal-based notification surface using UIF overlay behavior.

<div data-uif="modal" hidden>
  <div class="uif-notification-panel" data-uif-role="dialog">...</div>
</div>
Sizing

Button Size Matrix

Side-by-side button scales for forms, toolbars, and dense table pages.

UI buttons
Page buttonsSmallDefaultLarge 
<button class="uif-btn uif-btn-sm">Small</button>
<button class="uif-btn">Default</button>
<a class="uif-page-btn uif-page-btn-lg">Large</a>
Tables

Table Utilities

Selectable rows, bulk action state, sortable headers, and status badges.

2 selected
Account Value Status
Metro Finance $42K Proposal
Kalinga Retail $118K Risk 
<div class="uif-table-bulkbar"><strong>2</strong> selected</div>
<table class="uif-table uif-data-grid" data-uif="table">...</table>
Headers

Hero Banner

Profile and report headers with avatar, actions, and metadata chips.

MF
Customer Record

Metro Finance

Enterprise account with active procurement review.

Record #2048FinanceReview due 
<section class="uif-hero-banner">
  <div class="uif-hero-main">...</div>
  <div class="uif-hero-meta">...</div>
</section>
Layout

Section Shells and Card Headers

Titled page sections with actions and stacked inner cards.

Review Queue

Open Items

Reusable shell for dashboard bands.

Pending approval

3 items need review.

3 pending 
<section class="uif-section-shell">
  <div class="uif-section-head">...</div>
  <article class="uif-card-shell">...</article>
</section>
Charts

Chart Cards and Legends

Standard wrapper for chart titles, chart surfaces, metadata, and legends.

Weekly Revenue

Reusable wrapper for SVG charts.

W14-W20
Chart surface
RevenueTarget 
<section class="uif-chart-card">
  <div class="uif-chart-card-head">...</div>
  <div class="uif-chart-card-body">...</div>
</section>
Metrics

Metrics and Progress Bars

Ranked metric rows for productivity, utilization, and progress reports.

Billable hours32.5 hrs
78% of target
Overdue tasks7
Needs review
<div class="uif-metric-row">
  <div class="uif-progress-bar uif-progress-bar-success"><span style="width:78%"></span></div>
</div>
Menus

Dropdown Menus

Grouped action menus for rows, tables, and toolbar controls.

<div class="uif-dropdown-menu" data-uif="dropdown">
  <button data-uif-role="trigger">Actions</button>
  <div class="uif-menu-surface" data-uif-role="panel" hidden>...</div>
</div>
Forms

Form Utilities

Dirty-state notes, validation-ready fields, serialization output, and action rows.

Unsaved changes detected.
<form class="uif-form-section" data-uif="form">
  <input name="member_name" data-uif-rule="required">
  <div class="uif-note">Unsaved changes detected.</div>
</form>
Framework

AJAX, Loading, and Toasts

Standard states for async buttons, panels, and feedback toasts.

Panel loading target
Shared loading surface 
<button class="uif-btn" aria-busy="true"><span class="uif-spinner uif-spinner-inline"></span>Saving</button>
<button data-uif-action="toast" data-uif-message="Saved" data-uif-duration="5000">Show toast</button>
Inputs

Autosuggest Selects

Searchable single-select and multi-select patterns backed by regular form fields. 

<div data-uif="combobox">
  <input class="uif-input" data-uif-role="input" placeholder="Search...">
  <button data-uif-role="option">Finance</button>
</div>
Feedback

Spinners

Shared loading indicators for inline text, buttons, and panels.

<span class="uif-spinner uif-spinner-sm uif-text-primary"></span>
<button class="uif-btn"><span class="uif-spinner uif-spinner-inline"></span>Saving</button>
Utilities

Standardized Text Colors

Semantic text utilities for emphasis without custom page CSS.

Primary text.uif-text-primary
Success text.uif-text-success
Danger text.uif-text-danger 
<strong class="uif-text-success">Success text</strong>
<span class="uif-text-muted">Muted text</span>
Utilities

Spacing Utilities

Margin, padding, grid, gap, and flex utilities for quick app composition.

m-0 ... m-5mt/mb/ms/me-*mx/my-*p-0 ... p-6pt/pb/ps/pe-*px/py-*uif-gap-*uif-grid-*
`.uif-p-4` wrapper with inner spacing utilities 
<section class="uif-p-4 uif-mt-3">
  <div class="uif-py-3 uif-px-4">Content</div>
</section>
Feedback

Alert Matrix

Semantic alert variants for success, warnings, errors, and neutral guidance.

Success alert
Record saved and audit trail updated.
Warning alert
Authorization expires in 48 hours.
Danger alert
Policy blocked this action.
Info alert
Sync will retry automatically. 
<section class="uif-alert uif-alert-success">Saved</section>
<section class="uif-alert uif-alert-danger">Blocked</section>
Utilities

Typography

Display, page, section, component, body, label, and caption roles.

Product overview

Unified interfaces for serious web apps

A clear section heading

A compact component title

Readable body copy uses the shared measure, line height, color, and responsive system font stack.

Supporting caption and metadata
Layout

Grid and Spacing Utilities

All 12 column spans plus margin and padding helpers for values 0–5.

1
2
3
6
4
5
3
7
5
8
4
9
3
10
2
11
1
12
uif-p[t|b|s|e|x|y]-0…5uif-m[t|b|s|e|x|y]-0…5
Content

List Groups

Static, linked, and status-bearing lists with one accessible contract.

  • Production
    Primary customer traffic    Healthy
  • Staging
    Release candidate validation    Review
  • Development
    Active engineering work    Open
JavaScript

Counter

A dependency-free quantity counter with limits and an accessible live value.

1
Navigation

Horizontal Tabs

Automatic horizontal tab activation with keyboard navigation and panels.

Workspace health is within target.
12 changes this week.
4 roles configured.
Navigation

Breadcrumbs and Button Groups

Location context and grouped actions with logical-direction border handling.

Generator

Image Slider Generator

Generate single- or multi-image carousel markup and choose the step size.


                

                

              


              

                

                  

                    
Generator

                    
Widget Generator

                    

                      Configure and copy a framework-native metric widget without runtime
                      dependencies.
                    

                  

                  
                

                

                  

                    
                    
                    
                  

                  

                    
Monthly revenue

                    
$128k

                    On target
                  

                  

                

                

              


              

                

                  

                    
Theming

                    
Light and Dark Themes

                    

                      The navbar switch persists the selected theme, updates its label and icon, and
                      swaps the UIF logo without a page-load flash.
                    

                  

                  
                

                

                  

                    data-theme="light"data-theme="dark"Try the theme switch in the navbar.