Componentes
73 componentes de interface, 23 efeitos de profundidade e 4 cenas WebGL. Todos rodam ao vivo aqui — abra qualquer um para ver a demo, o código e como instalar.
100 itens
Formulários
20ButtonBotão com 12 variantes (solid, gradient, glow, glass, 3d, destructive, link…), 8 tamanhos, loading, ícones e asChild.InputCampo de texto com 7 variantes (default, soft, outline, underline, glass, glow, 3d), 3 tamanhos e estado aria-invalid.TextareaÁrea de texto com as mesmas variantes do Input.LabelLabel acessível (Radix) ligado ao controle por htmlFor.SwitchSwitch (Radix) com 5 variantes (default, success, gradient, glow, 3d) e 3 tamanhos.SelectSelect (Radix) com gatilho em 6 superfícies, 3 tamanhos, separador e rolagem.CheckboxCheckbox (Radix) com 3 tamanhos, quadrado/círculo e estado indeterminado.Radio GroupGrupo de rádio (Radix) com tamanhos e RadioGroupCard (opção em cartão).SliderSlider de valor ou faixa (Radix).RatingEstrelas de avaliação: exibição fracionada ou interativa por teclado.Tags InputCampo de tags: digite + Enter para adicionar, Backspace para remover.ToggleBotão de estado (aria-pressed) e ToggleGroup single/multiple com navegação por setas.Button GroupAgrupa botões/inputs colados (horizontal ou vertical), com separador e texto de prefixo.ComboboxSelect pesquisável (Popover + Command), seleção única ou múltipla com chips.Copy ButtonCopia texto p/ a área de transferência e mostra ✓ com anúncio acessível.FieldAgrupa label, controle, descrição e erro com ids/ARIA automáticos (react-hook-form/zod).File UploadDropzone acessível com validação de tipo/tamanho, preview de imagem e lista de arquivos.Input GroupInput com addons na mesma borda: ícones, prefixos (https://), Kbd e botões.Input OTPCódigo de verificação (OTP) em casas separadas, com colar, setas e autocomplete one-time-code.Number InputCampo numérico com botões −/+, min/max/step, precisão e formatação Intl.
Overlays
11DialogModal (Radix) com 5 tamanhos, 5 superfícies, animação de entrada/saída e botão fechar opcional.TooltipTooltip (Radix) com 5 superfícies e o atalho SimpleTooltip.Dropdown MenuMenu suspenso (Radix): itens, checkbox/radio, submenus, atalhos e item destructive.PopoverPopover (Radix) com 5 superfícies, seta opcional e animação pelo lado de abertura.SheetPainel lateral (top/right/bottom/left) com tamanhos e animação de deslizar.ToastNotificações estilo Sonner: 6 posições, toast.success/error/warning/info, ações e pausa no hover.Alert DialogDiálogo de confirmação (Radix) com ações Confirmar/Cancelar no estilo do Button.CommandPaleta de comandos (cmdk) com busca fuzzy, grupos, atalhos e CommandDialog.Context MenuMenu de clique direito (Radix) com a mesma API do DropdownMenu.DrawerGaveta (inferior por padrão) com alça e arrastar para fechar.Hover CardPrévia rica ao passar o mouse ou focar (Radix), com seta opcional.
Layout
11CardCard com 9 superfícies, padding independente, interactive, asChild e CardAction no cabeçalho.SeparatorSeparador horizontal/vertical com 5 variantes (solid, gradient, glow, dashed, glass).TabsAbas (Radix) com 5 estilos (pill, underline, outline, glass, 3d), fullWidth e orientação vertical.AccordionAcordeão (Radix) com 4 estilos (separated, contained, line, glass) e animação de altura.Scroll AreaÁrea de rolagem com scrollbar estilizada (Radix).SectionSection, Container e SectionHeading para montar páginas com ritmo consistente.SidebarSidebar com itens e labels + AppShell para layout de dashboard.Aspect RatioMantém a proporção (16/9, 1, 4/3…) via CSS aspect-ratio.CarouselCarrossel sem dependências (scroll-snap) com setas, indicadores, loop e autoplay.CollapsibleMostra/esconde uma região (Radix) com animação de altura.TypographyHeading/Text com escala fluida e tons, InlineCode e Prose (HTML de markdown/CMS).
Dados e exibição
19SkeletonPlaceholder de carregamento com shimmer.BadgeBadge/chip com 11 variantes, 3 tamanhos e ponto de status.Data TableTabela de dados com busca, ordenação, seleção e colunas configuráveis.AlertCallout de status (info, success, warning, destructive, glass).AvatarAvatar (Radix) com tamanhos, formato, anéis e AvatarGroup com contador +N.BreadcrumbTrilha de navegação acessível (aria-current no último item).Empty StateEstado vazio para listas e buscas sem resultado.KbdTecla/atalho de teclado com 5 variantes.PaginationPaginação acessível com elevação.ProgressBarra de progresso (Radix) com glow e gradiente.SpinnerIndicador de carregamento com 5 variantes (ring, dots, bars, pulse, gradient).StatCard de KPI com número grande, variação e elevação/tilt.TableTabela com 6 variantes (default, clean, striped, bordered, glass, 3d).Theme SwitcherSeletor dos 33 temas (data-theme) + light/dark.TimelineLinha do tempo com 5 estilos.StepsStepper com 5 estilos e conectores.MeterBarra semântica de medida (uso de disco, quota) com tons.Code BlockBloco de código com cabeçalho, botão copiar e 5 variantes.BlockquoteCitação com autor/cargo e 5 variantes.
Datas
2Gráficos
1Blocos de página
9NavbarBarra de navegação com marca, links e ações.HeroHero de landing: eyebrow, título com gradiente, subtítulo, ações e 6 fundos.CTAFaixa de chamada para ação (5 variantes).Feature GridGrade de features com cards de ícone (5 variantes).PricingCards de plano/preço e grade de pricing (5 variantes).FooterRodapé com marca, colunas de links e linha inferior.BannerFaixa de anúncio no topo, fixa e dispensável (lembra no localStorage).Logo CloudFaixa de logos de clientes em grade ou marquee infinito.TestimonialCards de depoimento com nota e avatar + grade masonry.
Efeitos
23Também no template SaaS Pro. Ver templates Pro →
Card 3DTilt 3D com glare que segue o cursor.SpotlightGradiente que segue o cursor.Shine BorderBorda com brilho varrendo em loop perfeito.Animated Shiny TextTexto com brilho varrendo o glifo em loop perfeito.Aurora BackgroundFundo aurora: dois blobs de luz desfocados derivando em sentidos opostos.Glow OrbOrbe de brilho decorativo p/ backgrounds — cores tokenizadas, blur GPU (`transform`/`opacity` apenas) e pulso que respeita `prefers-reduced-motion`.MarqueeLetreiro infinito (logos, depoimentos, cards).Border BeamFeixe de luz percorrendo a borda em loop.Shimmer ButtonCTA com faixa de brilho atravessando em loop.Blur FadeRevela o conteúdo ao entrar na viewport (opacity + translateY + blur).Number TickerContagem animada até `value` com easing exponencial.RippleOndas concêntricas emanando do centro (fundo de CTA, hero, avatar "ao vivo").Layered CardCard em camadas com parallax 3D real (`translateZ` por camada).Glass CardCard glass com profundidade real: blur, borda interna luminosa, sombra em escala física e conteúdo elevado em Z.Moving BorderBorda rotativa estilo Aceternity (conic-gradient animado via `@property`).Orbiting CirclesItens orbitando em torno de um centro (Magic UI `OrbitingCircles`).MeteorsChuva de meteoros em background (Magic UI / Aceternity).Perspective GridChão 3D em perspectiva infinita (grid que rola para o usuário).Bento GridGrid bento com elevação 3D e tilt por célula (estilo Aceternity).Animated BeamFeixe animado entre dois nós (Magic UI `AnimatedBeam`).Hero ParallaxHero com parallax 3D no scroll (estilo Aceternity `HeroParallax`).Sticky ScrollSeção sticky com troca de destaque por scroll (Aceternity `StickyScroll`).FloatWrapper que flutua em Y (loop CSS leve) — use em ícones, badges 3D, mockups.
3D (WebGL)
4Hero SceneCena hero pronta: meshes flutuantes, partículas e câmera que segue o ponteiro.Aura CanvasCanvas do React Three Fiber com defaults Aura: dpr limitado, fundo transparente e fallback.Floating MeshMesh 3D que flutua e gira devagar — box, sphere, torus ou icosahedron.Particle FieldNuvem de partículas com deriva lenta para fundos de hero.