Barra de comando estilo cmdk com busca e atalhos
Abas de navegacao com indicador animado
Trilha de navegacao hierarquica
Menu lateral colapsavel com icones e labels
Barra de navegacao superior responsiva
Controles de paginacao com estado ativo
Menu dropdown com itens agrupados e atalhos
Menu de contexto com clique direito
Notificacao temporaria no canto da tela
Alerta inline com variantes de status
Barra de progresso com animacao e porcentagem
Placeholder animado durante carregamento
Indicador de carregamento circular
Rotulo pequeno para status e contadores
Dica flutuante ao passar o mouse
Painel flutuante com conteudo interativo
Campo de entrada com label, placeholder e estado de erro
Seletor dropdown com busca integrada
Caixa de selecao com label e estado checked
Grupo de opcoes mutuamente exclusivas
Alternador booleano estilo iOS
Seletor de data com icone de calendario
Controle deslizante para valores numericos
Area de upload com drag and drop
Janela modal com overlay e botoes de acao
Painel lateral deslizante estilo sheet
Gaveta inferior para mobile e desktop
Dialog de confirmacao para acoes destrutivas
Dialog de comando com busca e lista de acoes
Tooltip rico com conteudo interativo
Card flutuante ao passar o mouse em um elemento
Tabela de dados com header fixo e hover rows
Card de conteudo com header, body e footer
Lista colapsavel de perguntas e respostas
Imagem de perfil com fallback e indicador online
Container com proporcao fixa para midias
Container com scroll customizado
Divisor visual horizontal ou vertical
Secao que expande e colapsa com animacao
Container centralizado com largura maxima responsiva
Layout vertical com espacamento consistente
Grid que adapta colunas por breakpoint
Elementos fixos e flutuantes (FAB, back-to-top)
Header que fixa no scroll com blur e borda
Layout dividido em duas colunas (sidebar + conteudo)
Barra de menu horizontal estilo desktop com submenus
Menu de navegacao com mega-menu dropdown e indicador
Grupo de toggles exclusivos estilo segmented control
Paineis redimensionaveis com handle de arrasto
Input de codigo OTP com auto-focus entre campos
Carrossel de slides com navegacao e indicadores
Calendario interativo com selecao de datas
Exibicao de atalhos de teclado com estilo de tecla
Layout completo com header, sidebar e area de conteudo
Tabela com ordenacao, filtro e paginacao (TanStack)
Wizard multi-etapas com progresso visual
Linha do tempo vertical com icones e conteudo
Busca global com acoes rapidas estilo Spotlight/Alfred
Barra de ferramentas para editor de texto rico
Botao com preenchimento gradiente ao hover
Borda animada que percorre o botao
Efeito neon brilhante ao hover
Texto desliza para revelar icone
Efeito de preenchimento liquido ondulado
Pulso magnetico com sombra ao hover
Passe o mouse para ver o efeito de perspectiva 3D.
Card com efeito 3D tilt ao mover o mouse
Efeito vidro com blur e transparencia.
Card com efeito vidro translucido
Luz segue o cursor sobre o card.
Luz que segue o cursor sobre o card
Borda com gradiente conico rotacionando continuamente.
Borda com gradiente animado rotacionando
Card sobe suavemente com sombra profunda.
Card que sobe com sombra ao hover
Label que flutua para cima ao focar
Input minimalista apenas com borda inferior
Campo de busca com icone e efeito de expansao
Input estilo Material Design com outlined border
Input com brilho colorido ao focar
Tres pontos que saltam em sequencia
Barra de progresso que se move continuamente
Circulo com borda parcial girando
Anel pulsante que expande e desaparece
Efeito shimmer para placeholders de conteudo
Dois aneis girando em direcoes opostas
Toggle estilo iOS com transicao suave
Toggle com icone de sol e lua animados
Switch com efeito neon brilhante
Toggle com thumb que expande ao transicionar
Botao com efeito ripple ao clicar
Botao que muda de forma ao hover
Texto com efeito glitch usando clip-path
Texto com animacao de digitacao caracter por caracter
Input com animacao de shake ao erro
Botao com efeito de confetti ao clicar
Checkbox com animacao SVG de checkmark desenhado
Checkbox com efeito bounce ao marcar
Checkbox com preenchimento expandindo do centro
Radio button com preenchimento gradiente animado
Tooltip classico acima do elemento com seta
Tooltip abaixo do elemento com seta
Tooltip a esquerda com seta lateral
Tooltip a direita com seta lateral
Tooltip com titulo, descricao e acao
Tooltip com animacao spring e blur
Botao de login estilo Google oficial
Botao de login estilo GitHub
Botao de login estilo Apple
Botao de login estilo Discord
Fundo com gradiente animado multi-cor
Efeito aurora boreal com blobs flutuantes
Grid de pontos com gradiente radial
Textura de ruido sutil estilo design system
Menu hamburger com animacao para X
Barra de progresso fixa no topo da pagina
Botao flutuante de voltar ao topo
Trilha de navegacao com separadores
Divisor com gradiente animado
import { IconName } from 'lucide-react'
Grafo de rede com simulacao de forcas fisicas. Nos se repelem e arestas os atraem, criando um layout organico. Ideal para visualizar relacoes entre entidades como co-ocorrencias, dependencias ou redes sociais.
Variacao do force-directed com nos organizados radialmente por grupo. Util para mostrar clusters e comunidades em redes com categorias definidas.
Circulos empacotados proporcionais a um valor quantitativo. Cada bolha representa uma entidade, o tamanho reflete a magnitude e a cor indica a categoria. Ideal para comparar proporcoes e detectar outliers.
Retangulos hierarquicos aninhados, com area proporcional ao valor. Ideal para visualizar composicao de um todo, como uso de disco, orcamento ou market share.
Renderizacao WebGL de grafos de alta performance. Sigma.js lida com milhares de nos e arestas sem perda de performance, diferente de SVG/Canvas. Usa Graphology como modelo de dados. Ideal para redes sociais, mapas de conhecimento e analise de clusters.
Grafo de conhecimento com entidades tipadas e relacoes nomeadas. Nos com icones e labels, arestas com direcao e rotulo. Usado em ontologias, taxonomias e bases de conhecimento.
Grafico de barras vertical com eixos, labels e tooltips. O chart mais usado para comparar valores entre categorias discretas.
Grafico de linha com area preenchida e gradiente. Ideal para series temporais, tendencias e comparacoes de evolucao ao longo do tempo.
Grafico de rosca com legenda interativa. Mostra proporcoes de um todo com centro vazio para KPI ou label. Usa d3.arc() e d3.pie() para calcular angulos.
Padroes visuais com Tailwind classes prontas — clique para copiar
Translucido + backdrop-blur
bg-white/5 backdrop-blur-xl border-white/10 rounded-xlSombras duplas criando relevo
shadow-[6px_6px_12px,-6px_-6px_12px]Topo gradiente + conteudo
overflow-hidden rounded-xl gradient-headerBorda + label flutuante legend
border-2 border-blue-500 + absolute label topBorda lateral para alertas
border-l-4 border-green-500 rounded-r-xlFundo sutil com gradiente
bg-gradient-to-br from-purple/10 to-pink/10Grid com sidebar stats + conteudo principal
grid grid-cols-[280px_1fr] h-screenTela de login centralizada com card flutuante
min-h-screen flex items-center justify-center bg-gradient-to-brPlaceholder visual quando nao ha dados
flex flex-col items-center gap-4 py-16 text-center text-zinc-400Fallback visual para erros de componente
border border-red-500/20 bg-red-500/5 rounded-xl p-6 text-red-400Placeholder animado durante carregamento
animate-pulse bg-zinc-800 rounded-lgPagina de configuracoes com secoes e toggles
divide-y divide-zinc-800 [&>div]:py-6 [&>div]:flex [&>div]:justify-betweenSistema de tema com custom properties
:root { --bg: oklch(0.15 0.02 260); --text: oklch(0.9 0 0) }AppShell que colapsa sidebar em mobile
grid md:grid-cols-[240px_1fr] grid-cols-1 min-h-screenGrid de planos com destaque no recomendado
grid grid-cols-3 gap-6 [&>.featured]:scale-105 [&>.featured]:border-blue-500Wizard multi-step com barra de progresso
relative after:absolute after:h-1 after:bg-blue-500 after:transition-allTexturas sutis para adicionar profundidade aos seus designs.
Paletas de cores em tons escuros para projetos parceiros.
Biblioteca de fontes para projetos. Clique no icone de copia para copiar o nome da fonte.