ProdutosCursosEmpresaJobsEntrar no JobsVer produtos →

os componentes BR que você sempre reescreve.

8 componentes React prontos pro mercado brasileiro. CPF, CNPJ, CEP, PIX, banco — com validação, máscara e TypeScript. Copia, cola, funciona.

0componentes
0deps pesadas
0%TypeScript
// de novo isso
// de novo isso

Todo projeto BR começa com o mesmo input de CPF.

Você já escreveu validação de CPF umas trinta vezes. E de CNPJ. E a máscara de telefone. E aquele autocomplete de CEP que chama a ViaCEP. Cada projeto novo, a mesma meia hora copiando de um projeto velho, ajustando o regex, testando o dígito verificador de novo.

São componentes pequenos. Mas somados, é um dia inteiro de trabalho que não diferencia nada — todo mundo precisa, ninguém quer fazer.

// projeto novo, mesmo problema
CPF '111.111.111-11' — passou na validação
CEP sem resposta — cliente desistiu do checkout
telefone — regex rejeita celular com 9 dígitos
cartão — Luhn não implementado
// a soma dos pequenos
// a soma dos pequenos

Não é um componente. São oito, em todo projeto, pra sempre.

Um input de CPF com validação você resolve em 20 minutos. Mas é CPF, CNPJ, CEP, telefone, seletor de banco, botão PIX, cartão com Luhn... E aí você descobre que o dígito verificador do CNPJ tem um caso de borda que você esqueceu, e o cliente reclama que o CEP da cidade dele não preenche.

Manutenção infinita de código que devia ser commodity.

0h

por projeto, reescrevendo os mesmos inputs

R$ 67 — uma vez, use em quantos projetos quiser

// a caixa de ferramentas
// a caixa de ferramentas

Os 8 que todo SaaS brasileiro precisa. Resolvidos.

Input CPF/CNPJ

Máscara + validação de dígito automática

CEP com ViaCEP

Digita o CEP, preenche o endereço sozinho

Telefone BR

Máscara com DDD, fixo e celular

Seletor de banco

20 bancos com código e logo

PIX Button

Gera QR Code e copia-e-cola

Input de cartão

Bandeira + validação Luhn

Todos em TypeScript

Tipados, sem `any`

Zero dependências pesadas

Só React e Tailwind

// componente real — valida o dígito verificador

tente: 111.111.111-11 (aceito pela maioria das libs) vs 529.982.247-25

// porque importa
// porque importa

Validação errada de CPF é cliente perdido no checkout.

Um regex de CPF que aceita 111.111.111-11 deixa fraude passar. Um CEP que não preenche faz o cliente desistir da compra. Esses componentes não são enfeite — são a diferença entre um formulário que converte e um que trava na hora de pagar.

Testados com os casos de borda que você só descobre em produção.

// "acho um no npm"
// "acho um no npm"

Acha. Cinco, na verdade — todos abandonados.

A maioria das libs BR do npm tem o último commit de 2021, dependências quebradas e zero suporte a TypeScript moderno. Aqui é código limpo, atual, que você lê e entende.

Pagamento único, seu pra sempre, use em quantos projetos quiser.

// oferta
// oferta
R$ 67

Pagamento único. Acesso vitalício. Os 8 componentes, atualizações incluídas.

Comprar agora — R$ 67

acesso imediato após a compra · combina com o Boilerplate — veja o combo

Acesso entregue por e-mail em até 15 minutos após a confirmação do pagamento.

Para de reescrever o input de CPF. Foca no produto.