Bem-vindo à seção de exemplos do AdminKit Pro. Aqui você encontrará exemplos práticos e casos de uso para ajudá-lo a tirar o máximo proveito do template.
- Dashboard Analytics - Dashboard principal com métricas e gráficos
- Dashboard E-Commerce - Dashboard para lojas virtuais
- Dashboard Crypto - Dashboard para criptomoedas
- Perfil - Página de perfil de usuário
- Configurações - Página de configurações
- Projetos - Lista de projetos
- Tarefas - Gerenciador de tarefas
- Clientes - Lista de clientes
- Chat - Interface de chat
- Faturas - Página de faturas
- Preços - Tabela de preços
- Login - Página de login
- Cadastro - Página de cadastro
- Recuperar Senha - Recuperação de senha
- Erro 404 - Página não encontrada
- Erro 500 - Erro do servidor
- Página em Branco - Template em branco
- Botões - Exemplos de botões
- Cards - Exemplos de cards
- Modais - Exemplos de modais
- Abas - Exemplos de abas
- Alertas - Exemplos de alertas
- Tipografia - Exemplos de tipografia
- Geral - Componentes gerais
- Grid - Sistema de grid
- Placeholders - Placeholders de carregamento
- Offcanvas - Painéis offcanvas
- Inputs Básicos - Campos de entrada básicos
- Inputs Avançados - Campos avançados
- Grupos de Input - Grupos de campos
- Layouts de Formulário - Layouts de formulários
- Validação - Exemplos de validação
- Editores - Editores de texto rico
- Tabelas Bootstrap - Tabelas com Bootstrap
- DataTables Responsivas - Tabelas responsivas
- DataTables com Botões - Tabelas com botões de exportação
- DataTables com Cabeçalho Fixo - Tabelas com cabeçalho fixo
- DataTables Multi - Tabelas com múltiplas seleções
- DataTables com Busca de Coluna - Busca por coluna
- DataTables AJAX - Tabelas com dados via AJAX
- Chart.js - Gráficos com Chart.js
- ApexCharts - Gráficos com ApexCharts
- Google Maps - Integração com Google Maps
- Mapas Vetoriais - Mapas vetoriais interativos
- Calendário - Calendário completo
- Notificações - Sistema de notificações
- Ícones Feather - Biblioteca de ícones Feather
- Ícones Font Awesome - Biblioteca de ícones Font Awesome
Todos os exemplos são arquivos HTML independentes. Para abrir:
- Navegue até o diretório raiz do AdminKit Pro
- Clique no arquivo HTML desejado
- Ou use um servidor local:
python -m http.server 8000
- Acesse:
http://localhost:8000/nome-do-arquivo.html
Você pode inspecionar o código-fonte de qualquer exemplo:
- Abra o exemplo no navegador
- Clique com o botão direito → "Inspecionar Elemento"
- Ou abra o arquivo HTML diretamente no seu editor de código
- Identifique o exemplo que se aproxima do que você precisa
- Copie o HTML relevante para seu projeto
- Copie o CSS necessário (geralmente em
css/light.cssoucss/dark.css) - Copie o JavaScript se houver interatividade (geralmente em
js/app.js) - Personalize cores, textos e funcionalidades
Em breve, adicionaremos exemplos customizados com:
- Dashboard em Português
- Página de Login Customizada
- Formulário de Cadastro Completo
- Tabela com CRUD
- Gráficos com Dados Reais
- Página de Relatórios
Você tem um exemplo interessante que gostaria de compartilhar?
- Crie um arquivo HTML seguindo a estrutura do AdminKit
- Adicione comentários explicativos
- Documente o exemplo em um arquivo .md
- Envie um Pull Request
Consulte o CONTRIBUTING.md para mais detalhes.
Precisa de ajuda? Consulte a documentação principal