RetroUI 2.0 登場 - より大きく、より大胆に、より使いやすく
数か月の開発を経て、RetroUI 2.0 が登場しました。Base UI 対応、統合された新サイト、刷新されたドキュメント、100 以上の新しい block、そして新しい template。過去最大のアップデートです。
Dov Azencot
@DovAzencot数か月のあいだ、私たちは暗がりのなかで開発を続けてきました。今日、ついに明かりを灯します。
RetroUI 2.0 の登場です。これまでにリリースしたなかで最大のアップデートになりました。単なるバージョンの引き上げではありません。RetroUI にできることも、その使い心地も、まるごと進化させました。
RetroUI を最初にリリースしたとき、目標はシンプルでした。「ほかと同じに見えない UI ライブラリを開発者に届ける」ということです。大胆なデザイン、ネオブルータリズムの美学、そしてプロジェクトを際立たせるコンポーネント。そのビジョンは変わっていません。ただ、それをどう届けるかは、大きく変わりました。
さっそく新機能を見ていきましょう。
🎨 Base UI 対応 - みなさんが待ち望んでいた土台
初日からもっとも要望の多かった機能のひとつが Base UI 対応でした。それがついに実現しました。
Base UI とは？
Base UI は、MUI チームが開発した、スタイルを持たないアクセシブルな React コンポーネントのライブラリです。Material UI のヘッドレスかつフレームワーク非依存な代替版と考えてください。スタイルの主張を一切持たないまま、振る舞いとアクセシビリティのロジックだけをまるごと手に入れられます。
RetroUI にとって、なぜ重要なのか
これまで RetroUI のコンポーネントは Radix UI のプリミティブの上に構築されていました（Radix が優れているのは間違いありません、念のため）。しかし Base UI は新たな可能性を開いてくれます。
- フレームワークの柔軟性: Base UI は React、Next.js、そのほかのモダンなフレームワークでシームレスに動作します
- より効いたツリーシェイキング: 最適化が進み、バンドルサイズがより小さくなります
- 強化されたアクセシビリティ: Base UI のアクセシビリティプリミティブは実戦で鍛えられ、標準で WCAG に準拠しています
- 将来を見据えたアーキテクチャ: React Server Components とモダンな React エコシステムのために設計されています
これがあなたにとって何を意味するのか。RetroUI のコンポーネントは、これまで以上に高速で、アクセシブルで、柔軟になりました。しかも、みなさんが気に入っている大胆で個性的なデザイン言語はそのまま保ったままです。
// Now powered by Base UI under the hood
import { Button } from '@/components/neobrutalism'
<Button variant="primary">
Still bold. Still RetroUI. Now even better.
</Button>🌐 ひとつのサイト、ひとつのビジョン - OS と Pro が統合
ずっと気になっていたことがありました。RetroUI OS（無料版）と RetroUI Pro でサイトが分かれているのは、どこか……バラバラに感じられたのです。コミュニティをひとつにまとめるどころか、分断してしまっているようでした。
それはもう終わりです。
完全にリニューアルしたサイト
RetroUI のサイトをゼロから作り直し、OS と Pro をひとつのまとまった体験へと統合しました。新しくなったポイントはこちらです。
統合されたコンポーネントライブラリ
無料版も Pro 版も、すべてのコンポーネントをひとつの場所で見られます。何が使えるのかを確かめるためにサイトを行き来する必要はもうありません。どれが無料でどれがプレミアムなのか、はっきりと示されています。
すっきりしたナビゲーション
必要なものを見つけるのが、より速く、より直感的になりました。コンポーネント、block、template、ドキュメント。すべてに論理的な居場所があります。
より洗練されたデザイン
私たちは自分たちの言葉を実践します。新しいサイトはより大胆で、より速く、より磨き上げられています。美学に本気でこだわったとき、RetroUI に何ができるのかを示すショーケースです。
より優れたモバイル体験
以前のサイトもモバイルで動作はしていました。新しいサイトはモバイルで輝きます。ネイティブのように感じられるタッチ操作を備えた、正しく作られたレスポンシブデザインです。
いちばんの魅力は？そのすべてが RetroUI のコンポーネントで動いていることです。私たちは自分たちのライブラリをドッグフーディングしています。つまり、サイト上で目にするすべてのコンポーネントは、あなたのプロジェクトでもそのまま使えるということです。
📚 本当に役立つドキュメント
正直に言いましょう。ドキュメントは、しばしば後回しにされがちです。でも今回は違います。
みなさんの作業がもっと楽になるように、RetroUI のドキュメントを機能ごと全面的に見直しました。
Markdown としてコピー
自分のプロジェクトのドキュメントを書いていますか？それとも RetroUI についてのブログ記事でしょうか？これからは、ワンクリックでコンポーネントのコードを Markdown としてコピーできます。
こんな場面にぴったりです。
- 自分のコンポーネントのドキュメントを作る
- チュートリアルやガイドを書く
- Markdown ベースのツール（Notion、GitHub など）でコード例を共有する
AI を活用したドキュメント
ドキュメントに AI アシスタントを直接組み込みました。コンポーネントのカスタマイズ方法で困っていますか？API を理解したいですか？何ページものドキュメントを掘り返すより速く、AI が答えを見つける手助けをしてくれます。
たとえば、こんなことを聞けます。
- 「Button コンポーネントでカスタムカラーを使うには？」
- 「Card コンポーネントはどんな props を受け取れる？」
- 「Modal をフォームと組み合わせて使う例を見せて」
24 時間 365 日、RetroUI のエキスパートがそばに控えているようなものです。
改良されたコード例
すべてのコンポーネントに、次のものが揃いました。
- 操作できるライブプレビュー
- さまざまなユースケースを示す複数のバリアント
- 正しい import を含んだコピー＆ペーストですぐ使えるコード
- 型安全性を高める TypeScript の例
- 各コンポーネントが a11y をどう扱うかを説明するアクセシビリティに関する注記
もう当て推量は必要ありません。ソースコードを掘り返す必要もありません。あるのは、あなたの開発を加速させる、明快で役立つ例だけです。
🧱 100 以上の新しい UI block - かつてないスピードで作る
コンポーネントは素晴らしい。でも、ときにはボタンやカードだけでなく、セクション全体が必要になります。
そこで登場するのが block です。
block とは？
block とは、プロジェクトにそのまま組み込める、あらかじめ作られたセクションのことです。ヒーローセクション、料金表、機能グリッド、お客様の声、CTA など。どれも完全にレスポンシブで、アクセシブルで、そのままカスタマイズできる状態になっています。
2.0 で何が新しいのか？
思いつくかぎりのあらゆるカテゴリにわたって、100 を超える新しい block を追加しました。
ヒーローセクション
- ミニマルからフルブリードまで、15 種類以上の新しいヒーローのバリエーション
- アニメーション背景、スプリットスクリーンレイアウト、動画ヒーローを含む
機能とメリット
- アイコンベースの機能グリッド
- スクリーンショットのショーケース
- ステップバイステップのガイド
- 比較テーブル
料金表
- シンプルな 2 カラムから複雑な 4 段階の料金プランまで
- 課金切り替え（月額／年額）
- 機能の比較マトリクス
お客様の声
- グリッドレイアウト、カルーセル、メーソンリーデザイン
- 動画によるお客様の声
- 社会的証明のためのロゴウォール
CTA とコンバージョン
- ニュースレター登録
- ウェイトリストフォーム
- アプリのダウンロードセクション
- 個性のあるお問い合わせフォーム
ヘッダーとナビゲーション
- メガメニュー
- モバイルファーストのナビゲーションパターン
- スクロール効果付きの固定ヘッダー
フッター
- 複数カラムのフッター
- ミニマルな 1 行フッター
- ニュースレターを組み込んだフッター
どの block も、同じ大胆な RetroUI の美学で作られています。太いボーダー、くっきりとした影、鮮やかな色、そして非対称のレイアウト。周囲に溶け込むのではなく、際立つように設計されています。
// Drop in a complete hero section in seconds
import { HeroBold } from '@/components/blocks'
<HeroBold
title="Your Product Name"
subtitle="Ship faster with bold design"
cta="Get Started"
/>🌙 新しい template: ダークモードの開発者向けダッシュボード
template は、すべてが結実する場所です。コンポーネント、block、そしてデザイン哲学が、ひとつの完成されたアプリケーションへと統合されます。
最新の template、ダークモードの開発者向けダッシュボードのご紹介です。
これは何？
開発者向けツール、SaaS プラットフォーム、管理画面のために作られた、ダークモードを第一に考えたフル機能のダッシュボードです。RetroUI の大胆な美学で、本番運用に耐えるアプリケーションを構築するのに必要なものが、すべて揃っています。
何が含まれているのか？
完成されたダッシュボードレイアウト
- 折りたたみ可能なメニューを備えたサイドバーナビゲーション
- 検索とユーザープロフィールを備えたトップヘッダー
- モバイル、タブレット、デスクトップで動作するレスポンシブデザイン
あらかじめ用意されたページ
- メトリクスとチャートを備えたダッシュボードの概要
- ユーザー管理（一覧、詳細、編集）
- フォーム例を含む設定ページ
- API ドキュメントページ
- 課金とサブスクリプションの管理
正しく作られたダークモード
- 単に色を反転しただけではなく、暗い背景のために意図して設計
- 読みやすさのための高いコントラスト
- 暗い背景に映える鮮やかなアクセントカラー
本番運用に対応した機能
- 認証画面（ログイン、サインアップ、パスワード再設定）
- エラー状態と空の状態
- ローディングスケルトン
- トースト通知
- モーダルダイアログと確認画面
開発者にやさしい
- TypeScript で構築
- ドキュメント化されたコンポーネント構造
- カスタマイズと拡張が容易
- Next.js App Router の規約に準拠
これはおもちゃの template ではありません。実際のプロダクトのために、その上に構築していける土台です。新しい SaaS を立ち上げるにせよ、社内ツールを作るにせよ、開発者向けプラットフォームを生み出すにせよ、この template はあなたに一歩リードを与えてくれます。
そして、これは世に溢れるほかのダッシュボード template とはまるで違って見えます。それこそが狙いです。
なぜ重要なのか
RetroUI 2.0 は、単に機能を増やすことがゴールではありません。RetroUI を、実際のプロジェクトにとってより強力で、より柔軟で、より役立つものにすることが狙いです。
Base UI 対応は、より優れたパフォーマンスとアクセシビリティを意味します。
統合されたサイトは、見つけやすさと、誰にとってもより良い体験を意味します。
改良されたドキュメントは、探す時間を減らし、作る時間を増やすことを意味します。
100 以上の新しい block は、完成したページを数日ではなく数分で出荷できることを意味します。
ダークモードの template は、次のプロジェクトのための堅固な土台を意味します。
これらのアップデートを合わせると、RetroUI 2.0 は、退屈なインターフェースを断固として拒む開発者のための、もっとも完成度が高く、本番運用に耐える UI ライブラリになります。
次は何が来るのか？
これは大きなリリースですが、ここで立ち止まるつもりはありません。ロードマップにあるのはこちらです。
- さらなる template（ライトモードのバリアント、ランディングページ、EC）
- デザインから開発への流れを速くする Figma to Code 連携
- ライブラリの拡張に合わせたさらなる Base UI コンポーネント
- RetroUI で作られたプロジェクトを紹介するコミュニティショーケース
- よくあるパターンやユースケースを解説する動画チュートリアル
私たちは耳を傾けています。必要なコンポーネント、欲しい機能、直面している課題があれば、ぜひ教えてください。RetroUI は開発者による、開発者のためのものです。みなさんのフィードバックが、次に作るものを形づくります。
今日から RetroUI 2.0 を試す
さっそく始めてみませんか？導入方法はこちらです。
はじめての方へ
# Install RetroUI
npx retroui-cli init
# Or install via npm
npm install @retroui/reactコンポーネントを見て回り、block を探索し、新しい template を手に入れてください。すべて、Next.js、React、Vite のプロジェクトですぐに使える状態になっています。
すでにお使いの方へ
すでに RetroUI をお使いなら、2.0 へのアップグレードはとても簡単です。
破壊的変更については changelog をご確認ください（ごくわずかしかなく、そのすべてに回避策を用意しています）。
ありがとう
RetroUI が存在するのは、あなたのような開発者が、ありきたりなデザインにうんざりしているからです。際立つもの、個性のあるもの、ほかとは違うと感じられるものを作りたい。そう思っているからです。
私たちは、それをもっと簡単にするためにここにいます。
バージョン 2.0 は、数か月の開発、数百のコミット、数えきれないデザインの試行錯誤、そして素晴らしいコミュニティからのフィードバックの結晶です。この旅の一員でいてくれて、ありがとうございます。
さあ、大胆な何かを作りにいきましょう。🚀
RetroUI 2.0 を探索する:
質問は？フィードバックは？バグを見つけましたか？GitHub で issue を立てるか、Twitter/X で声をかけてください。