Navegadores
Sistema
Edicao
DevTools
Terminal (Atalhos)
Finder
VS Code
Radar & Pulse
Bordas Rotativas
Hover (passe o mouse)
Gradientes
Estados & Especiais
Estilos Visuais
Tooltip & Float
Transicoes de Texto
Navegacao
Command Palette
Barra de comando estilo cmdk com busca e atalhos
Tabs
Abas de navegacao com indicador animado
Breadcrumbs
Trilha de navegacao hierarquica
Sidebar
Menu lateral colapsavel com icones e labels
Navbar
Barra de navegacao superior responsiva
Pagination
Controles de paginacao com estado ativo
Dropdown Menu
Menu dropdown com itens agrupados e atalhos
Context Menu
Menu de contexto com clique direito
Feedback
Toast Notification
Notificacao temporaria no canto da tela
Alert
Alerta inline com variantes de status
Progress Bar
Barra de progresso com animacao e porcentagem
Skeleton Loader
Placeholder animado durante carregamento
Spinner
Indicador de carregamento circular
Badge
Rotulo pequeno para status e contadores
Tooltip
Dica flutuante ao passar o mouse
Popover
Painel flutuante com conteudo interativo
Formularios
Input com Label
Campo de entrada com label, placeholder e estado de erro
Select / Combobox
Seletor dropdown com busca integrada
Checkbox
Caixa de selecao com label e estado checked
Radio Group
Grupo de opcoes mutuamente exclusivas
Switch / Toggle
Alternador booleano estilo iOS
Date Picker
Seletor de data com icone de calendario
Slider
Controle deslizante para valores numericos
File Upload
Area de upload com drag and drop
Overlay
Modal / Dialog
Janela modal com overlay e botoes de acao
Sheet (Side Panel)
Painel lateral deslizante estilo sheet
Drawer
Gaveta inferior para mobile e desktop
Alert Dialog
Dialog de confirmacao para acoes destrutivas
Command Dialog
Dialog de comando com busca e lista de acoes
Tooltip Overlay
Tooltip rico com conteudo interativo
Hover Card
Card flutuante ao passar o mouse em um elemento
Data Display
Table
Tabela de dados com header fixo e hover rows
Card
Card de conteudo com header, body e footer
Accordion
Lista colapsavel de perguntas e respostas
Avatar
Imagem de perfil com fallback e indicador online
Aspect Ratio
Container com proporcao fixa para midias
Scroll Area
Container com scroll customizado
Separator
Divisor visual horizontal ou vertical
Collapsible
Secao que expande e colapsa com animacao
Layout
Container
Container centralizado com largura maxima responsiva
Stack (Flex Column)
Layout vertical com espacamento consistente
Grid Responsivo
Grid que adapta colunas por breakpoint
Floating Elements
Elementos fixos e flutuantes (FAB, back-to-top)
Sticky Header
Header que fixa no scroll com blur e borda
Split View
Layout dividido em duas colunas (sidebar + conteudo)
Primitivos Avancados
Menubar
Barra de menu horizontal estilo desktop com submenus
Navigation Menu
Menu de navegacao com mega-menu dropdown e indicador
Toggle Group
Grupo de toggles exclusivos estilo segmented control
Resizable Panels
Paineis redimensionaveis com handle de arrasto
OTP Input
Input de codigo OTP com auto-focus entre campos
Carousel
Carrossel de slides com navegacao e indicadores
Calendar
Calendario interativo com selecao de datas
Kbd
Exibicao de atalhos de teclado com estilo de tecla
Sistemas Compostos
App Shell
Layout completo com header, sidebar e area de conteudo
Data Table
Tabela com ordenacao, filtro e paginacao (TanStack)
Stepper
Wizard multi-etapas com progresso visual
Timeline
Linha do tempo vertical com icones e conteudo
Spotlight
Busca global com acoes rapidas estilo Spotlight/Alfred
Rich Text Toolbar
Barra de ferramentas para editor de texto rico
Botoes Criativos
Gradient Fill
Botao com preenchimento gradiente ao hover
Border Animation
Borda animada que percorre o botao
Neon Glow
Efeito neon brilhante ao hover
Slide Reveal
Texto desliza para revelar icone
Liquid Fill
Efeito de preenchimento liquido ondulado
Magnetic Pulse
Pulso magnetico com sombra ao hover
Cards Animados
Card com Tilt
Passe o mouse para ver o efeito de perspectiva 3D.
Tilt on Hover
Card com efeito 3D tilt ao mover o mouse
Glassmorphism
Efeito vidro com blur e transparencia.
Glassmorphism
Card com efeito vidro translucido
Spotlight
Luz segue o cursor sobre o card.
Spotlight Effect
Luz que segue o cursor sobre o card
Gradient Border
Borda com gradiente conico rotacionando continuamente.
Gradient Border Animation
Borda com gradiente animado rotacionando
Hover Lift
Card sobe suavemente com sombra profunda.
Hover Lift
Card que sobe com sombra ao hover
Inputs Estilizados
Floating Label
Label que flutua para cima ao focar
Underline Only
Input minimalista apenas com borda inferior
Search com Icone
Campo de busca com icone e efeito de expansao
Material Design
Input estilo Material Design com outlined border
Glow Focus
Input com brilho colorido ao focar
Loaders
Dots Bounce
Tres pontos que saltam em sequencia
Bar Progress
Barra de progresso que se move continuamente
Circle Spin
Circulo com borda parcial girando
Pulse Ring
Anel pulsante que expande e desaparece
Skeleton Shimmer
Efeito shimmer para placeholders de conteudo
Dual Ring
Dois aneis girando em direcoes opostas
Toggle & Switch
iOS Toggle
Toggle estilo iOS com transicao suave
Day/Night Toggle
Toggle com icone de sol e lua animados
Neon Switch
Switch com efeito neon brilhante
Expand Toggle
Toggle com thumb que expande ao transicionar
Micro-Interacoes
Ripple Click
Botao com efeito ripple ao clicar
Morph Button
Botao que muda de forma ao hover
Glitch Text
Texto com efeito glitch usando clip-path
Typewriter
Texto com animacao de digitacao caracter por caracter
Shake on Error
Input com animacao de shake ao erro
Confetti Button
Botao com efeito de confetti ao clicar
Checkboxes & Radios Criativos
Animated Check
Checkbox com animacao SVG de checkmark desenhado
Bounce Checkbox
Checkbox com efeito bounce ao marcar
Fill Checkbox
Checkbox com preenchimento expandindo do centro
Gradient Radio
Radio button com preenchimento gradiente animado
Tooltips & Popovers
Tooltip Top
Tooltip classico acima do elemento com seta
Tooltip Bottom
Tooltip abaixo do elemento com seta
Tooltip Left
Tooltip a esquerda com seta lateral
Tooltip Right
Tooltip a direita com seta lateral
Rich Tooltip
Tooltip com titulo, descricao e acao
Animated Tooltip
Tooltip com animacao spring e blur
Social Login Buttons
Google Sign In
Botao de login estilo Google oficial
GitHub Sign In
Botao de login estilo GitHub
Apple Sign In
Botao de login estilo Apple
Discord Sign In
Botao de login estilo Discord
Animated Backgrounds
Gradient Mesh
Fundo com gradiente animado multi-cor
Aurora Glow
Efeito aurora boreal com blobs flutuantes
Dot Grid
Grid de pontos com gradiente radial
Noise Texture
Textura de ruido sutil estilo design system
Scroll & Navigation
Hamburger to X
Menu hamburger com animacao para X
Scroll Progress Bar
Barra de progresso fixa no topo da pagina
Back to Top
Botao flutuante de voltar ao topo
Breadcrumb Trail
Trilha de navegacao com separadores
Animated Divider
Divisor com gradiente animado
Lucide Icons — clique para copiar
import { IconName } from 'lucide-react'
Force-Directed Graphs
Force-Directed Network
D3.jsGrafo 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.
Radial Force Layout
D3.jsVariacao do force-directed com nos organizados radialmente por grupo. Util para mostrar clusters e comunidades em redes com categorias definidas.
Bubble & Pack Charts
Bubble Chart
D3.jsCirculos 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.
Treemap
D3.jsRetangulos hierarquicos aninhados, com area proporcional ao valor. Ideal para visualizar composicao de um todo, como uso de disco, orcamento ou market share.
Network Graphs (WebGL)
Sigma.js Network
Sigma.js + GraphologyRenderizacao 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.
Knowledge Graph
Sigma.js + GraphologyGrafo 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.
Bar, Line & Area Charts
Bar Chart
D3.jsGrafico de barras vertical com eixos, labels e tooltips. O chart mais usado para comparar valores entre categorias discretas.
Line Chart
D3.jsGrafico de linha com area preenchida e gradiente. Ideal para series temporais, tendencias e comparacoes de evolucao ao longo do tempo.
Donut Chart
D3.jsGrafico 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.
Containers & Cards
Padroes visuais com Tailwind classes prontas — clique para copiar
Glass Card
Translucido + backdrop-blur
bg-white/5 backdrop-blur-xl border-white/10 rounded-xlNeumorphic
Sombras duplas criando relevo
shadow-[6px_6px_12px,-6px_-6px_12px]Header Card
Topo gradiente + conteudo
overflow-hidden rounded-xl gradient-headerFieldset Frame
Borda + label flutuante legend
border-2 border-blue-500 + absolute label topLeft Accent
Borda lateral para alertas
border-l-4 border-green-500 rounded-r-xlGradient BG Card
Fundo sutil com gradiente
bg-gradient-to-br from-purple/10 to-pink/10Dashboard Layout
Grid com sidebar stats + conteudo principal
grid grid-cols-[280px_1fr] h-screenAuth Screen
Tela de login centralizada com card flutuante
min-h-screen flex items-center justify-center bg-gradient-to-brEmpty State
Placeholder visual quando nao ha dados
flex flex-col items-center gap-4 py-16 text-center text-zinc-400Error Boundary
Fallback visual para erros de componente
border border-red-500/20 bg-red-500/5 rounded-xl p-6 text-red-400Skeleton Pattern
Placeholder animado durante carregamento
animate-pulse bg-zinc-800 rounded-lgSettings Page
Pagina de configuracoes com secoes e toggles
divide-y divide-zinc-800 [&>div]:py-6 [&>div]:flex [&>div]:justify-betweenCSS Variables Theme
Sistema de tema com custom properties
:root { --bg: oklch(0.15 0.02 260); --text: oklch(0.9 0 0) }Responsive Shell
AppShell que colapsa sidebar em mobile
grid md:grid-cols-[240px_1fr] grid-cols-1 min-h-screenPricing Cards
Grid de planos com destaque no recomendado
grid grid-cols-3 gap-6 [&>.featured]:scale-105 [&>.featured]:border-blue-500Onboarding Flow
Wizard multi-step com barra de progresso
relative after:absolute after:h-1 after:bg-blue-500 after:transition-allPaleta de Cores
Variacoes da Cor
Padroes de Textura
Texturas sutis para adicionar profundidade aos seus designs.
Paletas Escuras
Paletas de cores em tons escuros para projetos parceiros.
Padroes Tipograficos
Biblioteca de fontes para projetos. Clique no icone de copia para copiar o nome da fonte.