Pengumuman
- Menambahkan Halaman Manajer File UI
- Versi mantine yang diperbarui ke 7.14.3 terbaru
- Varian mode gelap baru
- Varian sidebar baru, sekarang kami memiliki mode penuh, mini dan penuh runtuh
- Pratinjau Langsung
- Pratinjau Komponen
- Sedang
- Roadmap Produk * Baru *
Tentang
Template admin & dasbor profesional yang dibangun menggunakan Mantine 7 yang hadir dengan ratusan komponen UI, bentuk, tabel, grafik, halaman dan ikon. Template ini dibangun menggunakan V14 berikutnya, React, Apex Charts, Mantine DataTable dan Storybook.

Rilis sebelumnya
Rilis sebelumnya dari templat dasbor, mendukung 13 berikutnya dengan router halaman dan mantine 6. Untuk melihat demo langsung, gunakan tautan ini - pratinjau, dan untuk checkout garpu repo Gunakan tautan ini - Versi 1
Fitur
- Disesuaikan: Anda tidak perlu menjadi ahli untuk menyesuaikan template. Kode kami sangat mudah dibaca dan terdokumentasi dengan baik.
- Sepenuhnya responsif: Dengan dukungan seluler, tablet & desktop, tidak peduli perangkat apa yang Anda gunakan. Dasbor ANTD responsif di semua browser.
- Cross-Browser: Tema kami bekerja dengan sempurna dengan Chrome, Firefox, Opera, dan Edge. Kami bekerja keras untuk mendukung mereka.
- Kode Bersih: Kami benar -benar mengikuti pedoman desain semut untuk membuat integrasi Anda semudah mungkin. Semua kode ditulis tangan.
- Pembaruan Rutin: Dari waktu ke waktu Anda akan menerima pembaruan yang berisi komponen baru, perbaikan, dan perbaikan bug.
Tumpukan teknologi
Untuk membuat template ini luar biasa, saya menggunakan paket berikut:
Inti
- JS V14 Berikutnya: Next.js adalah kerangka pengembangan web open-source yang dibuat oleh perusahaan swasta Vercel yang menyediakan aplikasi web berbasis reaksi dengan rendering sisi server dan pembuatan situs web statis.
- Mantine V7: Mantine adalah Perpustakaan Komponen UI Bereaksi. Ini dibangun di atas React and TypeScript, dan menyediakan berbagai komponen dan kait untuk membangun aplikasi web berkinerja tinggi.
- React V18: React adalah perpustakaan JavaScript front-end gratis dan open-source untuk membangun antarmuka pengguna berdasarkan komponen.
- TypeScript v5: TypeScript adalah bahasa pemrograman tingkat tinggi gratis dan open-source yang dikembangkan oleh Microsoft yang menambahkan pengetikan statis dengan anotasi tipe opsional ke JavaScript.
- Storybook V7: Storybook adalah alat open-source gratis untuk mengembangkan komponen UI secara terpisah. Ini digunakan oleh pengembang web untuk meningkatkan alur kerja pengembangan UI mereka dan membangun aplikasi web yang lebih baik.
- Changeset CLI V2: ChangeTet adalah paket yang membantu dalam mengelola versi dan changelog saya.
- NextAuth V4: NextAuth.js adalah pustaka otentikasi yang fleksibel dan aman yang dapat digunakan untuk otentikasi sisi klien di Next.js.
- Ikon Tabler v2: Ikon Tabler adalah perpustakaan ikon open-source gratis dengan lebih dari 4.700 ikon. Ikon dirancang dengan estetika modern dan cocok untuk berbagai aplikasi.
- Mantine DataTable V7: Mantine DataTable adalah komponen React yang dapat digunakan untuk membuat antarmuka pengguna yang kaya data. Ini adalah komponen tabel yang menyadari tema gelap dan dirancang untuk UI mantin.
- LoDash V4: Perpustakaan Utilitas JavaScript yang memberikan konsistensi, modularitas, kinerja, & ekstra.
- APEX Chart V3: S ApexCharts adalah pustaka bagan JavaScript open-source gratis yang memungkinkan pengembang untuk membuat visualisasi data interaktif untuk halaman web. Ini dapat digunakan untuk proyek komersial dan non-komersial.
- Dayjs v1: Day.js adalah perpustakaan JavaScript yang menangani tanggal dan waktu.
- Tiptap V2: Editor teks kaya, kerangka kerja-agnostik, dan dapat diperpanjang, berdasarkan prosemirror.
- FullCalendar V6 : FullCalendar adalah kalender acara JavaScript dengan lebih dari 300 pengaturan. Ini open source dan memiliki inti gratis.
- DND-KIT V6: DND-KIT adalah toolkit drag-and-drop yang ringan, modular, dan ekstensible untuk bereaksi. Ini juga dapat diakses dan berkinerja.
- Embla Carousel V7: Embla Carousel adalah perpustakaan korsel yang ringan dengan gerakan cairan dan gesekan yang tepat.
- React Simple Maps v3: Komponen bagan peta SVG yang dibangun dengan dan untuk bereaksi.
- Panitera/NextJs V4: Panitera Next.js adalah pembungkus di sekitar Panitera Bereaksi. Ini memungkinkan pengguna untuk menggunakan kait yang disediakan oleh pegawai.
- React countup v6: pembungkus komponen reaksi di sekitar countup.js.
Dev
- Prettier V3: Prettier adalah formatter kode yang secara otomatis memformat kode untuk memastikan itu konsisten dan mudah dibaca.
- Husky V8: Husky adalah alat yang membuatnya lebih mudah untuk bekerja dengan kait git. Prettier adalah formatter kode.
- Lint dipentaskan V15: Lint-Staged akan secara otomatis menambahkan modifikasi apa pun ke komit selama tidak ada kesalahan.
- PostCSS V8: PostCSS adalah pustaka JavaScript yang menggunakan plugin untuk mengubah CSS. Ini transpiles CSS menjadi pohon sintaks abstrak, yang kemudian diwakili oleh objek JavaScript.
Awal yang cepat
Unduh
- Klon repo git ini klon
https://github.com/design-sparx/mantine-analytics-dashboard.git - Unduh dari GitHub
Membangun alat
Anda harus menginstal Node.js. Setelah Node.js diinstal, jalankan Instal NPM untuk menginstal sisa dependensi template. Semua dependensi akan diunduh ke direktori node_modules.
Sekarang Anda siap untuk memodifikasi file sumber dan menghasilkan file baru. Untuk secara otomatis mendeteksi perubahan file dan memulai server web lokal di http: // localhost: 3000, jalankan perintah berikut.
Mengkompilasi, mengoptimalkan, meminimalkan, dan menggantikan semua file sumber untuk membangun/
Struktur file
Di dalam file zip Anda akan menemukan direktori dan file berikut. Baik file distribusi yang dikompilasi dan diminifikasi, seperti di dalam file zip, Anda akan menemukan direktori dan file berikut. Baik file distribusi yang dikompilasi dan terpini, serta file sumber disertakan dalam paket.
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/
└──
Berkontribusi dan dukungan
Saya menyambut semua pengembang dan penggemar untuk berkontribusi pada pertumbuhan template dasbor admin open-source kami. Kontribusi adalah proses kolaboratif yang memberdayakan kita untuk secara kolektif meningkatkan kemampuan dan kualitas template. Untuk memulai:
- Fork The Repository: Fork Template's Github Repository ke akun GitHub Anda sendiri.
- Klon The Fork: Kloning repositori forked ke mesin lokal Anda menggunakan git.
- Buat cabang: Buat cabang baru untuk kontribusi Anda untuk menjaga basis kode utama tetap utuh.
- Menerapkan perubahan: Buat perubahan yang Anda inginkan, tambahkan komponen baru, atau perbaiki fitur yang ada.
- Komit dan dorong: Komit perubahan Anda ke cabang baru dan dorong mereka ke Github Fork Anda.
- Kirim Permintaan Tarik: Kirim permintaan tarik dari repositori bercabang Anda ke repositori template utama. Perubahan Anda akan ditinjau dan berpotensi digabungkan.
Melaporkan masalah dan mencari bantuan
Jika Anda menghadapi masalah atau membutuhkan bantuan saat menggunakan templat, kami di sini untuk membantu:
- Penelusuran Isu: Kunjungi tab Masalah Repositori GitHub untuk melaporkan bug, menyarankan peningkatan, atau mencari klarifikasi tentang aspek -aspek templat.
- Interaksi Komunitas: Terlibat dengan komunitas template di platform seperti diskusi GitHub untuk bantuan, bimbingan, dan wawasan.
Undangan untuk mengeksplorasi dan memanfaatkan
Template dasbor admin mantine dan next.js bukan hanya akhir; Ini adalah awal - titik awal untuk perjalanan kreatif Anda. Apakah Anda seorang pengembang berpengalaman yang mencari peluncuran yang cepat atau penggemar yang ingin mempelajari praktik pengembangan modern, templat ini adalah kanvas Anda.
Sumber daya lebih lanjut
- 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.embla-carousel.com/get-started/
- FullCalendar - https://fullcalendar.io/docs/getting-started
- React Simple Maps-https://www.react-simple-maps.io/docs/getting-started/