· ReadyStack
Exemplo resolvido
Números reais desta ferramenta, linha por linha.
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.
15 segundos — o que ela faz de verdade
Perguntas frequentes
O que este dashboard UI kit faz?
Entrega 8 componentes e 30 variantes para montar um painel SaaS brasileiro no Figma: cards de KPI em R$, status Pix e boleto, campo CNPJ/CPF com CNPJ alfanumérico e erro de dígito verificador, campos de valor, data e CEP, alertas de NF-e, abas, filtros e interruptores. Vem como plugin Figma, arquivo .sketch e SVG.
Para quem é este kit de painel?
Para designers de produto e front-ends de SaaS, ERP, fintech e emissores de NF-e que cadastram empresas brasileiras. Desde julho de 2026 a Receita Federal atribui CNPJ com letras a novas inscrições (IN RFB nº 2.229/2024); se o seu formulário ainda aceita só números, este kit mostra o estado certo.
Por que não usar um kit gratuito da Community?
Um kit genérico não traz um campo CNPJ que aceite letras nem o estado de erro do dígito verificador, e costuma vir com moeda e data em formato americano. Você teria de desenhar cada estado à mão. Um chatbot não entrega componentes com variantes dentro do Figma.
O que eu levo de graça?
Card de KPI (4 variantes) e Status de pagamento (4 variantes): a linha de resumo do painel inteira, em R$ e português, com plugin, .sketch e SVG. Na página você troca a cor da marca e testa um CNPJ ou CPF no navegador antes de pagar. A versão completa é pagamento único, não assinatura.
Quanto custa comparado com fazer sozinho?
A versão completa custa US$ 168, pagamento único. A alternativa é desenhar os 30 estados à mão e descobrir a regra da Receita sozinho. A âncora que usamos é a regra, não um preço inventado: CNPJ alfanumérico para novas inscrições desde julho de 2026, exemplo oficial 12.ABC.345/01DE-35.
Pergunte sobre esta ferramenta
Uma pergunta, respondida por quem a construiu. Email só se quiser a resposta por correio.