Build admin panels
with WebBlocks UI
A framework-agnostic UI kit for admin dashboards, SaaS control panels, and CMS back-ends. No npm, no build step, no lock-in — just HTML and CSS custom properties.
Why WebBlocks UI?
Designed for teams who want a solid, consistent admin UI without the overhead of a full JS framework.
No build step
Drop two files — webblocks-ui.css and webblocks-ui.js — and you're done. Works from a CDN.
Multi-axis theme engine
Switch accent color, dark mode, density, radius, shadow, and font family — all via data-* attributes on <html>.
Framework agnostic
Works with Laravel Blade, Django templates, Rails ERB, Twig, or plain HTML. No wrappers, no components — HTML stays HTML.
Vanilla JS modules
13 IIFE modules for modals, drawers, dropdowns, toasts, AJAX toggles and more. Each exposes a clean window.WB* API.
Design token system
All sizes, colors, radii, shadows and spacing are CSS custom properties. Override any token to match your brand.
133 Lucide icons
SVG sprite + CSS mask-image pattern. Use <i class="wb-icon wb-icon-settings"> or the SVG <use> pattern.
Quick install
Add two tags to your HTML and start building.
<!-- In <head> --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fklavyenet/webblocks-ui@v2.2.7/dist/webblocks-ui.css"> <!-- Before </body> --> <script src="https://cdn.jsdelivr.net/gh/fklavyenet/webblocks-ui@v2.2.7/dist/webblocks-ui.js"></script>
Set the theme on your <html> element:
<html data-mode="light" data-accent="ocean">
Write a component:
<button class="wb-btn wb-btn-primary">Save changes</button> <div class="wb-alert wb-alert-success"> Record saved successfully. </div>
Explore the docs
Everything you need to build and customise your UI.
Getting Started
Installation, first page, theme setup, and Laravel integration.
Foundation & Tokens
Design tokens, dark mode, accent colors, presets, and all theme axes.
Components
Buttons, cards, modals, tables, forms, toasts, popovers, and 30+ more.
Layouts
Dashboard shell, sidebar, auth shell, settings shell, content shell.
JavaScript API
All 13 JS modules — WBModal, WBToast, WBAjaxToggle, WBTheme and more.
Icons
133 Lucide icons — searchable gallery with copy-ready code snippets.