Overview

Todos os Componentes SW

84 componentes organizados em 10 categorias — CSS, JS e Backend PHP. Clique em qualquer card para acessar a documentação completa.

Foundation

Layout & Grid

Sistema de grid flexível de 12 colunas com classes semânticas e ultra-curtas.

CSS
Cores

24 famílias de cores com tokens CSS. Paleta semântica completa via variáveis.

CSS
Tipografia

Escala tipográfica, pesos, alturas de linha e classes de texto utilitárias.

CSS
Espaçamento

Classes utilitárias para margin, padding e gap com escala consistente.

CSS
Wrap & Break

Controle de quebra de linha, overflow e white-space para qualquer layout.

CSS

Componentes SW

Button

Botões com variantes de cor, tamanho, forma, ícone e estados. Atributo [sw-btn].

CSS + JS
Badge

Rótulos e contadores para notificações, status e categorias.

CSS
Cards

11 variações de card — clássico, glass, filled, outlined, stat, alert e mais.

CSS
Tabela

Tabelas responsivas com hover, striped, bordered e células com badges.

CSS
Avatar

Avatares circulares com iniciais, imagem, status e tamanhos configuráveis.

CSS
Chip

Tags compactas para filtros, seleção múltipla e categorização visual.

CSS
Breadcrumb

Trilha de navegação hierárquica com separadores e estado ativo.

CSS
Divider

Separadores visuais horizontais e verticais com texto e variantes.

CSS
Progress

Barras de progresso animadas, circulares e com gradiente.

CSS + JS
Skeleton / Loader

Placeholders animados para estados de carregamento de conteúdo.

CSS
Stepper

Indicador de etapas para formulários multi-step e fluxos guiados.

CSS + JS
Timeline

Linha do tempo vertical para logs, históricos e eventos cronológicos.

CSS
Formulários Base

Inputs, selects, checkboxes e radios estilizados com estados de validação.

CSS
Utilitários CSS

Classes utilitárias de display, flex, posição, cursor e visibilidade.

CSS
Ícones (Fonte)

1045 ícones via classe CSS <i class="swi-nome">, sem fontes externas.

CSS
Ícones SVG

2658 ícones IconPark — use via <img>, sw-icon ou SVG inline.

CSS + JS
Bordas & Curvas

Border-radius, border-width e estilos de borda via classes utilitárias.

CSS
Sombras & Elevação

Box-shadow em múltiplos níveis de elevação — de flat a glow colorido.

CSS
Object-Fit

Controle de preenchimento de imagens e vídeos dentro de containers.

CSS
Zoom & Scale

Transformações de escala e zoom via hover com transições suaves.

CSS

Interface JS

Navbar

Barra de navegação responsiva com glass/gradiente, shrink ao rolar, dropdown e toggle mobile.

JS
Modal

Diálogos flutuantes com focus trap, ESC, glass e drawer lateral.

JS
Panel (Drawer)

Painel deslizante lateral para ações contextuais e filtros avançados.

JS
Lightbox

Visualizador de imagens em tela cheia com galeria e navegação por teclado.

JS
Custom Select

Select estilizado com busca, grupos, ícones e seleção múltipla.

JS
Sidebar

Menu lateral recolhível com grupos, estado salvo e responsividade.

JS
Tabs

Abas com transição animada, variantes pill/underline e lazy load.

JS
Accordion

Conteúdo expansível com animação suave e suporte a múltiplos abertos.

JS
Dropdown

Menus suspensos inteligentes com posicionamento automático e submenus.

JS
Tooltip

Dicas flutuantes com posicionamento em 4 direções e delay configurável.

JS

Mídia & Display

Slider

Slider de imagens com autoplay, dots, arrows e transições customizáveis.

JS
Text Carousel

Carrossel de textos e depoimentos com transição fade e autoplay.

JS
Typewriter

Efeito de digitação automática com loop, cursor e velocidade configurável.

JS

Scroll

Scroll Animações

Animações ativadas ao entrar no viewport via Intersection Observer.

JS
Pagination

Paginação dinâmica com ellipsis, first/last e integração com AJAX.

JS
ScrollSpy Nav

Destaque automático do item de menu conforme a seção visível na tela.

JS
Infinite Scroll

Carregamento automático de conteúdo ao atingir o fim da página.

JS
Voltar Topo

Botão flutuante que aparece após scroll com smooth scroll ao topo.

JS
Preloader

Tela de carregamento animada que some automaticamente ao carregar a página.

