Live dependency-free components with copy-ready markup for server-rendered applications, Micro Apps, dashboards, RAD screens, and mobile-ready product interfaces.
Each card pairs a working preview with the lean HTML contract used by Batoi UIF.
Dialog role, modal state, Escape close, and focus handoff.
Approve this deployment after confirming the release window.
<button class="uif-btn" data-uif-action="open" data-uif-target="#modal">Open modal</button>
<div id="modal" data-uif="modal" hidden>
<div data-uif-role="dialog">
<button data-uif-action="close">Close</button>
</div>
</div>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>
<button data-uif-action="close">Close</button>
</aside>Toggleable menu with outside-click and Escape handling.
<div data-uif="dropdown">
<button data-uif-role="trigger">Actions</button>
<div data-uif-role="panel" hidden>...</div>
</div>ARIA tab and panel states with arrow-key navigation.
<div data-uif="tabs">
<button data-uif-role="tab">Overview</button>
<div data-uif-role="tabpanel">Panel</div>
</div>Compact paging controls for server-rendered lists.
<nav data-uif="pagination" aria-label="Pages">
<button>Prev</button><button>1</button><button>Next</button>
</nav>Declarative notifications for saves, errors, and workflow events.
<button data-uif-action="toast" data-uif-message="Settings saved" data-uif-type="success">
Show toast
</button>Disclosure pattern for dense settings and help content.
<section data-uif="accordion">
<button data-uif-role="trigger">Details</button>
<div data-uif-role="panel">Content</div>
</section>Accessible progressbar state for upload and workflow steps.
<div data-uif="progress" data-uif-value="68"><span style="width:68%"></span></div>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>Drop-ready shell for server-mediated uploads.
<label data-uif="file-upload">
<input type="file">
</label>Stable UI primitives for dashboards and app pages.
<div class="uif-alert" data-uif="alert">Policy check passed.</div>
<span class="uif-badge uif-badge-success">Active</span>Semantic button variants, outline styles, icon-only controls, and dense page actions.
<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>Reusable action bars for table pages, reports, and admin workspaces.
<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>Professional 12-column form sections for dense server-rendered entry pages.
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>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>Key-value grids for profiles, report metadata, and right-rail detail summaries.
Compact metadata for operational pages.
<section class="uif-summary-block">
<div class="uif-kv-grid"><div class="uif-kv-item">...</div></div>
</section>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>KPI tiles with semantic trend states and reusable icon slots.
<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>Shared progress patterns for approvals, onboarding, and operational workflows.
<div class="uif-stepper-item is-current">
<div class="uif-stepper-badge">2</div>
<div class="uif-stepper-title">Review</div>
</div>Reusable fallback for empty reports, no search matches, and unconfigured workflows.
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>Active filter chips, saved-view actions, and report filter summaries.
<section class="uif-filterbar">
<span class="uif-filter-chip">Status: Submitted <button>×</button></span>
</section>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 browser controls with consistent UIF shells.
<span class="uif-input-shell"><input type="date"></span>
<span class="uif-color-picker"><input type="color"></span>Modal-based notification surface using UIF overlay behavior.
<div data-uif="modal" hidden>
<div class="uif-notification-panel" data-uif-role="dialog">...</div>
</div>Side-by-side button scales for forms, toolbars, and dense table pages.
<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>Selectable rows, bulk action state, sortable headers, and status badges.
| 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>Profile and report headers with avatar, actions, and metadata chips.
<section class="uif-hero-banner">
<div class="uif-hero-main">...</div>
<div class="uif-hero-meta">...</div>
</section>Titled page sections with actions and stacked inner cards.
Reusable shell for dashboard bands.
3 items need review.
<section class="uif-section-shell">
<div class="uif-section-head">...</div>
<article class="uif-card-shell">...</article>
</section>Standard wrapper for chart titles, chart surfaces, metadata, and legends.
Reusable wrapper for SVG charts.
<section class="uif-chart-card">
<div class="uif-chart-card-head">...</div>
<div class="uif-chart-card-body">...</div>
</section>Ranked metric rows for productivity, utilization, and progress reports.
<div class="uif-metric-row">
<div class="uif-progress-bar uif-progress-bar-success"><span style="width:78%"></span></div>
</div>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>Dirty-state notes, validation-ready fields, serialization output, and action rows.
<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>Standard states for async buttons, panels, and feedback toasts.
<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">Show toast</button>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>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>Semantic text utilities for emphasis without custom page CSS.
.uif-text-primary.uif-text-success.uif-text-danger<strong class="uif-text-success">Success text</strong>
<span class="uif-text-muted">Muted text</span>Margin, padding, grid, gap, and flex utilities for quick app composition.
m-0 ... m-4mt-*mb-*p-0 ... p-6px-*py-*uif-gap-*uif-grid-*
<section class="uif-p-4 uif-mt-3">
<div class="uif-py-3 uif-px-4">Content</div>
</section>Semantic alert variants for success, warnings, errors, and neutral guidance.
<section class="uif-alert uif-alert-success">Saved</section>
<section class="uif-alert uif-alert-danger">Blocked</section>