コンポーネント

shadcn/ui ／ MUI ／ Mantine

迷ったらこれ

shadcn/ui

Tailwind CSS と相性がよく、今いちばん使われている。中身を読めるので、困ったときに自分で直せる

見た目をくらべる

同じものを、それぞれのライブラリで作りました。触ってみてください

shadcn/ui

MUI

Mantine

書き方をくらべる

コードを書き換えると、右の見た目が変わります

このデモを自分のプロジェクトで動かすには：npx shadcn@latest add button

import { Button } from "./components/ui/button"

export default function App() {
  return (
    <div className="flex flex-wrap gap-3 p-4">
      <Button>保存する</Button>
      <Button variant="outline">キャンセル</Button>
      <Button variant="ghost">詳しく</Button>
    </div>
  )
}

Open Sandbox

くらべる

2026年9月時点

shadcn/ui

迷ったらこれ公式 ↗

特徴

コンポーネントのコードを、自分のプロジェクトにコピーして使う。中身を自由に書き換えられる

向いている場面

見た目を自由に変えたい。Tailwind CSS を使っている

MUI

公式 ↗

特徴

Google 風のデザインのコンポーネントが、最初からそろっている

向いている場面

管理画面などを、デザインを考えずに早く作りたい

Mantine

公式 ↗

特徴

コンポーネントに加えて、便利なフック（useDisclosure など）も多い

向いている場面

機能をたくさん使いたい。CSS を自分で書きたくない