Solid Glass: el tema de cristal para shadcn/ui pensado para apps de IA (ejemplos, comparativa con Material UI y uso en Next.js)

Solid Glass es un tema open source para shadcn/ui que convierte cada superficie de tu interfaz en un panel de cristal grueso y ahumado: opaco a distancia, con un filo de luz, un contorno fino y una sombra cuando te acercas. Es una sola hoja de estilos, no toca tus componentes y viene con una docena de componentes propios para interfaces de agentes de IA. Se publica con licencia MIT.

Hemos leído el repositorio deeplethe/solid-glass (versión 0.1.0, commit 6e8903e del 16 de octubre de 2026) y lo hemos montado en un proyecto Next.js 16 propio para enseñarte cómo se ven los componentes, compararlos con el tema por defecto de shadcn/ui y con Material UI, y explicarte cómo usarlo en Next.js con los tropiezos reales que nos encontramos. Si te interesan otras herramientas libres para diseñar, en este tema tienes también FigCraft, la alternativa open source a Figma.

Qué es Solid Glass

Solid Glass lo publica DeepLethe como "un sistema de diseño para aplicaciones de IA". En la práctica son dos piezas:

1. solid-glass.css: un archivo de 1.409 líneas que redefine las variables de color de shadcn/ui (--background, --card, --popover, --muted...) y añade el acabado de cristal. Como usa los mismos nombres, cualquier componente de shadcn/ui que ya tengas cambia de aspecto sin editar una línea.
2. Componentes propios para interfaces donde trabaja un agente: el estado del turno, la caja donde escribes, los pasos que ejecutó, un diff, la pregunta que te hace, lo lleno que está el contexto, etc.

La idea: entre el diseño plano y el liquid glass

El README lo explica con una comparación que se entiende mejor viéndola. El diseño plano es un bloque opaco: lo que haya detrás da igual. El liquid glass (el estilo de cristal casi transparente que se ha puesto de moda) deja pasar todo el color de fondo, y en una pantalla con mucho texto el lector pelea con el fondo para leer. Solid Glass solo deja pasar un contorno: lo justo para saber que es cristal, sin estorbar la lectura.

Todo el sistema sale de cuatro reglas que el propio CSS documenta en su cabecera:

El detalle técnico interesante es que el material cuelga de las propias utilidades de color: cualquier elemento con bg-card, bg-popover o bg-sidebar recibe el desenfoque, el filo y la sombra. Por eso los componentes de shadcn/ui no necesitan cambios. Las reglas están fuera de las capas de Tailwind a propósito, para que una utilidad escrita después no las anule.

Ejemplos: cómo se ven los componentes

Para no depender solo de las capturas oficiales montamos una página con componentes normales de shadcn/ui (Card, Tabs, Badge, Progress, Switch, Input y Button) y la renderizamos dos veces sobre el mismo fondo con dos manchas de color: primero con el tema neutro por defecto de shadcn/ui y después con solid-glass.css. El JSX es idéntico; solo cambia la hoja de estilos.

Lo que cambia, mirado de cerca:

• Tarjetas: pasan de gris opaco a cristal ahumado. El azul y el verde de detrás tiñen la superficie sin que el texto pierda contraste.
• Botón principal: deja de ser un rectángulo plano y se convierte en un panel sólido con un filo de luz arriba y sombra abajo.
• Campos e interruptores: el input es un panel de cristal claro para escribir; la pista del interruptor está tallada como una ranura, con la luz al revés.
• Badges y pestañas: mismo lenguaje de filo y contorno, sin anillos de foco gruesos.

En tema claro el mismo sistema usa paneles de cristal blanco sobre un gris frío:

Los componentes para agentes de IA

Aquí está lo que lo diferencia de un tema cualquiera. Reproducimos una conversación con un agente usando solo componentes de Solid Glass: StepGroup (los pasos que ejecutó, con su diff), AskCard (una decisión que espera al usuario), TurnStatus (lo que está haciendo ahora, con tiempo y tokens) y Composer con Tag y ContextRing (la caja de mensaje con adjuntos, modo, esfuerzo y uso del contexto).

En la web del proyecto hay además un bloque completo, un espacio de trabajo de agente con sesiones, hilo, archivos y tareas en segundo plano:

Solid Glass vs shadcn/ui vs Material UI

Para la comparación construimos la misma pantalla una tercera vez con Material UI 9.5 y su tema oscuro por defecto, sobre el mismo fondo.

