Stepper
Indicador de progresso multi-etapa para assistentes, fluxos de pagamento e onboarding. Suporta clique para navegar entre etapas concluídas, modo linear (apenas avançar/voltar) e modo livre (pular para qualquer etapa). Os estilos visuais incluem círculos numerados, pontos minimalistas e layout de linha do tempo vertical.
Numerado
Círculos numerados horizontais conectados por linhas. Etapas concluídas mostram marcas de verificação.
███
███████ █████████ █ ████████ █████ █████████
██████
███ ██████ ██████████████████████████████ ██████ █
█ ██████ ██████████ ████████████ ███████ ████ ████████ ██
█ ██████ ██████████ ████████████ ████ ██ ████ ████████ ██
█ ██████ ██████████ ████████████ ███████ ███ ████████ █
██ █████████████ ██ █████ ███████ ██
██
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ █████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████
██████ ██████ █ █
████████████ █ █████ ███████ ████████ █ ██
█████ █ █████ ███████ ████████ ████████ ██
███████████ ██████
█
█ ██████████████████████ ████
█████ ████████████████████████ █ ███████████████████
███ ██████████████████ █████████████ ██ █████ ████████ ████████████████
██████ █ █████
█████████████ █ ████████████
█████ █ ███████████
██████████████ █ █████████████████████ ██ ██
███
████
██████████ █████████████████ ███
█████████████████████████
████████████████████████████████████ ████████████ ███
████████████████████████████ ████ ███
███████████████████████████████████ ████████████ ███
█
████ ██████████████████████
███ ███████████ █████████████
██ █████████████████████ ██ ██████ ██████ ██
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ █████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████
██████ ██████ █ █
████████████ █ █████ ███████ ████████ █ ██
█████ █ █████ ███████ ████████ ████████ ██
███████████ ██████
█
Ponto
Pontos horizontais minimalistas com rótulos abaixo. Compacto para fluxos curtos.
███
███████ █████████ █ ███ █████ █████████
██████
███ ██████ █████████████████████████ ██████ █
█ ██████ ██████ ██
█ ██████ ██████████ ██
█ ██████ █████████ ██
█ ██████ ██████ █
██ █████████████ ██ █████ ███████ ██
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ █████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████
██████ ██████ █ █
████████████ █ █████ ███████ ████████ █ ██
█████ █ █████ ███████ ████████ ████████ ██
███████████ ██████
█
████
██████████ █████████████████ ███
█████████████████████████
████████████████████████████████████ ████████████ ███
████████████████████████████ ████ ███
███████████████████████████████████ ████████████ ███
█
████ ██████████████████████
███ ███████████ █████████████
██ █████████████████████ ██ ██████ ██████ ██
█ ██████████████████████ ████
█████ ███████████████████ █ ███████████████████
███ ██████████████████ █████████████ ██ █████ ████████ ████████████████
██████ █ █████
█████████████ █ ████████████
█████ █ ███████████
██████████████ █ █████████████████████ ██ ██
███
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ █████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████
██████ ██████ █ █
████████████ █ █████ ███████ ████████ █ ██
█████ █ █████ ███████ ████████ ████████ ██
███████████ ██████
█
Vertical
Empilhados verticalmente com linhas conectoras, títulos e descrições. Estilo linha do tempo.
███
███████ █████████ █ ████████ █████ █████████
██████
███ ██████ ██████████████████████████████ ██████ █
█ ██████ ██████ ████████ ████████████ █████ █████ ███ ████ █████████ ██
█ ██████ █████████████ ████████████ ███ ███ █████████ ████ ██████ ██
█ ██████ ██████████ ████████████ █████ █████ ██ ██ ███ ████ ██
█ ██████ ████████████ ████████████ ████████ █████████ █████████████ █
██ █████████████ ██ █████ ███████ ██
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ █████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████
██████ ██████ █ █
████████████ █ █████ ███████ ████████ █ ██
█████ █ █████ ███████ ████████ ████████ ██
███████████ ██████
█
█ ██████████████████████ ████
█████ ████████████████████████ █ ███████████████████
███ ██████████████████ █████████████ ██ █████ ████████ ████████████████
██████ █ █████
█████████████ █ ████████████
█████ █ ███████████
██████████████ █ █████████████████████ ██ ██
███
████
██████████ █████████████████ ███
█████████████████████████
████████████████████████████████████ ████████████ ███
████████████████████████████ ████ ███
███████████████████████████████████ ████████████ ███
█
████ ██████████████████████
███ ███████████ ██████████
██ █████████████████████ ██ ██████ ██████ ██
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ █████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████
██████ ██████ █ █
████████████ █ █████ ███████ ████████ █ ██
█████ █ █████ ███████ ████████ ████████ ██
███████████ ██████
█
Changelog
- v1.0.0: Initial release with numbered, dot, and vertical styles
Obter Acesso Completo
Desbloqueie o código-fonte deste componente e de todos os outros. Pagamento único para acesso vitalício.
Obter Acesso Agora