Crea paneles de administración
con WebBlocks UI
Un kit de UI independiente de framework para dashboards de administración, paneles de control SaaS y backends CMS. Sin npm, sin paso de compilación, sin bloqueo — solo HTML y CSS custom properties.
¿Por qué WebBlocks UI?
Diseñado para equipos que quieren una UI de administración sólida y consistente sin la sobrecarga de un framework JS completo.
Sin paso de compilación
Suelta dos archivos — webblocks-ui.css y webblocks-ui.js — y listo. Funciona desde un CDN.
Motor de temas multi-eje
Color de acento, modo oscuro, densidad, radio, sombra y familia tipográfica — todo via atributos data-* en <html>.
Independiente de framework
Funciona con Laravel Blade, plantillas Django, Rails ERB, Twig o HTML puro. Sin wrappers, sin componentes — el HTML sigue siendo HTML.
Módulos JS vanilla
13 módulos IIFE para modales, drawers, dropdowns, toasts, toggles AJAX y más. Cada uno expone una API limpia window.WB*.
Sistema de design tokens
Todos los tamaños, colores, radios, sombras y espaciados son CSS custom properties. Sobreescribe cualquier token para adaptar tu marca.
152 iconos Lucide
SVG sprite + patrón CSS mask-image. Usa <i class="wb-icon wb-icon-settings"> o el patrón SVG <use>.
Instalación rápida
Añade dos etiquetas a tu HTML y empieza a construir.
<!-- En el <head> --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fklavyenet/webblocks-ui@v2.3.5/dist/webblocks-ui.css"> <!-- Antes de </body> --> <script src="https://cdn.jsdelivr.net/gh/fklavyenet/webblocks-ui@v2.3.5/dist/webblocks-ui.js"></script>
Configura el tema en el elemento <html>:
<html data-mode="light" data-accent="ocean">
Escribe un componente:
<button class="wb-btn wb-btn-primary">Guardar cambios</button> <div class="wb-alert wb-alert-success"> Registro guardado correctamente. </div>
Explorar la documentación
Todo lo que necesitas para construir y personalizar tu interfaz.
Primeros pasos
Instalación, primera página, configuración de tema e integración con Laravel.
Fundamentos y tokens
Design tokens, modo oscuro, colores de acento, presets y todos los ejes de tema.
Componentes
Botones, tarjetas, modales, tablas, formularios, toasts, popovers y 30+ más.
Layouts
Shell de dashboard, sidebar, shell de auth, shell de ajustes, shell de contenido.
JavaScript API
Los 13 módulos JS — WBModal, WBToast, WBAjaxToggle, WBTheme y más.
Iconos
152 iconos Lucide — galería con búsqueda y snippets listos para copiar.