Processo em etapas (como funciona)

Linha do tempo de 5 etapas com progresso animado, prazo e entregável de cada fase. Deixa o projeto previsível para quem aprova o orçamento.

Ver ao vivo, com preview e manual: https://flowcoresolucoes.com.br/codigos/processo-etapas

Criado por FlowCore Soluções LTDA.

Arquivos

• src/ProcessoEtapas.tsx

Como instalar

1. Tenha um projeto React com Tailwind Já tem (Vite, Next.js, Remix)? Pule este passo. Se não, crie um em 1 minuto e adicione ./src/**/*.{ts,tsx} ao content do tailwind.config.

   npm create vite@latest minha-app -- --template react-ts
   cd minha-app
   npm install -D tailwindcss@3 postcss autoprefixer
   npx tailwindcss init -p

2. Crie o arquivo src/components/ProcessoEtapas.tsx Copie o conteúdo de src/ProcessoEtapas.tsx deste repositório. Ele é um arquivo só, sem dependência além de React.

3. Use na sua página

   import ProcessoEtapas from "./components/ProcessoEtapas";
   
   <ProcessoEtapas tema="claro" accent="#0057FF" intervalo={3500} />

4. Personalize Textos, dados e a cor de destaque (prop accent) são props com valor padrão. Troque pelos da sua marca ou ligue na sua API.

Tema e cor

Abre em tema claro. Use tema="escuro" para o escuro e accent para a cor de destaque:

<ProcessoEtapas tema="claro" accent="#0057FF" intervalo={3500} />

Licença

MIT. Pode usar em projeto pessoal ou comercial, de graça. A única condição é manter a linha “Criado por FlowCore Soluções LTDA” (ou o crédito de adaptação) onde ela está.

---

Precisa disso integrado no seu sistema? A FlowCore desenvolve sob medida.