JS

Forms JS

Validação

Validação de formulários em tempo real com mensagens e regras customizáveis.

JS
Máscara Input

Formatação automática de CPF, CNPJ, telefone, CEP e máscaras customizadas.

JS
Material Input

Input com label flutuante, máscara e validação integradas.

JS
File Upload

Upload com drag & drop, preview de imagens, progress bar e validação.

JS
Text Limit

Contador de caracteres para inputs e textareas com limite visual.

JS
Auto Textarea

Textarea que cresce automaticamente conforme o conteúdo digitado.

JS

Efeitos JS

Parallax

Efeito parallax em elementos e backgrounds com velocidade configurável.

JS
Rating / Stars

Avaliação por estrelas interativa com meia estrela e leitura de valor.

JS
Draggable

Elementos arrastáveis com snap, limites de área e callbacks de drop.

JS

Animações & SW-FX

Animações Nativas

Biblioteca de animações CSS prontas — fade, slide, bounce, pulse e mais.

CSS + JS
SW-FX

Scramble, split, scrub, marquee, tilt 3D e magnetismo — efeitos nativos sem GSAP.

JS
Transições Nativas

Transições animadas entre páginas com efeitos de fade e slide.

JS
View Transition

Transição de página nativa via @view-transition CSS — sem overlay, sem JS orquestrando.

CSS
Efeitos Base

29 efeitos pré-programados via sw-premium-animate, com controle de tempo, física e repetição.

JS + GSAP
Stagger Cascata

Anima filhos em cascata com atraso progressivo via sw-premium-stagger — sem escrever loop.

JS + GSAP
Scroll Avançado

Scrub, parallax, pin com timeline, batch e contadores reativos ao scroll via ScrollTrigger.

JS + GSAP
Vídeo Scrub

Vincula o tempo do vídeo ao scroll da página, com pin automático e velocidade configurável.

JS + GSAP
Texto Animado

Split por chars/words/lines, scramble aleatório e typewriter via atributos sw-premium-*.

JS + GSAP
SVG Animado

Revela contornos com draw-svg e move elementos por caminhos com MotionPathPlugin.

JS + GSAP
UI Interativa

Drag, Flip e Observer fullpage via Draggable, Flip e Observer Plugin do GSAP.

JS + GSAP
Mouse Interativo

Magnetismo, tilt 3D, marquee e cursor customizado — GSAP puro, sem plugins premium.

JS + GSAP
Transições Premium

Roteador PJAX com transições de página animadas via GSAP — slide, flip, wipe e mais.

JS + GSAP

SW Módulos

SWCode

Highlight de sintaxe nativo com suporte a HTML, CSS, JS, PHP e SQL.

JS Module
SWDay

Gerenciador de tema dark/light com detecção de preferência do sistema.

JS Module
SWAjax

Sistema de requisições AJAX declarativas via atributos HTML.

JS Module
SWAlert

Sistema de notificações toast — sucesso, erro, info e alerta com fila.

JS Module
Table (AJAX)

Tabela dinâmica com ordenação, filtros, paginação e carregamento AJAX.

JS Module
Editor de Texto

Editor rico contentEditable com toolbar, HTML view e tela cheia.

JS Module
Content

Busca JSON e renderiza via <template> com interpolação {{campo}}.

JS Module
Cropper

Recorte de imagem em canvas nativo (sem libs externas) antes do upload.

JS Module
LGPD Consent

Banner de consentimento de cookies compatível com a LGPD.

JS Module
Cotação

Widget de cotação de moedas em tempo real via API de câmbio.

JS Module
Instagram

Galeria de posts do Instagram integrada via API com layout responsivo.

JS Module

Backend PHP

PHP Core

Visão geral do framework — Router, Controller, Model, QueryBuilder e Validator.

PHP
PHP Setup

Instalação, estrutura de pastas, autoload e tabelas SQL base.

PHP
PHP Router

Rotas GET/POST/PUT/DELETE, grupos, middlewares e parâmetros dinâmicos.

PHP Core
PHP Controller

Controller e CrudController — acesso a Request, View e helpers globais.

PHP Core
PHP CRUD

Exemplo completo — do SQL à view, com Model, Controller, rotas e Ajax.

PHP Core
PHP Auth

Login, logout, sessão, "lembrar-me" e verificação de autenticação.

PHP Auth
PHP RBAC

Controle de acesso por papéis — permissões, wildcard e guards.

PHP Auth