Preços com alternância mensal/anual

Três planos em reais com alternância mensal/anual, economia calculada e plano do meio em destaque. Ancora o preço e empurra o contrato anual.

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

Criado por FlowCore Soluções LTDA.

Arquivos

• src/PrecosToggle.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/PrecosToggle.tsx Copie o conteúdo de src/PrecosToggle.tsx deste repositório. Ele é um arquivo só, sem dependência além de React.

3. Use na sua página

   import PrecosToggle from "./components/PrecosToggle";
   
   <PrecosToggle tema="claro" accent="#0057FF" descontoAnual={20} />

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:

<PrecosToggle tema="claro" accent="#0057FF" descontoAnual={20} />

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.