Diagnostica problemas de instalación, estilos, hidratación y materiales.
Comprueba que usas React 19 e importas la hoja de estilos una vez. Prueba un componente mínimo sin contenedores propios:
import { Button } from "@liquidify/react"
import "@liquidify/react/styles.css"
export function CheckLiquidify() {
return <Button onPress={() => console.log("ok")}>Check</Button>
}Si funciona, añade los proveedores y contenedores uno a uno para identificar el conflicto.
@liquidify/react/styles.css en la raíz o en la entrada global de estilos.@liquidify/glass, importa @liquidify/glass/glass.css.Prueba sobre un fondo con textura o contraste. Un color uniforme puede ocultar el desenfoque.
Safari y Firefox muestran el acabado difuso y los reflejos estáticos, sin la refracción específica de Blink. Consulta la compatibilidad.
Revisa overflow, transformaciones, opacidad y aislamiento en los ancestros: pueden crear recortes o contextos de apilamiento inesperados.
window, document ni almacenamiento al evaluar el módulo.Consulta renderizado en servidor.
Los diálogos, hojas, menús, popovers y tooltips usan portales. Si quedan detrás de la interfaz, elimina valores de z-index improvisados y revisa el contexto de apilamiento del contenedor del portal.
Prueba el control aislado si fallan el foco o el cierre. Si controlas open, actualízalo en onOpenChange.
Consulta la referencia generada del componente. Props como material, size, tint y name no están disponibles en todos los controles.
Fija la versión instalada y compárala con la documentada. La API experimental puede cambiar entre versiones.