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

Este painel foi montado só com os componentes do kit. Digite um CNPJ com letras abaixo — o campo aceita, calcula o dígito verificador e mostra o estado certo.

Painel de cobrançasdados de exemplo
Visão geralCobrançasNotas fiscais (desabilitada)
Receita do mês
Recebido via Pix
Em atraso
Período: este mêsUF: SPForma: PixLimpar filtros ✕
ClienteCNPJVencimentoStatusValor

Teste com a cor da sua marca

Recolore o painel acima. No Figma você troca as mesmas 6 cores: primary, onPrimary, surface, text, success, danger.

Por que isso importa agora

Receita Federal: CNPJ alfanumérico para novas inscrições a partir de julho de 2026 (IN RFB nº 2.229/2024) — exemplo oficial 12.ABC.345/01DE-35. Um campo que só aceita números recusa essa empresa no cadastro. Os CNPJs já existentes continuam válidos, por isso o campo precisa aceitar os dois formatos.

Um kit genérico 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.

Grátis x completo

Grátis (baixar): Card de KPI (4 variantes) e Status de pagamento (4 variantes) — a linha de resumo do painel completa, com plugin, .sketch e SVG.

Completo: os 6 componentes das telas de operação — Campo CNPJ/CPF (CNPJ alfanumérico, CPF, erro de DV, desabilitado), campos R$/data/CEP, alertas de NF-e e Pix, abas, filtros e interruptores. Total: 8 componentes, 30 variantes.

Como abrir no Figma

  1. No Figma, arraste o arquivo .sketch para a tela de arquivos — o Figma importa .sketch. Quem usa Sketch abre o mesmo arquivo.
  2. Para um vetor solto, abra o .svg, copie e cole no Figma: entra como vetor editável.
  3. Para recriar os conjuntos de variantes, importe o plugin pelo manifest.json (Plugins › Desenvolvimento; o nome do menu muda conforme versão e idioma).

⚠ Parte da estrutura de componentes pode ficar simplificada na importação do .sketch. O plugin recria os conjuntos de variantes.

Abrir a ferramenta completa → getreadystack.com