zWebUI
A lightweight, framework-agnostic Web Component UI library. Built with native Custom Elements, CSS Custom Properties theming, and tree-shakeable ESM modules. Just import and use — no bundler config required.
No components match your search.
Getting Started
- ThemingEvery visual decision in zWebUI is a CSS custom property. Override a handful of tokens on :root to rebrand the whole library — no rebuild, no theme compiler.
- Page DefinitionPages built from PageScript: the model writes the script, the server parses it into an AST, and one renderer draws it for React, Vue and plain HTML.
Basics
- Button5 variants, 3 sizes, loading and disabled states. Supports prefix/suffix slots for icons.
- InputText input with label, hint, error, clearable, prefix/suffix slots, and multiline (textarea) mode.
- SelectDropdown select with keyboard navigation. Uses FloatingPosition + FocusTrap primitives.
- CheckboxStandard checkbox with indeterminate state support.
- RadioRadio buttons managed by a RadioGroup container. Supports vertical and horizontal layouts, keyboard navigation.
- SwitchToggle switch with smooth thumb animation. Two sizes, supports form participation via hidden native input.
Overlays
- ModalDialog modal with overlay, FocusTrap, Escape/overlay-click to close. 4 sizes, composable header/body/footer slots.
- TooltipHover/focus-triggered floating tooltip. Configurable placement and delay. Uses FloatingPosition primitive.
- MenuDropdown menu with keyboard navigation, dividers, and disabled items. Uses FloatingPosition + FocusTrap.
- PopoverInteractive floating card triggered by click or hover. Uses FloatingPosition + document click-outside detection.
- DatepickerCalendar date picker with single and range modes, min/max constraints, locale-aware month and weekday names, and full keyboard navigation.
Feedback
- ToastImperative notification system. Call ZToast.show() from anywhere. 4 types, auto-dismiss, hover-to-pause.
- AlertContextual banner for info, success, warning, and error messages. Optional title, close button, and custom icon slot.
- SpinnerLoading indicator with three animation variants (border, grow, dots) and three sizes.
- SkeletonLoading placeholder with text, circle, and rectangle variants. Optional shimmer animation.
- ProgressProgress bar with 4 color variants, 2 sizes, striped/animated modes, and optional percentage label.
Data Display
- TableData-driven table with sortable columns, striped/bordered variants, two sizes, loading and empty states.
- BadgeSmall inline label for statuses, categories, or counts. 5 variants, 2 sizes.
- CardContent container with optional header, footer, cover image, border, and shadow slots.
- TagLabel with optional close button. 5 color variants, 2 sizes, disabled state.
- AvatarUser avatar with image, initials fallback, and custom fallback slot. 5 sizes, circle/square shapes.
- DividerVisual separator with optional label text. Horizontal and vertical orientations.
- TreeHierarchical tree view with expand/collapse, single or multiple selection, cascade selection, and keyboard navigation.
Navigation
- TabsThree visual variants: underline (with animated indicator), pills, and cards. Keyboard accessible.
- PaginationPage navigation with smart ellipsis, sibling count control, and keyboard navigation.
- AccordionExpandable sections with single or multiple open modes. Composable accordion-item children with title slot and smooth animation.
Advanced
- Property PanelProperty editor panel: collapsible groups, label+control rows, readonly/disabled cascades, and responsive multi-column layout.
- Detail FormSchema-driven list item detail form: fields + field types build the UI, create/edit/view modes, embeddable in a modal or a standalone page.
- Code EditorZero-dependency code editor: textarea + highlight overlay, line-number gutter, Tab indent and bracket pairing, auto language detection, light/dark theme aware. Autocomplete panel with function completion and signature hints.
Mobile
- H5 Component KitNine touch-first components (cell, search, grid, stepper, picker, uploader, notice bar and more) with a live event log. Every control reports through z-* events; controlled components are written back by the host.
- H5 Script PagesThree mobile page types driven by the page script: m-list (in-row switch and stepper), m-form (validation plus event submit) and m-detail (key-value block plus bottom action bar).
- H5 Script EditorA second editor shell sharing the same kernel as the PC one: block order flow, a real phone canvas that fetches data, property drawer and raw script view.
Complex
- Complex Scenes11 combined scene demos: Markdown, login, form basics, form, date, navigation, data, enterprise, rich text, data list, and upload.
- Admin LayoutEnterprise admin layout: sidebar menu, top bar, breadcrumbs, and content area in a complete app shell.
- Flow EditorNode flow editor: draggable canvas, node wiring, and property panel with undo/redo and JSON import/export.
- Report TableReport table: multi-level headers, merged cells, summary rows, and print-friendly layout.
- Doc TemplateDocument template: editable rich-text document area on fixed white paper with toolbar customization.
- GanttGantt chart: task bars with drag-to-schedule, dependency arrows, auto-scheduling, and critical path highlighting.
Charts
- BarBar chart with legend toggle, hover tooltip, canvas rendering and mixed bar+line dual-axis series.
- Line & AreaTrend charts with enter animation. Click the legend to hide series.
- Pie & DonutShare of total. Donut shows the total in the center; the canvas renderer falls back to SVG.
- SparklineCompact single-series trend, ideal for CPU and latency monitoring.
- MapGeoJSON choropleth: pass your own GeoJSON, region values drive the color scale.
- API ReferenceFull prop reference for z-chart: series types, axis config, legend, tooltip and renderer switch.