PrimeReactが有償化した今、それでも導入する価値はあるのか

はじめに

管理画面やダッシュボードを作るたびに、DataTableやダイアログ、日付ピッカーといった「よくあるUI」を一から実装するのは骨が折れます。かといってUIライブラリを選ぶにも、コンポーネント数が少なくて結局自作パーツが増えてしまったり、逆に癖が強すぎてカスタマイズに苦労したり……という経験がある方も多いのではないでしょうか。

そんな課題に対して長年支持されてきたのが「PrimeReact」です。ただし2026年に入り、開発元のPrimeTekがライセンス体系を大きく変更したことでも話題になりました。本記事では基本的な使い方に加えて、この変更点も踏まえて「今から導入する価値があるのか」を整理します。

PrimeReactとは

PrimeReactは、PrimeTek Informaticsが開発するReact向けのUIコンポーネントライブラリです。データテーブルやチャート、ダイアログ、メニューなど130種類以上のコンポーネントを揃えており、「必要なものはひととおり揃っている」と評されるほどの網羅性が特徴です。

主な特徴

• 圧倒的なコンポーネント数 - DataTableのような複雑なものから、Button・InputTextといった基本パーツまで130種類以上を提供
• 4層アーキテクチャ - Headless（ロジックのみ）、Primitive、Styled、Tailwindの4レイヤーから選んで利用でき、デザインシステムへの組み込みやすさを重視
• 豊富なテーマプリセット - Aura・Lara・Nora・Materialなど複数のテーマが用意されており、単一プリセットの変更やコンポーネント単位のオーバーライドが可能
• TypeScript / SSR対応 - 型定義が同梱され、Next.js・Remix・Astroといった主要フレームワークでのSSRにも対応
• ツリーシェイキング対応 - 使用したコンポーネントのみがバンドルされ、不要なコード肥大化を防げる

【重要】2026年のライセンス変更について

2026年、PrimeReactは新しいライセンスモデル「PrimeUI」に移行しました。GitHubリポジトリもアーカイブされ、開発は非公開の体制に移っています。要点は以下のとおりです。

• 既存のMIT版はそのままMIT - v10系（10.9.xなど）はMITライセンスのまま今後も利用可能
• v11以降はPrimeUIライセンス - 新しいメジャーバージョンはソースアベイラブルな商用ライセンスとなり、利用にはライセンスキーが必要
• Community License（無償） - 年間売上1,000万円未満相当・開発者5名未満・従業員10名未満・出資額300万ドル未満などの条件を満たす組織や、個人・学生・非営利団体・非商用OSSは無償で利用可能
• Commercial License（有償） - 上記条件に当てはまらない企業は開発者単位でのライセンス購入が必要

つまり、個人開発や小規模チームであれば実質的にこれまでと同じ感覚で使い続けられますが、一定規模以上の企業で導入する場合は事前にライセンス条件を確認しておく必要があります。詳細はprimeui.devの公式ライセンスページで必ず確認してください。

インストール

最新のPrimeReact（v11以降）をインストールする場合は以下のコマンドを実行します。

# npm
npm install primereact primeicons

# yarn
yarn add primereact primeicons

# pnpm
pnpm add primereact primeicons

なお、v11はReact 19以降を前提としています。既存プロジェクトが古いReactを使っていたり、純粋なMITライセンスのまま使い続けたい場合は、バージョンを固定してインストールすることも可能です。

# MITライセンスの最終系統(v10系)を使う場合
npm install primereact@^10.9.8 primeicons

基本的な使い方

まずはアプリのルートで PrimeReactProvider を設定し、テーマを適用します。

// main.tsx
import { createRoot } from "react-dom/client";
import { PrimeReactProvider } from "primereact/api";
import "primereact/resources/themes/lara-light-cyan/theme.css";
import "primeicons/primeicons.css";
import App from "./App";

createRoot(document.getElementById("root")!).render(
  <PrimeReactProvider>
    <App />
  </PrimeReactProvider>
);

あとはコンポーネントをインポートして使うだけです。ButtonとInputTextを組み合わせた簡単なフォームを見てみましょう。

// SimpleForm.tsx
import { useState } from "react";
import { InputText } from "primereact/inputtext";
import { Button } from "primereact/button";

export function SimpleForm() {
  const [name, setName] = useState("");

  return (
    <div className="flex flex-column gap-2" style={{ maxWidth: 320 }}>
      <label htmlFor="name">お名前</label>
      <InputText
        id="name"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="山田太郎"
      />
      <Button
        label="送信"
        icon="pi pi-check"
        disabled={name.trim().length === 0}
        onClick={() => alert(`${name}さん、こんにちは！`)}
      />
    </div>
  );
}

icon="pi pi-check" のように、PrimeIcons(pi pi-*)クラスを指定するだけでアイコン付きボタンが作れる手軽さもPrimeReactらしいポイントです。

実践的なユースケース

管理画面でよく使われるDataTableを使って、一覧表示・ソート・検索を実装してみます。

// UserTable.tsx
import { useState, useMemo } from "react";
import { DataTable } from "primereact/datatable";
import { Column } from "primereact/column";
import { InputText } from "primereact/inputtext";

type User = {
  id: number;
  name: string;
  email: string;
  role: string;
};

const users: User[] = [
  { id: 1, name: "佐藤 花子", email: "sato@example.com", role: "管理者" },
  { id: 2, name: "鈴木 一郎", email: "suzuki@example.com", role: "編集者" },
  { id: 3, name: "田中 次郎", email: "tanaka@example.com", role: "閲覧者" },
];

export function UserTable() {
  const [keyword, setKeyword] = useState("");

  const filteredUsers = useMemo(() => {
    const lower = keyword.toLowerCase();
    return users.filter(
      (u) =>
        u.name.toLowerCase().includes(lower) ||
        u.email.toLowerCase().includes(lower)
    );
  }, [keyword]);

  return (
    <div className="flex flex-column gap-3">
      <InputText
        placeholder="名前やメールアドレスで検索"
        value={keyword}
        onChange={(e) => setKeyword(e.target.value)}
      />
      <DataTable value={filteredUsers} paginator rows={5} sortMode="multiple">
        <Column field="name" header="氏名" sortable />
        <Column field="email" header="メールアドレス" sortable />
        <Column field="role" header="権限" sortable />
      </DataTable>
    </div>
  );
}

このように、フィルタリング・ページネーション・複数列ソートといった「管理画面で必ず欲しくなる機能」が、propsを渡すだけで実現できます。自前でテーブルコンポーネントを組む工数を考えると、この手軽さは大きな武器になります。

まとめ

PrimeReactは130種類以上という圧倒的なコンポーネント数と、Headless・Primitive・Styled・Tailwindの4層アーキテクチャによる柔軟性を兼ね備えたUIライブラリです。DataTableのような複雑なコンポーネントも数十行のコードで実装できる手軽さは、今でも大きな魅力といえます。

一方で2026年のライセンス変更により、v11以降を商用利用する際は自社がCommunity Licenseの条件を満たすかどうかを事前に確認する必要が出てきました。個人開発や小規模チームであれば従来どおり無償で使い続けられますが、企業導入を検討している場合は必ずprimeui.devの最新のライセンス条件をチェックしてから採用を判断することをおすすめします。

まずはCommunity Licenseの範囲で npm install primereact を試し、DataTableやDialogなど気になるコンポーネントを触ってみるところから始めてみてください。