# glasscn

By **kostyniuk** · Software & Tools

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.

- 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 de glassmorphism construídos sobre shadcn/ui e Base UI
- Instalados pelo nome via o registro do shadcn com o prefixo @glasscn
- Dependências são resolvidas e instaladas automaticamente
- Amplo conjunto de primitivos: alert, button, card, calendar, popover, sidebar e mais
- Prop glassVariant: estilos clear, frosted, subtle e liquid
- liquid-refract usa um filtro de deslocamento SVG para refração real

---

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.

## FAQ

### O que é glasscn?

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.

### Como instalo um componente?

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.

### Quais estilos de vidro estão disponíveis?

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.

---
[View on Analog](https://analoghq.ai/pt-br/kostyniuk/software-tools/glasscn)