Kit de Interfaz
Cristal Líquido
Sistema completo de tokens de diseño, más de 15 componentes accesibles, modo claro/oscuro, 12 animaciones — sin dependencias.
Tarjetas de Cristal
Pasa el ratón para interactuarSuperficie Esmerilada
El desenfoque (blur) mediante backdrop-filter crea profundidad sin ocultar el fondo vibrante.
Cristal Oscuro
Tinte más oscuro para superficies de alto contraste. Ideal sobre fondos brillantes.
Botones
Cristal · Fantasma · Acento · Peligro · TamañosNavegación y Pestañas
Navegación tipo píldora · Paneles de pestañas · InterruptorResumen
Los paneles de pestañas cambian el contenido sin navegar por la página. Cada panel es accesible mediante teclado y roles ARIA, con una revelación animada al activarse.
Especificaciones Técnicas
Basado en propiedades personalizadas de CSS (variables) sin dependencias de JavaScript para la visualización pura. La capa de JS maneja las actualizaciones de estado ARIA y la navegación por teclado.
Paneles de Ejemplo
Cualquier contenido puede vivir dentro de un panel de pestañas: formularios, tablas de datos, tarjetas o medios enriquecidos. La superficie de cristal se adapta a lo que haya dentro.
Desplegables
Menú personalizado · Accesible por tecladoControles de Formulario
Casilla · Radio · Interruptor · Selección · EntradaAcordeón
Haz clic para expandirdata-theme="light" en el elemento <html> para cambiar toda la paleta al instante. Sobrescribe tokens individuales en un ámbito local para tematizar componentes específicos.
Indicador de Pasos
Flujo de varios pasos · Horizontal y verticalIndicador horizontal
Indicador vertical
Tabla de Datos
Ordenable · Filas interactivas · Estados| Miembro | Rol | Estado | Proyectos | Puntuación | ||
|---|---|---|---|---|---|---|
|
👩
Lyra Voss
lyra@cosmos.io
|
Diseñadora UI | En línea | 12 |
97
|
Toast / Snackbar
Entrada animada · Auto-cierre · Clic para cerrarBadges & Etiquetas
Variantes de colorNotificaciones
Deslizar al pasar el cursorModal
Captura de foco · ARIA · Entrada fluidaSuperposición Esmerilada
Este modal utiliza una superficie opaca dedicada —no un panel de cristal transparente— para que el texto sea siempre legible independientemente de lo que haya detrás. Una franja de gradiente marca el borde superior y la entrada utiliza una curva elástica fluida.
El foco queda atrapado dentro mientras el modal está abierto. Tab navega por los botones, Esc cierra la ventana.
Skeleton Loader
Estado de carga para contenido asíncronoChips
Eliminables · Seleccionables · DinámicosVariantes de color
Chips de filtrado seleccionables
Dinámicos — eliminar o añadir nuevos
Grupo de Avatares
Fotos · Iniciales · Estado · Desbordamiento · TamañosAvatares con foto — hover para ver ficha
Variantes de tamaño