Este projeto é um modelo de painel de administração de UI gratuito e de código aberto construído com os componentes do Flowbite e baseado na estrutura CSS Tailwind, que apresenta gráficos, tabelas, widgets, layouts CRUD, modais, gavetas e muito mais.
Este painel de administração pode ajudá-lo rapidamente a começar a construir um aplicativo para o seu projeto usando as mais novas tecnologias de desenvolvimento UI/UX na área de código aberto, incluindo Tailwind CSS e Flowbite.
Os componentes interativos, como barras de navegação, modais, gavetas e dicas de ferramentas, são todos baseados na popular biblioteca de componentes de código aberto chamada Flowbite, que nos permite usar esses elementos criando um conjunto mais complexo de páginas e widgets dentro de um painel de administração completo. modelo.
Todas as páginas, widgets e componentes são baseados exclusivamente nas primeiras classes utilitárias do Tailwind CSS e são compatíveis com a v3.x
mais recente da tecnologia, eliminando automaticamente todas as classes com base nos caminhos do modelo.
Comece com 15 páginas de exemplos avançados, incluindo dois layouts diferentes da página inicial de um painel cheio de widgets de gráficos, tabelas, selecionadores de data e estatísticas e também com duas páginas de layout CRUD para produtos, usuários, uma página de configurações, páginas de autenticação para login e registro e até mesmo páginas de erro 404 e 500 personalizadas.
Este painel de administração contém muitos componentes avançados do Flowbite, mas também de outras bibliotecas de terceiros, como ApexCharts, que foram personalizados com classes CSS do Tailwind e projetados com base no Flowbite Design System.
Se você quiser usar este projeto, recomendamos estudar também a biblioteca de componentes que usamos para construir este painel, pois você pode usar ainda mais componentes dessa biblioteca para aprimorar os exemplos que já codificamos aqui.
Este produto é construído usando as seguintes tecnologias amplamente utilizadas:
Tailwind CSS: tailwindcss.com
Flowbite: flowbite.com
HUGO gohugo.io
Webpack webpack.js.org
Painel de administração do Flowbite
Estruturas JavaScript
Estruturas de back-end
Construído com Flowbite
Classes de utilitário CSS Tailwind
15 páginas de exemplo
Componentes avançados
Documentação do Flowbite
Fluxo de trabalho
Índice
Páginas de demonstração
Início rápido
Estrutura de arquivo
Suporte ao navegador
Recursos
Relatando problemas
Suporte Técnico ou Dúvidas
Licenciamento
Links úteis
Autores
Clone este repositório ou baixe o arquivo ZIP
Certifique-se de ter o Node.js e o NPM instalados
Instale as dependências do projeto do arquivo package.json
:
npm install
Crie um servidor local em localhost:1313
executando o seguinte comando:
npm run start
Você também pode compilar o projeto e obter os arquivos de distribuição dentro da pasta public/
executando:
npm run build
Você pode enviar seu projeto instantaneamente para o Vercel selecionando a configuração padrão do HUGO, mas dependendo da sua pilha de tecnologia, seja React.js, Vue, Nuxt.js, Next.js ou uma estrutura de back-end, você também pode simplesmente copiar os layouts deste projeto dentro de sua própria pilha de tecnologia.
Aqui está uma lista de tecnologias e guias compatíveis para Flowbite e Tailwind CSS:
A incrível comunidade de código aberto também construiu e atualmente mantém as seguintes bibliotecas independentes para React, Vue, Svelte e Angular:
Biblioteca Flowbite React
Biblioteca Flowbite Vue
Biblioteca Flowbite Svelte
Biblioteca Angular Flowbite
Também escrevemos guias de integração para as seguintes estruturas e bibliotecas front-end:
Guia Flowbite com React
Guia Flowbite com Next.js
Guia Flowbite com Vue
Guia Flowbite com Nuxt.js
Flowbite com guia Svelte
Flowbite tem uma ótima integração com a maioria dos frameworks de back-end porque depende de JavaScript vanilla:
Usando Flowbite com Laravel
Usando Flowbite com Ruby on Rails 7
Usando Flowbite com Django
Usando Flowbite com Flask
Dentro do download você encontrará os seguintes diretórios e arquivos:
Flowbite Admin Dashboard . ├── LICENSE ├── README.md ├── config.yml ├── content ├── data ├── layouts ├── node_modules ├── package-lock.json ├── package.json ├── postcss.config.js ├── resources ├── src ├── static ├── tailwind.config.js ├── webpack.config.js └── yarn.lock
Atualmente, pretendemos oficialmente oferecer suporte às duas últimas versões dos seguintes navegadores:
Visualização ao vivo: https://flowbite-admin-dashboard.vercel.app/
Documentação do Flowbite: https://flowbite.com/docs/getting-started/introduction/
Documentação CSS do Tailwind: https://tailwindcss.com/
Contrato de licença: https://flowbite.com/docs/getting-started/license/
Problemas: página de problemas do Github
Usamos o GitHub Issues como o rastreador de bugs oficial do Flowbite Admin Dashboard. Aqui estão alguns conselhos para nossos usuários que desejam relatar um problema:
Certifique-se de estar usando a versão mais recente do Flowbite Admin Dashboard. Verifique o CHANGELOG no seu painel na página de lançamentos do GitHub.
Fornecer etapas reproduzíveis para o problema reduzirá o tempo necessário para que ele seja corrigido.
Alguns problemas podem ser específicos do navegador, portanto, especificar em qual navegador você encontrou o problema pode ajudar.
Se você tiver dúvidas ou precisar de ajuda para integrar o produto, entre em contato conosco em vez de abrir um problema.
Direitos autorais 2019-2023 Bergside Inc.
Código aberto sob a licença MIT
Biblioteca Flowbite - Componentes de código aberto criados com Tailwind CSS
Flowbite Figma - Sistema de design construído para Figma
Flowbite Blocks - Construindo seções para sites e aplicativos
Flowbite Pro – Uma coleção maior da versão de código aberto dos três últimos
Zoltán Szőgyényi
Roberto Tanislav