# glasscn By **kostyniuk** · Software & Tools 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. - Source: https://glasscn-components.vercel.app - Repository: https://github.com/kostyniuk/glasscn-components - Tags: open-source, ui-components, glassmorphism, shadcn, react, nextjs, tailwind, design-system - Pricing: free - Upvotes: 0 ## Features - Componentes con glassmorfismo construidos sobre shadcn/ui y Base UI - Se instalan por nombre mediante el registro de shadcn con el prefijo @glasscn - Las dependencias se resuelven e instalan automáticamente - Amplio conjunto de primitivas: alert, button, card, calendar, popover, sidebar y más - Prop glassVariant: estilos clear, frosted, subtle y liquid - liquid-refract usa un filtro de desplazamiento SVG para una refracción real --- 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/) 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. ## FAQ ### ¿Qué es glasscn? 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. ### ¿Cómo instalo un componente? Usa el registro de shadcn: npx shadcn add @glasscn/. Las dependencias, incluidos otros elementos del registro, se resuelven e instalan automáticamente. ### ¿Qué estilos glass están disponibles? 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. --- [View on Analog](https://analoghq.ai/es/kostyniuk/software-tools/glasscn)