Lo primero que hay que aclarar: no son tres cosas del mismo tipo. shadcn/ui es una colección de componentes que copias a tu proyecto. Solid Glass es un tema (y unos componentes extra) encima de shadcn/ui. Material UI es una librería completa de componentes que instalas como dependencia, con su propio motor de estilos.

Medimos también lo que descarga el navegador en cada versión de nuestra página (build de producción, next start, tamaño transferido con compresión):

Solid Glass no añade JavaScript: cuesta unos 6 KB de CSS comprimido. La versión con Material UI descarga unos 46 KB más de JavaScript por el motor de Emotion y los propios componentes. Son cifras de una página pequeña; en una app grande la diferencia depende de cuántos componentes uses.

¿Cuál elegir?

• Material UI si quieres un sistema completo y probado, con componentes avanzados (tablas de datos, selectores de fecha) y no te importa el aspecto Material ni el CSS-in-JS.
• shadcn/ui con su tema si quieres control total sobre el código y una base neutra que vas a diseñar tú.
• Solid Glass si ya usas shadcn/ui (o vas a usarlo) y construyes un chat, un copiloto o un panel de agentes: te ahorra diseñar desde cero los componentes de estado, pasos y decisiones, y el aspecto es distintivo sin sacrificar legibilidad.

Cómo usar Solid Glass en Next.js

Solid Glass está pensado para cualquier proyecto React 19 con Tailwind 4 (su propia web está hecha con Vite), pero funciona en Next.js. Lo probamos en un proyecto creado con create-next-app 16.4.2. Estos son los pasos.

1. Crea el proyecto y shadcn/ui con Base UI

Solid Glass se apoya en la variante de shadcn/ui basada en Base UI (estilo base-nova), no en la de Radix:

pnpm create next-app@latest mi-app --ts --tailwind --app --src-dir
cd mi-app
pnpm dlx shadcn@latest init --base base

2. Añade la hoja de estilos

pnpm dlx shadcn@latest add deeplethe/solid-glass/solid-glass

La CLI de shadcn lee el registro directamente del repositorio de GitHub. Para fijar una versión añade # y el commit: deeplethe/solid-glass/solid-glass#6e8903e.

3. Impórtala después de Tailwind y borra las variables de color

En src/app/globals.css importa la hoja después de Tailwind y de la hoja de shadcn, y borra los bloques :root y .dark con colores que escribió shadcn init, porque Solid Glass define las mismas variables:

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "./solid-glass.css";

4. Activa el tema oscuro

El oscuro es el material tal como se diseñó y se activa con la clase dark en <html>. Lo más simple:

<html lang="es" className="dark">

Si usas next-themes, pon attribute="class" y defaultTheme="dark" en el ThemeProvider.

5. Fuentes

La hoja fija --font-sans en "Geist Variable" y --font-mono en "Geist Mono Variable". Si cargas Geist con next/font, la variable que crea no se usará; lo más directo es instalar las fuentes de Fontsource:

pnpm add @fontsource-variable/geist @fontsource-variable/geist-mono

@import "@fontsource-variable/geist";
@import "@fontsource-variable/geist-mono";

6. Añade los componentes que quieras

pnpm dlx shadcn@latest add button card
pnpm dlx shadcn@latest add deeplethe/solid-glass/ask-card deeplethe/solid-glass/turn-status

Y úsalos como cualquier componente de shadcn/ui:

"use client"

import { AskCard } from "@/components/ui/ask-card"

export function Decision() {
  return (
    <AskCard
      question="La build pasa. ¿Subo a main o abro un pull request?"
      options={["Abrir pull request", "Subir a main"]}
      onAnswer={(opcion) => console.log(opcion)}
    />
  )
}

Para un panel suelto, sin componente, usa las clases del material directamente:

<div className="glass-panel rounded-md p-3">Panel</div>
<div className="rounded-xl bg-card p-4">Tarjeta</div>
<div className="rounded-lg bg-popover p-1">Popover</div>

Errores frecuentes en Next.js

Los componentes de Solid Glass están escritos para un proyecto sin React Server Components (su components.json tiene "rsc": false), y eso se nota en Next.js. Estos son los tres puntos que hay que vigilar; el segundo nos rompió la build de verdad:

1. Componentes con hooks en un Server Component. status-glyph, turn-status, tool-steps, context-ring y composer usan useState o useEffect y en el repositorio no traen "use client". Impórtalos siempre desde un archivo con "use client" (como el ejemplo de arriba) o añade la directiva al principio del componente.

