Una biblioteca de componentes con glassmorfismo inspirada en Apple, construida sobre shadcn/ui y Base UI, con componentes de estilo glass listos para usar (alert, button, card, calendar, popover, sidebar y más) instalables mediante el registro de shadcn.
Qué hace
glasscn es una biblioteca de componentes UI con glassmorfismo de código abierto, construida sobre shadcn/ui y Base UI. Los componentes se instalan por nombre mediante el registro de shadcn y se integran en cualquier proyecto Next.js o React con resolución automática de dependencias.
glasscn es una biblioteca de componentes con glassmorfismo construida sobre shadcn/ui y Base UI. Cada componente se publica en un registro de shadcn, por lo que se instala por nombre con el prefijo @glasscn/ (npx shadcn add @glasscn/<component>) y las dependencias, incluidos otros elementos del registro, se resuelven automáticamente, integrándose directamente en cualquier proyecto Next.js o React.
Incluye un amplio conjunto de primitivas con estilo glass: alert, alert dialog, badge, button, button group, calendar, card, checkbox, code block command, command, combobox, input, item, popover, radio group, select, separator, sidebar y skeleton, además de variantes glass y utilidades auxiliares. Cada componente admite varios estilos glass mediante una prop glassVariant: clear, frosted, subtle y dos variantes liquid: un aspecto liquid en CSS puro (alta saturación, brillo y bisel multicapa, sin configuración adicional) y una variante liquid-refract que usa un filtro de desplazamiento SVG para lograr una refracción real similar a un cristal curvado. Gratuito y de código abierto.
Características
Notas de campo
Revisado el Jun 21, 2026
Ideal para
Resultados para creadores
Ten cuidado
Probado con
Costo
Gratuito y de código abierto.
Herramientas usadas
Una biblioteca de componentes con glassmorfismo construida sobre shadcn/ui y Base UI, con versiones de estilo glass de primitivas comunes como buttons, cards, popovers, calendars y sidebars.
Usa el registro de shadcn: npx shadcn add @glasscn/<component-name>. Las dependencias, incluidos otros elementos del registro, se resuelven e instalan automáticamente.
Cada componente admite una prop glassVariant con las opciones clear, frosted, subtle y liquid, incluyendo una variante liquid-refract que usa un filtro de desplazamiento SVG para una refracción real similar a la de una lente.
alex@kostyniuk00
“Introducing GlassCN: Apple-like @shadcn components with liquid glass effect. I love glassmorphism and @shadcn, so created a set of liquid glass and clear components. I've dig deep on light reflections to deliver the liquid effect, comes in…”
alex@kostyniuk00
“Thanks, @shadcn. My first shadcn registry is out, it has already 10+ beautiful glass components inspired by Apple, I will preview them here, but I'll start with the Code Block Command component: 4 variants, dark/light theme bunx --bun shadc…”
alex@kostyniuk00
“Introducing GlassCN: Apple-like @shadcn components with elegant glass effects and polished details. I've been in love with glassmorphism and @shadcn, so decided to create a set of frosted components that more people can easily use it on the…”
shadcn/ui, open-source, copy-owned UI components for developers building their own design system with full code control.
Best for Teams building a custom design system who need full ownership of component source code78+ animated shadcn/ui components plus 100+ AI agent patterns, distributed as copy-paste source, free, open-source, and zero npm lock-in.
Best for React and Tailwind teams already using shadcn/ui who want animated, accessible components without npm package overheadUna biblioteca de efecto liquid-glass para la web: aplica refracción de vidrio realista, desenfoque, aberración cromática e iluminación a cualquier elemento HTML mediante shaders WebGL.
Best for Refracción de vidrio realista en la web mediante WebGLUna biblioteca de animaciones de carga reutilizables en estilo dotmatrix para React y Next.js, instalable a través del registro de shadcn o copiando el código fuente directamente desde la documentación.
Best for Loaders con el distintivo estilo dotmatrixUna colección de spinners, loaders y animaciones de carga para aplicaciones web modernas, construida con React, Next.js, shadcn/ui, Tailwind CSS y Framer Motion.
Best for Añadir spinners y animaciones de carga rápidamenteUn efecto animado de metal líquido con WebGL para React; envuelve un botón, chip o icono para darle un anillo de metal en tiempo real, con presets, tematización, intensidad ajustable y reflejo de proximidad opcional en elementos vecinos.
Best for Un acento de metal WebGL premium en botones o iconos clave