shadcn/uiに"個性"を足すならRetroUI。ネオブルータリズムUIのすすめ

はじめに

最近のWebサイト、どれも同じような見た目だと感じたことはありませんか？角丸のカード、淡いグラデーション、ふんわりしたドロップシャドウ……。shadcn/uiの普及もあって、洗練されているけれど「どこかで見た」デザインが世の中にあふれています。

そんな均質化への反動として人気を集めているのが、**ネオブルータリズム（NeoBrutalism）**というデザインスタイルです。太い黒枠、ベタッとしたハードシャドウ、ビビッドな配色。GumroadやFigmaのランディングページで見かける、あの大胆でレトロポップな見た目です。

今回紹介するRetroUIは、このネオブルータリズムをReact + Tailwind CSSで手軽に実現できるコンポーネントライブラリです。しかもshadcn/uiのフォークとして作られているため、普段shadcn/uiを使っている方なら学習コストほぼゼロで導入できます。

RetroUIとは

RetroUIは、shadcn/uiをベースにネオブルータリズムスタイルへ振り切ったオープンソースのUIコンポーネントライブラリです。GitHubで1,500以上のスターを獲得しており、2026年4月にはv2.0.0がリリースされるなど、活発に開発が続いています（MITライセンス）。

shadcn/uiと同じく「npmパッケージとして依存に追加する」のではなく、コンポーネントのソースコードを自分のプロジェクトに直接コピーする方式を採用しています。そのため、導入後は自分のコードとして自由にカスタマイズできます。

主な特徴

ネオブルータリズムデザイン - 太い枠線、ハードなオフセットシャドウ、大胆な配色が最初から適用済み。CSSを書き込まなくても「個性のある」UIになります
shadcn CLIと完全互換 - shadcn addコマンドでそのままインストール可能。既存のshadcn/uiプロジェクトにも共存できます
50以上のコンポーネントと158のブロック - ButtonやAccordionなどの基本部品に加え、ヒーローセクションや料金表などの組み立て済みブロックが豊富です
Radix UIとBase UIの2エンジン対応 - アクセシビリティの土台となるプリミティブを、実績のあるRadix UIと新鋭のBase UIから選べます
ダークモード・RTL・MCPサーバー対応 - AIエディタからMCP経由でコンポーネントを追加するモダンなワークフローにも対応しています

インストール

RetroUIはshadcnレジストリとして配布されているため、セットアップはとてもシンプルです。ここではNext.js + Tailwind CSS v4のプロジェクトを前提に進めます。

1. レジストリの登録

プロジェクトルートのcomponents.jsonに、RetroUIのレジストリを追加します。

{
  "registries": {
    "@retroui": "https://retroui.dev/r/radix/{name}.json",
    "@retroui-base": "https://retroui.dev/r/base/{name}.json"
  }
}

@retrouiがRadix UIベース、@retroui-baseがBase UIベースです。見た目もAPIも同じなので、迷ったらRadix版で問題ありません。

2. コンポーネントの追加

あとは使いたいコンポーネントをCLIで追加するだけです。

# npm
npx shadcn@latest add @retroui/button

# pnpm
pnpm dlx shadcn@latest add @retroui/button

これでcomponents/ui/button.tsxとしてソースコードがプロジェクトに配置されます。

3. フォントの設定

ネオブルータリズムらしさを引き立てるため、公式は見出し用に「Archivo Black」、本文用に「Space Grotesk」を推奨しています。Next.jsならapp/layout.tsxで次のように設定します。

import { Archivo_Black, Space_Grotesk } from "next/font/google";

const archivoBlack = Archivo_Black({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-head",
  display: "swap",
});

const spaceGrotesk = Space_Grotesk({
  subsets: ["latin"],
  variable: "--font-sans",
  display: "swap",
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja">
      <body className={`${archivoBlack.variable} ${spaceGrotesk.variable}`}>
        {children}
      </body>
    </html>
  );
}

あわせてglobals.cssに公式ドキュメント記載のテーマ変数（カラーと--shadow-xs〜--shadow-2xlのシャドウトークン）を追加すれば準備完了です。

基本的な使い方

まずは一番シンプルなButtonから見てみましょう。使い方はshadcn/uiとまったく同じです。

import { Button } from "@/components/ui/button";

export default function Example() {
  return (
    <div className="flex gap-4">
      <Button>デフォルト</Button>
      <Button variant="outline">アウトライン</Button>
      <Button variant="secondary">セカンダリ</Button>
      <Button variant="destructive">削除</Button>
    </div>
  );
}

たったこれだけで、太枠＋ハードシャドウの「押したくなる」ボタンが表示されます。ホバー時にシャドウ方向へボタンが沈み込むインタラクションも標準装備で、クリック感が気持ちいいのが特徴です。

variantはdefault / outline / ghost / destructive / secondary / linkの6種類、sizeはxsからlg、アイコンボタン用のicon系まで揃っているので、shadcn/uiからの移行でコードの書き換えはほぼ発生しません。

実践的なユースケース

個人開発プロダクトのランディングページ

ネオブルータリズムが最も輝くのはランディングページです。CardとBadge、Buttonを組み合わせて、料金プランのセクションを作ってみましょう。

npx shadcn@latest add @retroui/card @retroui/badge

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";

const plans = [
  { name: "Free", price: "¥0", features: ["3プロジェクトまで", "コミュニティサポート"] },
  { name: "Pro", price: "¥980", features: ["無制限プロジェクト", "優先サポート"], popular: true },
];

export default function Pricing() {
  return (
    <section className="grid gap-6 md:grid-cols-2 p-8 bg-yellow-50">
      {plans.map((plan) => (
        <Card key={plan.name} className="relative">
          {plan.popular && (
            <Badge className="absolute -top-3 right-4">人気No.1</Badge>
          )}
          <CardHeader>
            <CardTitle className="font-head text-2xl">{plan.name}</CardTitle>
            <p className="text-4xl font-bold">
              {plan.price}
              <span className="text-base font-normal">/月</span>
            </p>
          </CardHeader>
          <CardContent className="space-y-4">
            <ul className="space-y-2">
              {plan.features.map((feature) => (
                <li key={feature}>✓ {feature}</li>
              ))}
            </ul>
            <Button className="w-full">
              {plan.popular ? "今すぐ始める" : "無料で試す"}
            </Button>
          </CardContent>
        </Card>
      ))}
    </section>
  );
}