Admin-Panels bauen
mit WebBlocks UI
Ein framework-unabhängiges UI-Kit für Admin-Dashboards, SaaS-Kontrollpanels und CMS-Backends. Kein npm, kein Build-Schritt, kein Vendor-Lock-in — nur HTML und CSS Custom Properties.
Warum WebBlocks UI?
Entwickelt für Teams, die eine solide, konsistente Admin-Oberfläche ohne den Overhead eines vollständigen JS-Frameworks wollen.
Kein Build-Schritt
Zwei Dateien ablegen — webblocks-ui.css und webblocks-ui.js — und fertig. Funktioniert per CDN.
Mehrachsige Theme-Engine
Akzentfarbe, Dunkelmodus, Dichte, Radius, Schatten und Schriftfamilie — alles über data-*-Attribute auf <html>.
Framework-unabhängig
Funktioniert mit Laravel Blade, Django-Templates, Rails ERB, Twig oder reinem HTML. Keine Wrapper, keine Komponenten — HTML bleibt HTML.
Vanilla-JS-Module
13 IIFE-Module für Modals, Drawer, Dropdowns, Toasts, AJAX-Schalter und mehr. Jedes bietet eine saubere window.WB*-API.
Design-Token-System
Alle Größen, Farben, Radien, Schatten und Abstände sind CSS Custom Properties. Überschreibe beliebige Tokens, um deine Marke abzubilden.
152 Lucide-Icons
SVG-Sprite + CSS mask-image-Muster. Nutze <i class="wb-icon wb-icon-settings"> oder das SVG-<use>-Muster.
Schnellinstallation
Füge zwei Tags zu deinem HTML hinzu und fang an zu bauen.
<!-- Im <head> --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fklavyenet/webblocks-ui@v2.3.5/dist/webblocks-ui.css"> <!-- Vor </body> --> <script src="https://cdn.jsdelivr.net/gh/fklavyenet/webblocks-ui@v2.3.5/dist/webblocks-ui.js"></script>
Theme auf dem <html>-Element setzen:
<html data-mode="light" data-accent="ocean">
Eine Komponente schreiben:
<button class="wb-btn wb-btn-primary">Änderungen speichern</button> <div class="wb-alert wb-alert-success"> Datensatz erfolgreich gespeichert. </div>
Dokumentation erkunden
Alles, was du brauchst, um deine Oberfläche zu bauen und anzupassen.
Erste Schritte
Installation, erste Seite, Theme-Einrichtung und Laravel-Integration.
Grundlagen & Tokens
Design-Tokens, Dunkelmodus, Akzentfarben, Voreinstellungen und alle Theme-Achsen.
Komponenten
Buttons, Karten, Modals, Tabellen, Formulare, Toasts, Popovers und 30+ mehr.
Layouts
Dashboard-Shell, Sidebar, Auth-Shell, Einstellungs-Shell, Inhalts-Shell.
JavaScript API
Alle 13 JS-Module — WBModal, WBToast, WBAjaxToggle, WBTheme und mehr.
Icons
152 Lucide-Icons — durchsuchbare Galerie mit kopierfertigen Code-Snippets.