mantine analytics dashboardのダウンロード - mantine analytics dashboardソースコードダウンロード

mantine analytics dashboard

AI ソースコード

UI updates and bug fixes

ダウンロード

発表

ファイルマネージャーページUIを追加しました
最新の7.14.3にマンティンバージョンを更新しました
新しいダークモードバリアント
新しいサイドバーバリアント、今ではフル、ミニ、完全な崩壊モードがあります

ライブプレビュー
コンポーネントプレビュー
中くらい
製品ロードマップ * new *

について

Mantine 7に使用されたプロの管理者およびダッシュボードテンプレートには、数百のUIコンポーネント、フォーム、テーブル、チャート、ページ、アイコンが付属しています。このテンプレートは、Next V14、React、Apexチャート、Mantine Datatable、Storybookを使用して構築されています。

プレビュー画像

前のリリース

ダッシュボードテンプレートの以前のリリースでは、ページルーターとマンティン6で次の13をサポートします。ライブデモを表示するには、このリンクを使用します - プレビューを使用し、フォークリポジトリを使用してこのリンクを使用します - バージョン1

特徴

カスタマイズ可能：テンプレートをカスタマイズするために専門家である必要はありません。私たちのコードは非常に読みやすく、十分に文書化されています。
完全なレスポンシブ：モバイル、タブレット、デスクトップサポートを使用すると、使用しているデバイスは関係ありません。 ANTDダッシュボードは、すべてのブラウザでレスポンシブです。
クロスブラウザー：私たちのテーマは、Chrome、Firefox、Opera、およびEdgeと完全に機能しています。私たちは彼らをサポートするために一生懸命働いています。
クリーンコード： ANTデザインのガイドラインに従って、統合を可能な限り簡単にします。すべてのコードは手書きです。
定期的な更新：新しいコンポーネント、改善、バグの修正を含む更新を随時受信します。

技術スタック

このテンプレートを素晴らしいものにするために、次のパッケージを使用しました。

コア

Next JS V14： Next.JSは、Server Renderingと静的Webサイト生成を備えたReactベースのWebアプリケーションを提供する民間企業Vercelによって作成されたオープンソースWeb開発フレームワークです。
Mantine V7： MantineはReact UIコンポーネントライブラリです。 ReactとTypeScriptの上に構築されており、高性能Webアプリケーションを構築するためのさまざまなコンポーネントとフックを提供します。
React V18： Reactは、コンポーネントに基づいてユーザーインターフェイスを構築するための無料でオープンソースのフロントエンドJavaScriptライブラリです。
TypeScript V5： TypeScriptは、Microsoftが開発した無料でオープンソースの高レベルプログラミング言語で、JavaScriptにオプションのタイプアノテーションを使用して静的タイピングを追加します。
Storybook V7： Storybookは、UIコンポーネントを単独で開発するための無料のオープンソースツールです。 Web開発者がUI開発ワークフローを改善し、より良いWebアプリケーションを構築するために使用されています。
Changeset CLI V2： Changesetは、バージョンと変更ログの管理に役立つパッケージです。
nextauth V4： nextauth.jsは、Xs.jsでクライアント側の認証に使用できる柔軟で安全な認証ライブラリです。
Tabler Icons V2： Tablerアイコンは、4,700を超えるアイコンを備えた無料のオープンソースアイコンライブラリです。アイコンは現代の美学で設計されており、幅広いアプリケーションに適しています。
Mantine Datatable V7： Mantine Datatableは、データが豊富なユーザーインターフェイスを作成するために使用できるReactコンポーネントです。これは、暗いテーマを認識し、マンティンUI向けに設計されたテーブルコンポーネントです。
Lodash V4：一貫性、モジュール性、パフォーマンス、およびエクストラを提供するJavaScriptユーティリティライブラリ。
Apex Chart V3：S Apexchartsは、開発者がWebページのインタラクティブなデータ視覚化を作成できる無料のオープンソースJavaScriptチャートライブラリです。商業プロジェクトと非営利プロジェクトの両方に使用できます。
Dayjs V1： day.jsは、日付と時刻を処理するJavaScriptライブラリです。
Tiptap V2： Prosemirrorに基づいた、ヘッドレス、フレームワーク、拡張可能なリッチテキストエディター。
FullCalendar V6 ：FullCalendarは、300を超える設定を備えたJavaScriptイベントカレンダーです。オープンソースで、無料のコアがあります。
DND-KIT V6： DND-KITは、React用の軽量、モジュラー、および拡張可能なドラッグアンドドロップツールキットです。また、アクセスしやすくパフォーマンスがあります。
Embla Carousel V7： Embla Carouselは、流動的な動きと正確なスワイピングを備えた軽量のカルーセルライブラリです。
React Simple Maps V3： SVGマップチャートコンポーネントが構築され、React用に構築されています。
Clerk/Nextjs V4： Clerk next.jsは、Clerk Reactのラッパーです。これにより、ユーザーはClerk Reactが提供するフックを使用できます。
React Countup V6： Countup.jsの周りのReactコンポーネントラッパー。

