Ir para o conteúdo principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente Etapas

Última atualização:

Etapas Tailwind CSS somente CSS para assistentes de várias etapas e indicadores de progresso. Layout horizontal e vertical, variantes de cores por etapa. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.

Os componentes de etapas visualizam processos, guias ou fluxos de trabalho de várias etapas, exibindo estágios sequenciais. Construídas com HTML semântico e layouts flexíveis, as etapas mostram o progresso por meio de assistentes de configuração, tutoriais e procedimentos complexos. O sistema de etapas Frutjam oferece suporte a vários tamanhos, cores, estruturas e estados de conclusão – ideal para assistentes de formulário, guias de instalação e acompanhamento de progresso.

Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.

Aula Tipo Descrição
stepsBaseContêiner para uma lista ordenada de etapas
stepModificadorItem de etapa individual com um marcador numerado
steps-horizontalModificadorLayout horizontal (padrão)
steps-verticalModificadorLayout empilhado verticalmente
step-primaryCorMarcador de cor do tema principal
step-secondaryCorMarcador de cor do tema secundário
step-accentCorMarcador de cor de tema de destaque
step-neutralCorMarcador de cor de tema neutro
step-infoCorMarcador de cores semântico de informações
step-successCorMarcador de cor semântico de sucesso
step-warningCorMarcador de cor semântico de aviso
step-errorCorErro no marcador de cor semântica

Uso Básico

1
2
3
4
5
<ul class="steps">
  <li class="step">Shipping</li>
  <li class="step step-primary">Payment</li>
  <li class="step">Confirmation</li>
</ul>

1
2
3
4
5
<ul className="steps">
  <li className="step">Shipping</li>
  <li className="step step-primary">Payment</li>
  <li className="step">Confirmation</li>
</ul>

Layout de etapas

html 
1
2
3
4
5
<ul class="steps steps-horizontal">
  <li class="step">Step 1</li>
  <li class="step step-primary">Step 2</li>
  <li class="step">Step 3</li>
</ul>

Cores dos passos

html 
1
2
3
4
5
6
7
8
9
<ul class="steps">
  <li class="step step-primary">Primary</li>
  <li class="step step-secondary">Secondary</li>
  <li class="step step-accent">Accent</li>
  <li class="step step-info">Info</li>
  <li class="step step-success">Success</li>
  <li class="step step-warning">Warning</li>
  <li class="step step-error">Error</li>
</ul>

Etapas Verticais

html 
1
2
3
4
5
6
<ul class="steps steps-vertical">
  <li class="step step-primary">Account setup</li>
  <li class="step step-primary">Personal info</li>
  <li class="step">Payment method</li>
  <li class="step">Confirmation</li>
</ul>

Etapas com descrição

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div class="space-y-4">
  <div>
    <ul class="steps w-full">
      <li class="step step-primary">Register</li>
      <li class="step step-primary">Verify Email</li>
      <li class="step">Choose Plan</li>
      <li class="step">Complete</li>
    </ul>
    <div class="grid grid-cols-4 gap-4 mt-4 text-xs text-center">
      <div>Create account</div>
      <div>Check your inbox</div>
      <div>Select pricing</div>
      <div>Get started</div>
    </div>
  </div>
</div>

Etapas responsivas

html 
1
2
3
4
5
6
<ul class="steps w-full">
  <li class="step step-primary">Order placed</li>
  <li class="step step-primary">Processing</li>
  <li class="step">Shipped</li>
  <li class="step">Delivered</li>
</ul>

Usando Claude Code, Cursor ou outro editor de IA?

Cherry MCP fornece ao seu editor de IA os nomes exatos das classes Passos e a estrutura sob demanda. Chega de aulas alucinadas.

Experimente o Cherry MCP