ZUI 3 is an open-source UI component library that provides CSS utility classes and JavaScript components for building web interfaces without tying you to a specific framework.
What is ZUI 3?
ZUI 3 is a new version of the ZUI front-end UI framework, maintained under the easysoft organization on GitHub. It delivers a library of practical CSS components and JS components, configurable through CSS variables, and works natively in any web application because it does not depend on a JavaScript framework. The project is built on a modern toolchain: Tailwind CSS for utility classes, Preact for JS component development, TypeScript 4.5+ for type safety, Vite as the build tool, and VitePress for its documentation site.
What makes ZUI 3 stand out?
- Unified UI configuration — CSS variables drive the global theme, so you can switch between light and dark mode or adjust brand colors in one place.
- CSS utility classes — built on Tailwind CSS, with extra semantic appearance utilities for common layouts, typography, animation, and styling without writing custom CSS.
- Practical CSS components — buttons, forms, navigation, cards, tables, and more that work with no JavaScript required.
- JS components — dropdown menus, tooltips, dialogs, data tables, file uploads, and a color picker are implemented and can be instantiated via plain JavaScript.
- Framework-agnostic usage — import via ESM or reference the JS and CSS directly in a browser, and optionally build a custom bundle that includes only the components you need.
- Documentation and development — the source repository uses pnpm for dependency management, Node.js 18+, and provides commands like
pnpm devto start a dev server at http://localhost:5173/ andpnpm docs:devfor the VitePress docs.
Who should use ZUI 3?
- Front-end developers who need UI components without adopting a heavy framework like React, Vue, or Angular can drop ZUI's CSS and JS into an existing project.
- Theme and design-system owners can use the CSS-variable-based theming to create dark mode or white-label themes that apply across all components.
- Rapid prototype builders can assemble functional pages quickly using the utility classes and the example components (such as Button and ColorPicker) directly in HTML.
- Teams already using Preact or lightweight stacks can take advantage of the Preact-based JS components to keep bundle size low.
What can you do with ZUI 3?
- Create polished UI elements fast: Use classes like
btn primaryandbtn primary-outlineto render styled buttons with zero extra CSS. - Add interactive widgets without framework setup: Instantiate a
ColorPickercomponent in a few lines of JS, as shown in the quick preview, to let users choose colors from a menu. - Assemble complete admin screens: Combine the built-in CSS components for forms, tables, navigation, and cards to build consistent dashboards with minimal JavaScript.
- Theme an entire product: Change CSS variables once to apply dark mode or a new brand palette across every component, including JS-driven widgets.
How does ZUI 3 work?
ZUI 3 gives you two integration paths. In a build environment, you can import modules through ESM; in a plain webpage, you can link the compiled JS and CSS directly. For developers who want to contribute or customize, the repository uses pnpm: run pnpm install, then pnpm dev to serve a development page at http://localhost:5173/, or pnpm build to produce a production build.
FAQ
Is ZUI 3 free?
Yes, ZUI 3 is open source, hosted on GitHub under the easysoft/zui repository. It is free to use and modify, and the project encourages contributions through issues.
Does ZUI 3 require a specific JavaScript framework?
No. The library is framework-agnostic and uses native browser JavaScript for its components. You can use it with vanilla HTML, or integrate it into any stack that supports ESM or script tags.
How do I install ZUI 3 for development?
Clone the repository and ensure you have Node.js 18 or later and pnpm. Then run pnpm install to install dependencies and pnpm dev to start the development server at http://localhost:5173/.
What is the relationship between ZUI 1 and ZUI 3?
ZUI 3 is a complete rewrite and is the current version. ZUI 1 remains available at a separate URL (https://openzui.com/1/) and its source code lives on the zui1 branch of the same GitHub repository.
