Anuncios
- Se agregó la página de la página del administrador de archivos
- Versión de Mantine actualizada a la última 7.14.3
- Nueva variante de modo oscuro
- Nueva variante de barra lateral, ahora tenemos modos completamente colapsados, mini y completos
- Vista previa en vivo
- Vista previa de componentes
- Medio
- Hoja de ruta del producto * Nuevo *
Acerca de
Una plantilla profesional de administración y tablero construida en Mantine 7 que viene con cientos de componentes de interfaz de usuario, formularios, tablas, gráficos, páginas e iconos. Esta plantilla se construye utilizando Next V14, React, gráficos de Apex, Mantine DataTable y Storybook.

Lanzamiento anterior
El lanzamiento anterior de la plantilla del tablero, admite los próximos 13 con las páginas Router y Mantine 6. Para ver la demostración en vivo, use este enlace - Vista previa, y para pagar el bifurque el repositorio use este enlace - Versión 1
Características
- Personalizable: no necesita ser un experto para personalizar la plantilla. Nuestro código es muy legible y bien documentado.
- Totalmente receptivo: con el soporte móvil, de tabletas y de escritorio, no importa qué dispositivo esté utilizando. Antd Dashboard responde en todos los navegadores.
- Navegador cruzado: nuestros temas funcionan perfectamente con Chrome, Firefox, Opera y Edge. Estamos trabajando duro para apoyarlos.
- Código limpio: seguimos estrictamente las pautas de Ant Design para que su integración sea lo más fácil posible. Todo el código está escrito a mano.
- Actualizaciones regulares: de vez en cuando recibirá una actualización que contiene nuevos componentes, mejoras y correcciones de errores.
Pila de tecnología
Para que esta plantilla sea increíble, utilicé los siguientes paquetes:
Centro
- Next JS V14: Next.js es un marco de desarrollo web de código abierto creado por la compañía privada VERCE que proporciona aplicaciones web basadas en React con representación del lado del servidor y generación estática de sitios web.
- Mantine V7: Mantine es una biblioteca de componentes React UI. Está construido sobre React y TypeScript, y proporciona una variedad de componentes y ganchos para construir aplicaciones web de alto rendimiento.
- React V18: React es una biblioteca JavaScript front-end gratuita y de código abierto para construir interfaces de usuario basadas en componentes.
- TypeScript V5: TypeScript es un lenguaje de programación de alto nivel gratuito y de código abierto desarrollado por Microsoft que agrega tipificación estática con anotaciones de tipo opcional a JavaScript.
- Storybook V7: Storybook es una herramienta gratuita de código abierto para desarrollar componentes de la interfaz de usuario de forma aislada. Es utilizado por los desarrolladores web para mejorar su flujo de trabajo de desarrollo de la interfaz de usuario y crear mejores aplicaciones web.
- Changeset CLI V2: ChangesET es un paquete que ayuda a administrar mis versiones y colaboradores.
- NextAuth V4: NextAuth.js es una biblioteca de autenticación flexible y segura que puede usarse para la autenticación del lado del cliente en Next.js.
- Iconos de tabla V2: Iconos de tabla es una biblioteca de iconos de código abierto gratuito con más de 4,700 iconos. Los íconos están diseñados con una estética moderna y son adecuados para una amplia gama de aplicaciones.
- Mantine DataTable V7: Mantine DataTable es un componente React que puede usarse para crear interfaces de usuario ricas en datos. Es un componente de tabla que conoce los temas oscuros y está diseñado para la interfaz de usuario de Mantine.
- LODASH V4: una biblioteca de utilidad JavaScript que ofrece consistencia, modularidad, rendimiento y extras.
- APEX Chart V3: S Apexcharts es una biblioteca de registro JavaScript de código abierto que permite a los desarrolladores crear visualizaciones de datos interactivas para páginas web. Se puede utilizar para proyectos comerciales y no comerciales.
- DayJS V1: Day.js es una biblioteca JavaScript que maneja las fechas y horarios.
- TIPTAP V2: un editor de texto rico sin cabeza, marco-agnóstico y extensible, basado en prosemirror.
- FullCalendar V6 : FullCalendar es un calendario de eventos JavaScript con más de 300 configuraciones. Es de código abierto y tiene un núcleo libre.
- DND-KIT V6: DND-KIT es un kit de herramientas de arrastrar y soltar de arrastre liviano, modular y extensible para React. También es accesible y performance.
- Embla Carousel V7: Embla Carousel es una biblioteca liviana de carrusel con movimiento de fluido y deslizamiento preciso.
- React Simple Maps V3: un componente de gráfico de mapa SVG construido con y para reaccionar.
- Clerk/NextJS V4: Clerk Next.js es un envoltorio alrededor del empleado React. Permite a los usuarios usar los ganchos que proporciona el secretario.
- React Countup V6: un envoltorio de componentes React alrededor de Countup.js.
Enchufe
- Prettier V3: Prettier es un formato de código que formatea automáticamente el código para garantizar que sea consistente y fácil de leer.
- Husky V8: Husky es una herramienta que hace que sea más fácil trabajar con Git Hooks. Prettier es un formateador de código.
- Lint Efgage V15: Lint-Engage agregará automáticamente cualquier modificación a la confirmación siempre que no haya errores.
- PostCSS V8: PostCSS es una biblioteca JavaScript que utiliza complementos para transformar CSS. Transpila CSS en un árbol de sintaxis abstracto, que luego se representa por los objetos JavaScript.
Comienzo rápido
Descargar
- Clon Este repositorio git clon
https://github.com/design-sparx/mantine-analytics-dashboard.git - Descargar desde Github
Construir herramientas
Deberá instalar Node.js. Una vez que se instala Node.js, ejecute NPM Instalar para instalar el resto de las dependencias de la plantilla. Todas las dependencias se descargarán al directorio Node_Modules.
Ahora está listo para modificar los archivos de origen y generar nuevos archivos. Para detectar automáticamente los cambios de archivo e iniciar un servidor web local en http: // localhost: 3000, ejecute el siguiente comando.
Compilar, optimizar, minificar y oglify todos los archivos de origen para construir/
Estructura de archivo
Dentro del archivo postal encontrará los siguientes directorios y archivos. Tanto los archivos de distribución compilados y minificados, como dentro del archivo zip, encontrará los siguientes directorios y archivos. Los archivos de distribución compilados y minificados, así como los archivos de origen, se incluyen en el paquete.
mantine-analytics-dashboard/
├── .changeset
├── .github
├── .gitignore
├── .editorconfig
├── .prettierignore
├── .prettierrc
├── README.md
├── CHANGELOG.md
├── LICENSE
├── index.html
├── package.json
├── tsconfig.json
├── next.config.js
├── postcss.config.cjs
├── clerkMiddleware.ts
├── yarn.lock
├── public/
│ ├── mocks/
│ ├── _redirects
│ ├── favicon.ico
├── src/
│ ├── .changeset/
│ ├── .github/
│ ├── .husty/
│ ├── .storybook/
│ ├── .yarn/
│ ├── app/
├────── api/
├────── error.tsx
├────── error.module.css
├────── global.css
├────── layout.tsx
├────── loading.tsx
├────── not-found.tsx
├────── page.module.css
├────── page.tsx
│ ├── components/
│ ├── hooks/
│ ├── layout/
│ ├── providers/
│ ├── public/
│ ├── routes/
│ ├── styles/
│ ├── theme/
│ ├── types/
│ ├── utils/
└──
Contribuyendo y apoyo
Agradezco a todos los desarrolladores y entusiastas para que contribuyan al crecimiento de nuestra plantilla de tablero de administración de código abierto. Contribuir es un proceso de colaboración que nos permite mejorar colectivamente las capacidades y la calidad de la plantilla. Para comenzar:
- Bifurca el repositorio: bifurca el repositorio de GitHub de la plantilla a tu propia cuenta GitHub.
- Clon the Fork: Clon el repositorio bifurcado a su máquina local usando git.
- Cree una rama: cree una nueva rama para sus contribuciones para mantener intacta la base de código principal.
- Implementar cambios: realice sus cambios deseados, agregue nuevos componentes o refine las funciones existentes.
- Comprometer y empuje: Comprometer sus cambios a la nueva rama y empújalos a su bifurcación Github.
- Envíe una solicitud de extracción: envíe una solicitud de extracción de su repositorio bifurcado al repositorio de plantilla principal. Sus cambios serán revisados y fusionados potencialmente.
Informes de problemas y búsqueda de ayuda
Si se encuentra con algún problema o necesita asistencia mientras usa la plantilla, estamos aquí para ayudar:
- Tracker de emisión: visite la pestaña Problemas del repositorio de GitHub para informar errores, sugerir mejoras o buscar aclaraciones sobre aspectos de la plantilla.
- Interacción de la comunidad: Inactive con la comunidad de la plantilla en plataformas como Discusiones de Github para asistencia, orientación e ideas.
Invitación para explorar y utilizar
La plantilla de tablero de administrador Mantine y Next.js no es solo un final; Es un comienzo: un punto de partida para su viaje creativo. Ya sea que sea un desarrollador experimentado que busque un lanzamiento rápido o un entusiasta interesado en aprender prácticas modernas de desarrollo, esta plantilla es su lienzo.
Recursos adicionales
- Nextjs - https://nextjs.org/docs
- React - https://react.dev/learn
- Mantine - https://mantine.dev/getting-started/
- NextAuth - https://authjs.dev/
- Storybook - https://storybook.js.org/docs/get-started/install
- Apexcharts - https://apexcharts.com/docs/installation/
- Tiptap - https://tiptap.dev/introduction
- Dndkit - https://docs.dndkit.com/
- Embla Carousel-https://www.empbla-carousel.com/get-started/
- FullCalendar - https://fullcalendar.io/docs/getting-started
- React Simple Maps-https://www.react-simple-maps.io/docs/getting-started/