Template de site

Next Shadcn Admin Dashboard

Painel administrativo em Next.js e shadcn/ui: múltiplos layouts de dashboard, telas de autenticação, tabelas de dados e presets de temas.

Painel · Grátis

Abrir demonstração Ver repositório do código

Páginas

Capturas da demonstração, página por página. Role dentro de cada página para vê-la inteira.

Template de site Next Shadcn Admin Dashboard, página /dashboard/default, parte 1 — /dashboard/defaultOpen Source Business Dashboard with shadcn/ui

Análise do design

Uma leitura feita por IA do design deste template: cores, tipografia, espaçamento, seções e detalhes marcantes. O Ottermind parte dela quando você usa o template.

Visão geral: painel de administração, profissional, densidade média, claro
Paleta: fundo #ffffff; superfícies [#fafafa, #171717, #737373, #d4d4d4]; texto #0a0a0a; texto suavizado #737373; primário #000000; acentos []
Tipografia: títulos Geist, 500, caixa de frase; corpo Geist, 14px; escala h2: 16px
Forma e espaçamento: raio de botões/cartões 8px, sem bordas, sombras sutis, espaçamento entre seções 24px, largura do conteúdo 1200px
Seções (de cima para baixo): Cabeçalho — layout horizontal, logotipo à esquerda, barra de pesquisa centralizada, controles de usuário alinhados à direita, fundo #ffffff
Barra lateral — navegação vertical com ícones e rótulos, redimensionável, fundo #fafafa, texto escuro
Cartões KPI — grade de 4 cartões, cada um com ícone, métrica, indicador de tendência e subtítulo, fundo #fafafa
Atividade do cliente — gráfico de linhas com eixo temporal, legenda, filtros em dropdown, fundo #ffffff
Tabela de clientes — tabela de dados com colunas ordenáveis, caixas de seleção, indicadores de status e controles de exportação/ordenação, fundo #ffffff
Detalhes marcantes: Cantos arredondados em todos os cartões e botões
Sombras sutis sob os cartões
Emblemas de status com pontos coloridos (verde, laranja, cinza)
Estados de passagem do mouse nas linhas da tabela
Layout compacto e denso com espaçamento consistente
Tipografia limpa usando a família de fontes Geist
Outras páginas: /dashboards: vários layouts de painel
/auth: telas de login e registro
/tables: tabelas de dados com filtragem e paginação
/theme: predefinições de tema e opções de personalização

Detalhes do template

Categoria: Painel
Autor: arhamkhnz
Publicado em: 21st.dev
Preço: Grátis

Dashboard
Admin Panel

Design original de arhamkhnz, publicado no 21st.dev. O Ottermind não copia o código do template: ele cria um site novo a partir do briefing.

O briefing de onde o Ottermind parte

Ele abre no Studio como rascunho — acrescente sua marca, público e páginas antes de enviar.

Crie um site de dashboard inspirado no template "Next Shadcn Admin Dashboard". Briefing de referência: Painel administrativo em Next.js e shadcn/ui: múltiplos layouts de dashboard, telas de autenticação, tabelas de dados e presets de temas. Estilo e funcionalidades a refletir: Painel Administrativo. Use copy e imagens originais para minha marca em vez do conteúdo placeholder do referência.

Como usar este template

1
Clique em “Usar este template” para abri-lo no Ottermind Studio com o briefing preenchido.
2
Acrescente ao briefing sua marca, público, páginas e conteúdo.
3
O Ottermind cria um site novo inspirado neste design — continue ajustando pelo chat.