Uma biblioteca de componentes glassmórficos inspirada na Apple, construída sobre shadcn/ui e Base UI, com componentes estilizados em vidro prontos para uso (alert, button, card, calendar, popover, sidebar e mais), instaláveis via o registro do shadcn.
O que faz
glasscn é uma biblioteca de componentes de UI com glassmorphism de código aberto, construída sobre shadcn/ui e Base UI. Os componentes são instalados pelo nome via o registro do shadcn e se integram a qualquer projeto Next.js ou React com resolução automática de dependências.
glasscn é uma biblioteca de componentes de glassmorphism construída sobre shadcn/ui e Base UI. Cada componente é publicado em um registro do shadcn, então você o instala pelo nome com o prefixo @glasscn/ (npx shadcn add @glasscn/<component>), e as dependências, incluindo outros itens do registro, são resolvidas automaticamente, integrando-se diretamente a qualquer projeto Next.js ou React.
Ela oferece um amplo conjunto de primitivos estilizados em vidro: alert, alert dialog, badge, button, button group, calendar, card, checkbox, code block command, command, combobox, input, item, popover, radio group, select, separator, sidebar e skeleton, além de variantes de vidro e utilitários auxiliares. Cada componente suporta vários estilos de vidro via a prop glassVariant: clear, frosted, subtle e duas variantes liquid: um visual liquid em CSS puro (saturação intensa, brilho e um chanfro multicamada, sem configuração) e uma variante liquid-refract que utiliza um filtro de deslocamento SVG para uma refração real semelhante a uma lente de vidro curvo. Gratuito e de código aberto.
Recursos
Notas de campo
Revisado em Jun 21, 2026
Ideal para
Resultados para quem cria
Atenção
Testado com
Custo
Gratuito e de código aberto.
Ferramentas usadas
Uma biblioteca de componentes de glassmorphism construída sobre shadcn/ui e Base UI, com versões estilizadas em vidro de primitivos comuns como buttons, cards, popovers, calendars e sidebars.
Use o registro do shadcn: npx shadcn add @glasscn/<component-name>. As dependências, incluindo outros itens do registro, são resolvidas e instaladas automaticamente.
Cada componente suporta uma prop glassVariant com as opções clear, frosted, subtle e liquid, incluindo uma variante liquid-refract que usa um filtro de deslocamento SVG para refração real semelhante a uma 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 overheadUma biblioteca de efeito liquid-glass para a web, aplica refração realista de vidro, blur, aberração cromática e iluminação em qualquer elemento HTML usando shaders WebGL.
Best for Refração realista de vidro na web via WebGLUma biblioteca de animações de carregamento reutilizáveis no estilo dotmatrix para React e Next.js, instalável pelo registro do shadcn ou copiando o código-fonte direto da documentação.
Best for Loaders com estilo dotmatrix distintoUma coleção de spinners, loaders e animações de carregamento para aplicações web modernas, construída com React, Next.js, shadcn/ui, Tailwind CSS e Framer Motion.
Best for Adicionar spinners e animações de carregamento rapidamenteUm efeito animado de metal líquido em WebGL para React. Envolva um botão, chip ou ícone para adicionar um anel metálico em tempo real, com presets, temas, intensidade ajustável e reflexo de proximidade opcional em elementos vizinhos.
Best for Um destaque WebGL metálico premium em botões ou ícones principais