開発者

Prettier V3： Prettierは、コードを自動的にフォーマットして、一貫性があり読みやすいことを確認するコードフォーマッタです。
ハスキーV8：ハスキーは、Gitフックで作業しやすくするツールです。 Prettierはコードフォーマッタです。
Lint Staged V15： Lintステージは、エラーがない限り、コミットに変更を自動的に追加します。
PostCSS V8： PostCSSは、プラグインを使用してCSSを変換するJavaScriptライブラリです。 CSSは抽象的な構文ツリーに変換され、JavaScriptオブジェクトで表されます。

クイックスタート

ダウンロード

このレポジットクローンhttps://github.com/design-sparx/mantine-analytics-dashboard.git
Githubからダウンロードしてください

ツールを構築します

node.jsをインストールする必要がありますnode.jsがインストールされたら、NPMインストールを実行して、残りのテンプレートの依存関係をインストールします。すべての依存関係は、node_modulesディレクトリにダウンロードされます。

npm install

これで、ソースファイルを変更して新しいファイルを生成する準備が整いました。ファイルの変更を自動的に検出し、http：// localhost：3000でローカルWebサーバーを起動するには、次のコマンドを実行します。

npm run dev

すべてのソースファイルをコンパイル、最適化、マイニフィス、およびuglify build/

npm run build

ファイル構造

zipファイルの内部には、次のディレクトリとファイルがあります。 zipファイル内のように、コンパイルされた配布ファイルと縮小された両方の配信ファイルが、次のディレクトリとファイルが見つかります。コンパイルされた配布ファイルと監督ファイルの両方と、ソースファイルの両方がパッケージに含まれています。

 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/
└──

貢献とサポート

オープンソースの管理ダッシュボードテンプレートの成長に貢献するために、すべての開発者と愛好家を歓迎します。貢献は、テンプレートの機能と品質を集合的に強化することを可能にする共同プロセスです。開始するために：

リポジトリのフォーク：テンプレートのgithubリポジトリを独自のgithubアカウントにフォークします。
フォークのクローン：Gitを使用してフォークリポジトリをローカルマシンにクローンします。
ブランチの作成：メインコードベースをそのままに保つために、貢献のための新しいブランチを作成します。
変更を実装します。目的の変更を加えたり、新しいコンポーネントを追加したり、既存の機能を改良したりします。
コミットとプッシュ：新しいブランチに変更をコミットし、Githubフォークに押し込みます。
プルリクエストを送信：フォークリポジトリからメインテンプレートリポジトリにプルリクエストを送信します。あなたの変更はレビューされ、潜在的にマージされます。

問題を報告し、助けを求めています

テンプレートを使用している間に問題が発生したり、支援が必要な場合は、次のようにここにいます。

問題トラッカー：GitHubリポジトリの問題タブにアクセスして、バグを報告したり、強化を提案したり、テンプレートの側面を明確にしたりします。
コミュニティの相互作用：支援、ガイダンス、洞察のためのGitHubディスカッションなどのプラットフォームでテンプレートのコミュニティと関わります。

探索と利用への招待

Mantineとnext.js管理ダッシュボードテンプレートは、単なる終わりではありません。それは始まりです - あなたの創造的な旅の出発点です。あなたが迅速な打ち上げを求めているベテランの開発者であろうと、現代の開発慣行を学ぶことに熱心な愛好家であろうと、このテンプレートはあなたのキャンバスです。