OSS探訪
GitHubで見るプロジェクトサイト

Mantine — React component・hook・design systemを一つのecosystemで揃える

OSS規模スコア 297.3OSS健全度 89更新ペース 80 Commit/30日
スコアの見方

OSS規模スコアはStars・Watchers・Forks・Contributorsを対数圧縮して重み付けした現在の規模指標（上限なし）です。発掘スコアは現在のOSS規模スコアから発掘時点のOSS規模スコアを引いた値、更新ペースは直近30日Commit数、成長モメンタムは直近の観測期間におけるOSS規模スコア差、OSS健全度は取得できた更新状況・Community Health・Releaseの0〜100評価です。

Stars
31,746
主要言語
TypeScript
ライセンス
MIT
リポジトリ最終更新
2026/09/21

概要

Mantineは、100以上のReact UI componentと80以上のhookを中心に、form、chart、notification、command paletteなどの周辺packageを揃えるUI libraryです。themeとproviderを土台に、業務画面からSaaSまで共通のdesign systemを構築できます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：

100以上のcomponentと80以上のhookを共通themeで使う

Button、Input、Modal等のcore componentとstate/UI用hookを同じecosystemから利用できます。

出典：[2][3]

form・chart・notification等を必要に応じて追加する

@mantine/form、@mantine/charts、notifications、spotlight、Tiptap integration等をproject要件に合わせて追加できます。

出典：[2]

Reactで一貫したUI基盤を短期間に整えたい場合に

component、hook、theme、周辺機能を別々のlibraryから選定する量を減らし、design systemを早く揃えたいteamに向きます。

出典：[2]

現行9系のReact要件とstyle importを確認する

現在のcore packageはReact/React DOM ^19.2.0をpeer dependencyとします。またhooks以外のMantine packageでは必要なCSS importを忘れないようにしてください。

出典：[3][4]

参考にした公式資料

  1. [1]mantinedev/mantine repository(2026-09-21)
  2. [2]Mantine README(2026-09-21)
  3. [3]@mantine/core package(2026-09-21)
  4. [4]Mantine Vite guide(2026-09-21)
  5. [5]Mantine MIT license(2026-09-21)
編集部からの補足

現在の`@mantine/core`は9.6.2で、`@mantine/hooks` 9.6.2とReact/React DOM ^19.2.0をpeer dependencyに持ちます。core以外にもform、charts、notifications、spotlight等が別packageとして用意されており、必要な機能だけを追加できます。style importと`MantineProvider`の設定が基本です。

3ステップで試す

  1. 1

    coreとhooksを追加

    既存React/Vite projectへMantineのcore componentとhook packageを追加します。

    npm install @mantine/core @mantine/hooks
  2. 2

    styleとMantineProviderを設定

    application rootでcore stylesを読み込み、MantineProviderでcomponent treeを包みます。

    import '@mantine/core/styles.css'; <MantineProvider>{/* app */}</MantineProvider>
  3. 3

    dev serverでcomponentを確認

    ButtonやInputなどを配置し、themeとcomponent stylesが適用されることを確認します。

    npm run dev
公式READMEで確認

成長

成長の推移 · 直近30日

31,746 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）
80
Open PR
49

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

カテゴリ

タグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る
GitHubで見る

GitHub Topics

  • react
  • typescript
  • uikit
  • hooks
  • dark-theme
  • dark-mode
Stars
31,746
Forks
2,376
Watchers
107
Open Issues
9
Contributors
460
主要言語
TypeScript
ライセンス
MIT
リポジトリ最終更新
2026/09/21
関連記事を投稿する

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

情報の誤りを報告

掲載内容に誤りや古い情報があればお知らせください。