2. TurnStatus rompe el prerender con Cache Components. create-next-app 16.4 activa cacheComponents: true en next.config.ts, y TurnStatus lee Date.now() al montarse. La build falla con:

Error: Route "/agent": Next.js encountered the unstable value `Date.now()` in a Client Component.

La solución es envolverlo en <Suspense> para que se renderice en el cliente:

import { Suspense } from "react"

<Suspense>
  <PanelDelAgente />
</Suspense>

3. Los colores no cambian o se mezclan. Casi siempre es porque siguen en globals.css los bloques :root y .dark que escribió shadcn init, o porque solid-glass.css se importa antes que Tailwind. El orden importa.

¿Funciona con shadcn/ui basado en Radix?

Muchos proyectos (este blog incluido) usan el estilo new-york, basado en Radix. Probamos solid-glass.css con nuestros propios Card, Badge y Button de Radix:

La tarjeta y los botones toman el material. El badge outline se queda sin contorno porque la hoja lo busca por data-variant, un atributo que los componentes de Base UI llevan y los de Radix no. Además, varios estados se detectan por atributos de Base UI (data-checked, data-popup-open) que en Radix se llaman data-state="checked" o data-state="open", así que interruptores, casillas y menús no se verán igual. Conclusión: en un proyecto nuevo, empieza con Base UI; en uno con Radix, prueba componente a componente antes de adoptarlo.

Licencia de Solid Glass

El código de Solid Glass está bajo licencia MIT (Copyright 2026 DeepLethe). Los componentes, ejemplos y documentación que vienen de shadcn/ui son de sus autores, también con MIT, como detalla NOTICE.md. La interacción viene de Base UI (MIT), los iconos de Lucide (ISC) y las fuentes Geist tienen licencia SIL Open Font License. Puedes usarlo en proyectos comerciales conservando el aviso de copyright.

Qué comprobamos nosotros

• Leímos README.md, NOTICE.md, LICENSE, la documentación de content/ y las 1.409 líneas de src/solid-glass.css en el commit 6e8903e.
• Creamos un proyecto con create-next-app 16.4.2, copiamos los componentes Base UI y los de Solid Glass del repositorio y lo compilamos con next build. Las capturas marcadas "codigoagente" salen de ese proyecto.
• La CLI de shadcn resolvió el registro de GitHub (deeplethe/solid-glass/...), pero no pudimos completar shadcn add desde nuestro entorno porque bloquea ui.shadcn.com, del que la CLI descarga la paleta base. En tu equipo funciona con conexión normal.
• No pudimos abrir la web del proyecto desde nuestro entorno; las capturas oficiales vienen del propio repositorio.

Preguntas frecuentes

¿Solid Glass es una librería de componentes? No exactamente. Es un tema para shadcn/ui (una hoja CSS) más 12 componentes propios para interfaces de IA. Los componentes base siguen siendo los de shadcn/ui.

¿Tengo que reescribir mis componentes de shadcn/ui? No, si usas la variante Base UI. La hoja localiza cada parte por su data-slot y sus clases. Con la variante Radix funciona en parte.

¿Funciona con Next.js? Sí. Lo probamos con Next.js 16.4.2 y App Router. Ten en cuenta "use client" en los componentes con hooks y <Suspense> para TurnStatus si usas Cache Components.

¿Tiene modo claro? Sí. El oscuro es el diseño original; el claro usa paneles de cristal blanco y se activa quitando la clase dark.

¿Puedo cambiar el color de marca? Sí: define --brand, --brand-foreground y --brand-muted en :root y en .dark. El radio de todas las esquinas sale de --radius.

¿Es mejor que Material UI? Depende del proyecto. Material UI es más completo y maduro; Solid Glass pesa menos, no añade JavaScript y trae componentes específicos para agentes, pero va por la versión 0.1.0.

¿Se puede usar gratis en un proyecto comercial? Sí, la licencia MIT lo permite.

Conclusión

Solid Glass es la forma más rápida que hemos visto de darle a una app con shadcn/ui un aspecto propio sin tocar los componentes: una hoja CSS, cero JavaScript extra y un lenguaje visual coherente. Sus componentes para agentes son lo más valioso si estás construyendo un chat o un copiloto. Si tu proyecto es Next.js, empieza con shadcn/ui en Base UI, sigue los seis pasos de arriba y revisa los dos avisos de compilación antes de desplegar.