Snippets de Código
Encontre o componente perfeito para seu próximo projeto.
Acordeão em CSS Puro (FAQ)
Um componente de acordeão (FAQ) altamente acessível, construído exclusivamente com elementos HTML details e summary e CSS, sem a necessidade de JavaScript.
Accordion de FAQ
Implementado apenas com detalhes/elemento de resumo HTML5 e CSS, sem necessidade de JavaScript. Um acordeão acessível para perguntas frequentes com animações suaves de abertura e fechamento.
Accordion de Imagens
Um acordeão que não apenas exibe texto, mas também uma bela imagem de fundo quando você abre o painel.
grupos de avatares sobrepostos
UI de avatar com vários ícones de usuário empilhados uns sobre os outros e um emblema mostrando quantas pessoas restam.
Fundo com Gradiente Animado
Um fundo de gradiente atraente com transição suave de cores, implementado exclusivamente com CSS.
Mesh Gradient Animado
Este é um componente de fundo de gradação de malha dinâmica onde as cores mudam e se misturam suavemente, implementado usando apenas CSS.
Background Aurora
Um fantástico efeito de fundo que flui como uma aurora boreal com várias bolhas e filtros ovais animados. Implementado com CSS puro.
Background de Partículas
Efeito de fundo que gera partículas flutuantes usando animação CSS
Background Polka Dot Animado
Este é um componente de fundo que usa gradiente radial CSS para desenhar um padrão de bolinhas limpo com animação.
Pulsing Status Badge
Um emblema com uma animação ondulada (Pulse) que enfatiza que você está online ou transmitindo ao vivo.
Botão Cyberpunk
Um componente de botão futurista com efeitos neon e animação de falha que fica ótimo em um tema escuro.
Botão com Borda de Gradiente
Este componente de botão tem uma bela borda gradiente giratória combinando CSS `-webkit-mask-composite` e gradiente animado.
Botão com Preenchimento Líquido
Um botão que se enche de líquido em ondas de baixo quando pairado
Botão Magnético
Um componente de botão magnético interativo que segue suavemente o cursor do mouse como se ele fosse atraído magneticamente.
Botão Neumorphism
Um botão no estilo Neumorphism implementado apenas com CSS, com uma aparência suave e tridimensional.
Botão Shimmer
Um lindo componente de botão que emite uma faixa de luz (efeito de brilho) ao passar o mouse e periodicamente.
Flip Card 3D
Componente de cartão interativo que gira no espaço 3D ao passar o mouse
Card de Perfil Glassmorphism
Um cartão de perfil de usuário elegante e translúcido que utiliza o efeito de vidro fosco (morfismo de vidro).
Cartão Glassmorphism
Um componente de cartão com design Glassmorphism moderno e elegante, utilizando transparência que simula vidro fosco e efeitos de desfoque.
Card com Brilho Neon
Este é um componente de interface de usuário de cartão interativo em que a borda do cartão acende como uma luz neon quando você passa o mouse e o holofote se move dependendo da posição do mouse.
Card de Preços Animado
Um componente moderno de cartão de preços que é destacado ao passar o mouse e tem uma seção de preços animada.
Card de Contador de Estatísticas
Este é um componente de cartão de estatísticas ideal para painéis e páginas de destino, pois os números são animados e contam a partir de zero conforme a página rola.
carrossel de letreiro infinito
Um componente que permite que logotipos e cartões rolem horizontalmente sem interrupção.
layout de mega rodapé
Rodapé grande com links de várias colunas, inscrição em boletim informativo e ícones de mídia social.
Barra de Pesquisa Animada
Uma barra de pesquisa minimalista que se expande suavemente quando você clica no ícone.
Toggle Switch Personalizado
Exemplo de implementação de um belo interruptor de alternância (toggle switch) animado, que substitui com elegância as caixas de seleção (checkboxes) padrão.
Dropzone para Upload de Arquivos
Área moderna de upload de arquivos com suporte para arrastar e soltar.
Input com Label Flutuante
Um campo de entrada moderno com um espaço reservado que aparece suavemente como um rótulo quando focado.
Formulário Multi-Step
UI que alterna entre várias etapas (com indicador de progresso), frequentemente usada em telas de registro, etc.
Input de OTP
Um componente de entrada OTP intuitivo de 6 dígitos que foca automaticamente quando você insere um único caractere e retorna à caixa anterior com retrocesso. Também suporta colar.
Medidor de Força de Senha
Uma IU que exibe visualmente a força da senha inserida.
Layout Bento Grid
Um layout de grade de caixa bento moderno e assimétrico, popular para apresentações de recursos e painéis.
Layout Masonry
Lindo layout de grade irregular no estilo Pinterest usando colunas CSS
Galeria em CSS Grid Responsiva
Como implementar uma galeria de imagens responsiva aproveitando auto-fit e minmax, sem a necessidade de media queries.
Sidebar com Header
O layout básico de um aplicativo web moderno com uma barra lateral fixa à esquerda e um cabeçalho na parte superior. Ideal para telas de gerenciamento e produtos SaaS.
Spinner de Carregamento em CSS Puro
Um spinner de carregamento moderno e elegante, desenvolvido utilizando conic-gradient e mask do CSS, sem a necessidade de imagens ou JavaScript.
Loader de Pontos em Onda
Um componente carregador de animação CSS puro que não requer nenhum JavaScript, com 5 pontos ondulados.
Loader de Texto Glitch
Uma tela de carregamento de texto com efeito de falha no estilo cyberpunk.
Loader de Barra de Progresso
Este é um componente carregador que realiza três tipos de animações de barra de progresso: gradação, faixa e pulso usando CSS puro.
Loader de Anel Pulsante
Um botão giratório de carregamento com gradação e animação em anel que se espalha como ondulações.
Skeleton Loader
UI esqueleto com animações brilhantes exibidas enquanto o conteúdo é carregado
Modal Glassmorphism
Um belo diálogo modal semelhante a vidro com fundo desfocado.
Navegação Breadcrumb
Navegação atual e bonita em forma de seta
Dock de Navegação Flutuante
Navegação de doca flutuante semelhante ao macOS, onde os ícones se expandem quando passam o mouse.
Animação para Menu Hambúrguer
Implementação de uma animação elegante e interativa para menu hambúrguer, que se transforma suavemente em um ícone de 'X' ao ser ativada.
Menu Sidebar Colapsável
Esta é uma navegação de barra lateral que pode ser usada em painéis, etc., e pode ser recolhida para um estado apenas de ícone.
Navbar Sticky
Um componente fixo da barra de navegação que congela com um efeito de morfismo de vidro e muda para um estilo compacto conforme você rola.
Seção de Cards de Features
Seção do cartão de introdução de recursos para SaaS/páginas de destino. Um componente de UI de cartão com uma borda de gradação que brilha suavemente quando você passa o mouse sobre ele.
Background de Vídeo para Hero
Esta é uma seção principal que coloca um vídeo em loop no fundo para dar um impacto visual.
Seção Hero Dividida
A tipografia e os recursos visuais ousados são divididos em seções esquerda e direita, com uma seção principal que desliza durante o carregamento.
Tabela de Preços Responsiva com Tailwind CSS
Um snippet de UI focado em uma seção de tabela de preços moderna e responsiva, ideal para plataformas SaaS. Desenvolvido integralmente com Tailwind CSS.
Slider de Depoimentos
Seção deslizante para exibir um carrossel de comentários de usuários
Seção de Timeline Vertical
Uma linha do tempo vertical que representa as fases e o histórico de um projeto.
Tabs com Underline Animado
Navegação por guias com indicadores de sublinhado que seguem suavemente as guias ativas.
Notificação Toast de Sucesso
Uma notificação pop-up informando ao usuário sobre uma operação bem-sucedida.
Tooltip Magnético Animado
Uma dica de ferramenta animada e sofisticada que segue suavemente o movimento do cursor sobre o elemento.
Menu de Contexto
Menu de contexto personalizado do botão direito com design sofisticado
Tooltip em CSS Puro
Um tooltip leve e elegante acionado por hover, desenvolvido unicamente com CSS e sem dependência de JavaScript.
Menu Popover
Um menu popover que abre ao clicar (ou focar) e exibe uma lista de ações, em vez de passar o mouse.