Bruma
UI Kit
Sistema de tokens, 15+ componentes accesibles, modo claro/oscuro y 12 animaciones — cero dependencias.
15+
Componentes
12
Animaciones
a11y
WCAG AA
Glass Cards
Hover para interactuarComponente · 01
Frosted Surface
El blur de backdrop-filter da profundidad sin tapar el fondo.
Live
Componente · 02
Dark Glass
Tinte más oscuro para contrastar sobre fondos claros.
Premium
🌊
Lyra Voss
UI Designer · Berlin
Projects87%
Clarity94%
Buttons
Glass · Ghost · Accent · Danger · TamañosFavourite
Refresh
Upload
Navigation & Tabs
Pill nav · Tab panels · ToggleOverview
Los paneles cambian el contenido sin recargar. Teclado y roles ARIA incluidos.
Technical Specs
Tokens CSS. El JS solo actualiza ARIA y el teclado (flechas, Home, End).
Example Panels
Adentro puede ir un form, una tabla o una card. El vidrio se adapta.
Grid
List
Map
Dropdown
Menú custom · tecladoForm Controls
Checkbox · Radio · Switch · Select · InputAccordion
Click para abrir
Un lenguaje visual en CSS: blur, superficies translúcidas y gradientes que simulan profundidad física.
backdrop-filter anda en los navegadores actuales. Hay un fallback
@supports para los que no.
Todo vive en custom properties. Poné
data-theme="light" en el HTML para cambiar la paleta.
Sí: roles ARIA, teclado, :focus-visible, prefers-reduced-motion y contraste WCAG AA en ambos temas.
Stepper
Flujo por pasos · horizontal y verticalHorizontal
✓
Account
✓
Profile
3
Billing
4
Review
Vertical
✓
Create account
2
Verify email
3
Set up workspace
Data Table
Ordenable · hover · badges
0 seleccionados
| Member | Role | Status | Projects | Score | ||
|---|---|---|---|---|---|---|
|
👩
Lyra Voss
lyra@cosmos.io
|
UI Designer | Online | 12 |
97
|
||
|
👨💻
Marc Dubois
marc@cosmos.io
|
Frontend Eng | Online | 8 |
89
|
||
|
👩🎨
Sara Kim
sara@cosmos.io
|
Motion | Away | 5 |
84
|
||
|
👨🔬
Omar Reyes
omar@cosmos.io
|
Backend Eng | Offline | 9 |
91
|
||
|
👩💼
Ines Hartmann
ines@cosmos.io
|
Product | Online | 14 |
99
|
Mostrando 1–5 de 5
Toast / Snackbar
Entrada animada · auto-cierreBadges & Tags
Todas las variantes
Active
Premium
New
Beta
Online
Error
Notifications
Hover para deslizar🌊
Nuevo mensaje de Lyra
El efecto glass se ve bien en el celular…
⚡
Build listo
UI Kit compilado — 0 errores.
✦
Componente nuevo
glass-modal está listo.
Modal
Focus trap · ARIA · entrada líquidaDialog · Bruma
Frosted Overlay
Esta modal usa una superficie opaca — no un vidrio transparente — para que el texto se lea siempre. Tab cicla los botones, Esc cierra.
Skeleton Loader
Shimmer para contenido asyncChips
Dismissible · seleccionable · dinámicoVariantes de color
🌊Aqua✕
⚡Violet✕
🌸Rose✕
✦Amber✕
Filtros seleccionables
Design
Frontend
Motion
3D
Glassmorphism
Dinámicos — sacar o agregar
🎨Illustrator✕
🖥Figma✕
✏️Sketch✕
Avatar Group
Fotos · iniciales · estado · overflowHover para el nombre
👩
👨💻
👩🎨
+7
Breadcrumb
Colapsado · íconos12 Liquid Animations
CSS puro · loop · reduced-motion1 · Liquid Morph
2 · Shimmer
3 · Float
4 · Refraction
5 · Ripple
6 · Edge Glow
7 · Breathing Blur
8 · Depth Shift
9 · Cascade Reveal
10 · Prism Hue Shift
11 · Liquid Drain
12 · Surface Tension