Dashboard UI Kit para SaaS brasileiro — CNPJ alfanumérico 2026

Desde julho de 2026 a Receita Federal atribui CNPJ com letras a novas inscrições. A regra está na Instrução Normativa RFB nº 2.229/2024, e o exemplo oficial é 12.ABC.345/01DE-35. Os CNPJs antigos continuam válidos. Isso quer dizer que o seu painel passa a receber dois formatos no mesmo campo.

Se você desenha um SaaS, um ERP, uma fintech ou um emissor de NF-e para empresas brasileiras, o campo de cadastro de cliente é o primeiro lugar onde isso aparece. Um campo com máscara só numérica recusa a empresa aberta ontem. O cliente não consegue terminar o cadastro, e o seu time descobre pelo suporte.

O problema não é só de código. O front-end implementa o que está no Figma. Se o arquivo de design mostra um campo 00.000.000/0000-00 com teclado numérico e nenhum estado de erro, é isso que vai para produção.

Montamos um dashboard UI kit para essa tela. São 8 componentes e 30 variantes, todos em português e com os formatos brasileiros: R$ com vírgula decimal, datas DD/MM/AAAA, CEP 00000-000, CPF 000.000.000-00 e CNPJ alfanumérico.

O Campo CNPJ/CPF tem quatro estados: CNPJ alfanumérico, CPF, erro de dígito verificador e desabilitado. O erro não é enfeite. O dígito verificador continua sendo módulo 11; para as letras, usa-se o código ASCII menos 48, então A vale 17. Conferimos no exemplo oficial: 12ABC34501DE gera o DV 35. Na página grátis do kit você digita 12.ABC.345/01DE-36 e o campo mostra o erro e o DV calculado, 35.

O que vem no kit: Card de KPI (receita do mês, recebido via Pix, em atraso, carregando), Status de pagamento (Pix pago, boleto vencido, aguardando, estornado), Campo CNPJ/CPF, Campos de valor, data e CEP, Alertas (NF-e autorizada, NF-e rejeitada, aviso de CNPJ com letras, cobrança Pix gerada), Abas do painel, Filtros e Interruptor. Cada variante é um componente separado, e o plugin combina as variantes em conjuntos dentro do Figma.

Os arquivos são três: um plugin Figma (manifest.json e code.js), um arquivo .sketch e um SVG por variante. No Figma, você arrasta o .sketch para a tela de arquivos. Para um vetor solto, copia o SVG e cola. Para recriar os conjuntos de variantes, importa o plugin pelo manifest.json. Os nomes dos menus mudam conforme a versão e o idioma do Figma. Na importação do .sketch, parte da estrutura de componentes pode ficar simplificada; o plugin recria os conjuntos. Quem usa Sketch abre o mesmo arquivo.

A sua marca entra pelas cores. O kit usa 6 tokens em HEX: primary, onPrimary, surface, text, success e danger. Você troca os seis e o painel inteiro muda. Na página grátis há um seletor de cor que faz o mesmo no navegador, antes de você baixar qualquer coisa.

A parte grátis é completa para um trabalho: a linha de resumo do painel. Card de KPI e Status de pagamento, 8 variantes, com plugin, .sketch e SVG. Depois de montar o resumo, falta o resto da tela: o formulário de cadastro com CNPJ/CPF, os campos de valor e data, os alertas de NF-e, as abas, os filtros e os interruptores. Isso é a versão completa, pagamento único, não assinatura.

Por que não um kit genérico? Porque ele não traz um campo CNPJ que aceite letras nem o estado de erro do dígito verificador. Você desenharia cada estado à mão. E um chatbot não entrega componentes com variantes dentro do Figma.

Teste antes: abra a página, digite o CNPJ de um cliente seu e veja o estado que o campo mostra.