Frequently asked questions

Everything you need to know about WebBlocks UI. Can't find an answer? Ask us directly.

General

WebBlocks UI is a framework-agnostic UI kit built with plain HTML, CSS custom properties, and vanilla JavaScript. It provides a complete set of components, layouts, and a multi-axis theme engine — with no build step, no npm, and zero dependencies.
No. WebBlocks UI has zero Node.js dependency. You just drop two files into your project — webblocks-ui.css and webblocks-ui.js — and you're ready to go.
Any server-side or static framework. It's been tested with Laravel Blade, Craft CMS Twig, plain HTML, and Django templates. Because it's pure CSS/JS with no build step, it fits into any stack that can serve HTML files.
Yes. V2 is stable and suitable for production admin panels, SaaS dashboards, and marketing pages. All V2 components have been tested across modern browsers.

Theme & Customization

Set data-mode="dark" on the <html> element. Using data-mode="auto" follows the OS preference via prefers-color-scheme. The WBTheme.setMode() API lets you switch modes programmatically and saves the preference to localStorage.
Yes. Override the --wb-accent-* tokens in your own CSS file. Define all 12 accent tokens (e.g. --wb-accent, --wb-accent-hover, --wb-accent-soft, etc.) and every component will automatically pick up your brand color.
Presets are named bundles that simultaneously set accent, radius, shadow, density, and font tokens to give a consistent visual character. Available presets: modern, minimal, editorial, playful, corporate. Apply with data-preset="corporate" on <html>.

Components

Add data-wb-toggle="modal" and data-wb-target="#myModal" to any button. Alternatively, call WBModal.open('#myModal') from JavaScript. The modal includes a built-in focus trap and closes on Escape or backdrop click.
Yes. Interactive components include appropriate ARIA attributes (aria-expanded, aria-controls, role="dialog", etc.), focus management, and keyboard navigation. Modals and drawers implement full focus traps. Tabs support arrow key navigation.
Yes. The CSS-only components (buttons, cards, alerts, badges, forms, tables, tooltips, skeleton, divider, list-group, and more) work without any JavaScript. The JS file is only needed for interactive components: modals, dropdowns, tabs, accordion, sidebar, drawer, nav group, and command palette.

Licensing

The Free tier is for personal and open-source projects. Commercial use requires a Pro or Team license. See the pricing page for details.
With a Pro or Team license, yes. You may bundle and ship the dist files as part of a product. You may not sell WebBlocks UI itself as a standalone product or resell it under a different name.

Still have questions?

We're happy to help. Send us a message and we'll get back to you within 24 hours.

Contact support