Solid Glass
Um sistema de design inspirado em vidro, feito sob medida para interfaces de aplicativos de IA baseados em React.
Componentes de interface táteis, físicos e técnicos construídos sobre o shadcn/ui e Tailwind CSS.
Solid Glass é um sistema de design especializado e tema CSS criado especificamente para aplicações de IA. Ele preenche a lacuna entre o design plano e o vidro líquido excessivamente transparente, oferecendo texto legível junto a destaques sutis nas bordas e profundidade física.
O que é
Ele fornece uma única folha de estilos definindo cores, três espessuras de vidro, movimento e nomes de variáveis do shadcn/ui, além de componentes de UI sob medida como glifos de status, visualizações de diff e caixas de raciocínio. Você pode configurar temas usando os seletores da página Create integrada e implantar blocos inteiros de espaço de trabalho de agentes diretamente no seu projeto React.
Para quem
É ideal para desenvolvedores frontend e designers que constroem interfaces de IA, UIs de chat ou espaços de trabalho de agentes que desejam uma estética calma e legível. Não é adequado para equipes que buscam estilos de design web corporativo tradicional ou puramente plano.
Recursos principais
Estética Solid Glass
Fornece um acabamento contido que enfatiza a clareza e a estabilidade em vez de refração pesada.
Componentes de Espaço de Trabalho de Agente
Inclui glifos de status, caixas de composição, visualizações de diff e exibições de raciocínio prontas para uso.
Integração com shadcn/ui
Funciona diretamente com componentes shadcn/ui existentes, direcionando-se a data-slots através de um único arquivo CSS.
Página Create Interativa
Permite ajustar seletores de material como espessura, tonalidade, desfoque e raio para gerar variáveis CSS personalizadas.
Pronto em 3 passos
Nosso veredito honesto
Pontos fortes
- Uma única folha de estilos integra-se perfeitamente com configurações existentes de shadcn/ui e Tailwind
- Feito sob medida especificamente para respostas de IA em streaming e feedback de estado de agentes
- Inclui blocos de espaço de trabalho de agentes pré-construídos para prototipagem rápida
- Fornece uma página Create interativa para ajustar propriedades de materiais personalizadas
Onde deixa a desejar
- Requer um ambiente React 19 e Tailwind CSS 4 existente para implementação
- Sobrescreve variáveis de cores padrão, exigindo limpeza manual dos modelos padrão de inicialização do shadcn
- O estilo estético de nicho pode não se adequar à identidade visual de aplicações tradicionais não relacionadas à IA
Preços & licença
Gratuito sob sua licença, sem opções hospedadas pagas mencionadas no repositório. O único custo é o seu próprio tempo de engenharia para integrar e estilizar sua aplicação.
Vagas para quem fala português
880 vagas remotas abertas de treinamento de IA, atualizadas em 15 de novembro de 2026; a maioria paga $20–$175 por hora. 8 delas pedem falantes de português. O Zekai lista de graça; a candidatura vai para a plataforma do empregador.
Alternativas
Estas ferramentas de IA avaliadas fazem o mesmo trabalho na hora — do nosso diretório avaliado.
Use, ou deixe que a gente configure
FAQ
Como o Solid Glass difere do vidro líquido?
O vidro líquido é quase transparente, forçando os leitores a lutarem contra o fundo pela visibilidade do texto. O Solid Glass limita a transparência a um contorno, garantindo alta legibilidade para textos densos e respostas de IA em streaming.
Preciso modificar meus componentes shadcn/ui existentes?
Não. A folha de estilos localiza cada parte dos seus componentes shadcn/ui existentes usando atributos data-slot e classes existentes, sem exigir reescrita de componentes.
Posso personalizar as propriedades do material de vidro?
Sim. A página Create inclusa permite ajustar espessura, tonalidade, cor de gráfico, tipo, raio, borda e desfoque para gerar suas próprias variáveis CSS.
