Shadcn Dashboard

Shadcn Dashboard - Construtor de painel administrativo shadcn pronto para produção com mais de 200 blocos, mais de 400 componentes e prompts de IA para React e Next.js

Lançado hoje

Shadcn Dashboard Kit é um kit de desenvolvimento de painel administrativo completo e pronto para produção, feito para React, Next.js, TypeScript e Tailwind CSS, com mais de 200 blocos de interface pré-construídos, mais de 400 componentes e prompts de IA integrados. Ele ajuda desenvolvedores frontend e equipes a construir interfaces de administração escaláveis, ferramentas internas e dashboards de SaaS 3 vezes mais rápido, com autenticação pré-configurada, tabelas de dados e gráficos interativos prontos para deploy em produção.

3VisualizaçõesProgramação IAFreemiumLow-CodeNo-CodeGeração de CódigoVS CodeCódigo Aberto

Recursos Principais

O Shadcn Dashboard Kit inclui mais de 200 blocos de interface prontos para produção e mais de 400 componentes, testados em diferentes navegadores e dispositivos para eliminar o trabalho comum de depuração que vem com a geração de interface a partir de prompts brutos de LLM. Todos os componentes são construídos sobre primitivos acessíveis e sem estilização do Base UI, com controle total de personalização de design por meio de variáveis CSS e configuração do Tailwind.

Capacidades do Construtor de IA

O Construtor de Dashboard de IA integrado transforma prompts em linguagem simples em dashboards completos prontos para produção em poucos segundos. Ele gera código limpo de Next.js 16 e Shadcn UI com visualizações interativas do Recharts, tabelas de dados do TanStack, predefinições de tema da marca, suporte a modo escuro e código TypeScript exportável. O construtor de IA também suporta deploy com 1 clique e sincronização com o GitHub.

Integração com Servidor MCP

Você pode conectar o servidor do Model Context Protocol incluso a editores de código de IA, incluindo Cursor, Claude Code, Cline, Windsurf e v0. O servidor indexa todo o registro de componentes, para que seu assistente de IA tenha consciência completa do espaço de trabalho, e possa gerar código de interface preciso e consistente que corresponda à estrutura do seu projeto existente sem a necessidade de colar contexto manualmente.

Add-ons e Integrações Suportadas

O kit vem com ferramentas de desenvolvedor populares pré-configuradas, prontas para uso imediato:

  • Integrações de autenticação Supabase Auth + DB, Clerk e NextAuth

  • TanStack Table com ordenação, filtragem, paginação e virtualização integradas

  • Zod para validação de formulários com segurança de tipos

  • Animações otimizadas de desempenho do Framer Motion

  • Dnd kit para componentes de arrastar e soltar acessíveis

  • SWR para busca de dados com cache eficiente

  • i18n React para suporte a vários idiomas

  • Editor de texto rico Tiptap com suporte a markdown

Variações de Dashboard Disponíveis

Templates de dashboard pré-construídos estão incluídos para casos de uso comuns:

  • Dashboard de análise

  • Dashboard de comércio eletrônico

  • Dashboard de SaaS com IA

  • Dashboard de gerenciamento escolar

  • Dashboard de gerenciamento de saúde

Você pode alternar entre vários modos de layout, incluindo navegação horizontal, barra lateral recolhível, barra lateral mini compacta e modo RTL (direita para esquerda). Predefinições de tema dinâmicas, incluindo Lyra, Nova, Maia, Mira, Luma, Vega e Rhea, estão disponíveis para alterar a estética global do design com um clique.

Usage Workflows

Você pode usar o template completo do Next.js para começar um novo projeto do zero, ou usar o CLI oficial para instalar blocos individuais diretamente no seu projeto existente. O CLI configura automaticamente os caminhos de importação e instala todas as dependências necessárias para os componentes selecionados. Cada componente e bloco tem um prompt de IA pré-construído pronto para uso, que você pode colar no ChatGPT, Claude ou outros LLMs para gerar extensões ou modificações de interface compatíveis que seguem as convenções de arquitetura do kit. Os arquivos estruturados .agents.md dão ao seu assistente de IA visibilidade completa da estrutura do seu código, para reduzir explicações repetidas e o desperdício desnecessário de tokens.

Direitos de Uso

Blocos e componentes gratuitos podem ser usados em projetos pessoais, comerciais, de SaaS e para clientes. Todos os planos pagos incluem propriedade total do código-fonte, sem royalties recorrentes ou taxas baseadas em usuários, e permitem o uso em produtos SaaS comerciais, ferramentas internas e trabalhos para clientes. Os planos Pro, Teams e Enterprise também incluem o kit de design completo correspondente para Figma.

Comentários

Comentários

Ainda não há comentários. Seja o primeiro a compartilhar sua opinião!