Template de site

CoreUI Free React Admin Template

Dashboard admin open-source em React 19 e Bootstrap 5, com componentes pré-construídos, modos claro/escuro e layouts responsivos, otimizados para desenvolvimento assistido por IA. Gratuito e open-source.

Painel · Ferramenta para desenvolvedores · 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 CoreUI Free React Admin Template, página /demos/react/latest/free/, parte 1 — /demos/react/latest/free/CoreUI Free React.js Admin Template

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 #f3f4f7; superfícies [#ffffff, #212631, #e55353, #3399ff]; texto #080a0c; texto abafado #252a36; primário #5856d6; destaques [#e55353, #3399ff, #f9b115]
Tipografia: títulos system-ui, 600, caixa de frase; corpo system-ui, 16px; escala h1/h2/h3 24/20/18px
Forma e espaçamento: raio de botão/cartão 6px, 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, barra de pesquisa, avatar do usuário, ícones de navegação, fundo branco
Métricas de destaque — grade de quatro cartões, 1 coluna cada, fundos coloridos (#5856d6, #3399ff, #f9b115, #e55353), texto branco, gráficos de linha internos
Gráfico de tráfego — área de gráfico de linha completa com duas linhas (azul/verde), seletor de intervalo de tempo (Dia/Mês/Ano), preenchimento azul-claro, linha de base cinza tracejada
Estatísticas sociais — três cartões de largura igual com logotipos sociais (Facebook, YouTube, LinkedIn), números em negrito abaixo, fundos azul-escuro/vermelho/azul
Tráfego e Vendas — layout de duas colunas, esquerda: gráfico de barras semanais (azul/vermelho), direita: divisão por gênero (amarelo/laranja), fontes de tráfego (barras verde/amarelo/vermelho/azul)
Tabela de usuários — cinco colunas (avatar, nome, bandeira do país, barra de uso, método de pagamento, atividade), cores alternadas nas linhas, ícones pequenos para status e pagamento
Detalhes marcantes: Cartões de métricas coloridos com gráficos de linha embutidos
Gráficos de barras horizontais com rótulos percentuais
Cartões de integração com mídias sociais com logotipos das marcas
Barras de progresso de uso em segmentos codificados por cores
Indicadores de status por meio de ícones circulares pequenos (verde/vermelho)
Outras páginas: /dashboard: visualização principal de análises
/ui-elements: biblioteca de componentes
/authentication: formulários de login/cadastro
/error-pages: modelos 404/500
/docs: página de documentação

Detalhes do template

Categoria: Painel, Ferramenta para desenvolvedores
Autor: coreui
Publicado em: 21st.dev
Preço: Grátis

Dashboard
Admin Panel
Developer Tool

Design original de coreui, 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.

Construa um dashboard inspirado no modelo "CoreUI Free React Admin Template". Brief de referência: Dashboard admin open-source em React 19 e Bootstrap 5, com componentes pré-construídos, modos claro/escuro e layouts responsivos, otimizados para desenvolvimento assistido por IA. Gratuito e open-source. Estilo e funcionalidades a reproduzir: Painel administrativo. Use o conteúdo e as imagens originais da minha marca, não os conteúdos fictícios do modelo.

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.