コンテンツへスキップ

ネオブルータリズムReact UI コンポーネント

ネオブルータリズムスタイルのアクセシブルなReactコンポーネント。太いボーダー、くっきりとしたシャドウ、大胆なカラー。すべてにRadix UI版とBase UI版があり、shadcn CLIでインストールでき、コードは完全にあなたのものになります。

ライブプレビュー

ボタン

01/07

自分のハードシャドウに沈み込みます。

Docs
npx shadcn add neobrutalism.com/r/base/button.json
57 構成要素
  • 50+ コンポーネント
  • 太い枠線、濃い影
  • shadcn CLI インストール
  • Radix · Base UI · React Aria
  • Radix · Base UI · React Aria
  • デフォルトでアクセス可能
  • このコードはあなたのものです
  • MCP サーバーサポート
  • ダークモードとRTL
  • 小さくて目立つラベル

すべてのコンポーネント

OTP 入力

2FA、サインイン認証、PIN入力画面向けのワンタイムコード入力欄 — ネオ・ブルータリスト風の枠線とハードシャドウを備えた、貼り付け対応の入力欄です。

Sonner

保存の確認、アップロード、および元に戻すウィンドウの通知を積み重ねたトースト通知――ネオブルータリズム風の枠線と影の演出を施しています。

アイテム

通知フィード、設定リスト、ファイル行向けに、メディア、タイトル、説明、アクションのスロットを備えたフレックス行――ネオブルータリズム風のデザインです。

アコーディオン

FAQ、設定、およびコンテンツ量の多いページ向けに、縦に積み重ねられた展開可能なセクションのセットです。ネオブルータリズム風の枠線と影の演出が施されています。

アスペクト比

画像、埋め込み動画、地図を拡大・縮小する際に固定のアスペクト比に制限します。ネオブルータリズム風のカードをグリッド内に収めるためのレイアウトユーティリティです。

アバター

プロフィールメニュー、コメントスレッド、チームリスト用に、イニシャルによる代替表示機能を備えたユーザー画像です。ネオブルータリズム風の太い枠の処理が施されています。

アラート

フォームのエラー、警告、および成功の確認を表示するためのインラインのコールアウト――ネオブルータリズム風の枠線と強い影を施した、ステータスカラーのパネルです。

カード

ダッシュボード、価格プラン、製品一覧用の枠付きボックスです。ヘッダー、コンテンツ、フッターには、ネオブルータリズム風のハードシャドウ効果が施されています。

カルーセル

商品ギャラリー、お客様の声、ヒーローセクション向けのスワイプ可能なスライドショー――ネオブルータリズム風の枠線と濃い影で彩られています。

カレンダー

予約、スケジュール管理、期間選択用の月単位グリッド形式の日付ピッカーです。ネオブルータリズム風の枠線と影の演出が施されています。

キーボード

メニュー、ツールチップ、コマンドパレット内のショートカットヒント用のキーボードキーキャップ――ネオ・ブルータリスト風の枠線と影を備えたネイティブの kbd 要素です。

コマンド

⌘Kメニュー、グローバル検索、クイックアクション用のキーボード操作型コマンドパレットです。ネオブルータリズム風の枠線と影の演出が施されています。

コンテキストメニュー

ファイル行、キャンバス、データグリッド用の右クリックメニュー――ネオブルータリズム風の枠線と影の演出が施された、状況に応じた操作です。

コンボボックス

入力中に候補を絞り込むオートコンプリート機能(国選択ボックス、タグ入力欄、長いリストの選択ボックスなど)に、ネオブルータリズム風の枠線と影を施したものです。

サイドバー

ダッシュボード、ドキュメント、管理ツール向けの折りたたみ可能なアプリシェル型ナビゲーションパネルです。ネオブルータリズム風の枠線と影の演出が施されています。

シート

ナビゲーションドロワー、フィルター、編集フォーム用に、画面の端からスライドして表示されるパネルです。ネオブルータリズム風の枠線と影の演出が施されています。

スイッチ

通知、ダークモード、機能フラグなどの設定を瞬時に切り替えられるオン/オフトグルで、ネオブルータリズム風の枠線と影の演出が施されています。

スクロール領域

チャットペイン、サイドバー、ファイルツリー用に、カスタムでクロスブラウザ対応のスクロールバーを備えたスクロール可能なコンテナです。太めのネオブルータリズム調のスクロールバーが特徴です。

スケルトン

データの読み込み中に、カード、アバター、表を表示するための点滅するプレースホルダーブロックです。ネオブルータリズム風の太い枠線デザインを採用しています。

スピナー

送信待ち、取得待ち、およびインラインのビジー状態を示すアニメーション付きの読み込みインジケーターです。あらゆるネオブルータリスト・コントロールにそのまま組み込めるアイコンです。

スライダー

値や範囲(音量、価格フィルター、設定など)を選択するためのドラッグ可能な入力フィールドで、ネオブルータリズム風の枠線と影の演出が施されています。

セレクト

1つの選択肢を選択するためのドロップダウンメニュー(国選択フィールド、並べ替え順序、テーマ設定など)で、太いネオブルータリズム風の枠線と強い影が特徴です。

ダイアログ

確認画面、簡易フォーム、および取り消し不能な操作の警告を表示するためのモーダルウィンドウです。太い枠線と濃い影を伴い、ページの上に重ねて表示されます。

タイポグラフィ

見出し、本文、リスト、表、インラインコード向けの汎用的なスタイルセットです。ネオブルータリズム風の重厚なデザインで組版されています。

タブ

設定ページ、ダッシュボード、コードプレビューといった、重ねられたコンテンツパネル間を、ネオブルータリズム風の枠線と影の演出で切り替えてください。

チェックボックス

同意チェックボックスのオン/オフ切り替え、複数選択フィルター、および行の一括選択機能――ネオブルータリズム風の枠線と影の演出が施されています。

ツールチップ

アイコンボタン、キーボードショートカット、および省略されたラベルに対するホバー時およびフォーカス時のヒント表示――ネオブルータリズム風の枠線と影の演出を施しています。

データテーブル

管理パネル、ダッシュボード、注文一覧向けに、並べ替え・フィルタリング・ページネーションが可能なテーブルです。ネオブルータリズム風の枠線と影の演出が施されています。

テーブル

請求書、管理用リスト、価格表向けのセマンティックHTMLテーブル――行枠、太字の見出し、そしてネオブルータリズム風の力強い影が特徴です。

テキストエリア

コメント、プロフィール、サポートメッセージ用の複数行テキスト入力欄です。ネオブルータリズム風の枠線と影の演出が施されています。

トグル

ツールバーの書式設定、ミュート、ピン留め機能用の2段階式オン/オフボタン――ネオブルータリズム風の枠線と影の演出が施されています。

トグルグループ

エディタツールバー、ビュースイッチャー、フィルターバー用の2状態ボタングループ――ネオブルータリズム風の枠線と影の処理が施されています。

ドロップダウンメニュー

ボタン操作で表示される、行ごとの操作、アカウント切り替え、表示オプション用のメニューです。ネオブルータリズム風の枠線と影の演出が施されています。

ドロワー

モバイル向けのメニュー、フィルター、クイックフォーム用に、どの端からもスライドして表示されるジェスチャー操作式のシートです。ネオブルータリズム風の枠線と影が特徴です。

ナビゲーションメニュー

サイトヘッダー、ドキュメントナビゲーション、アプリシェル用のリンクやドロップダウンパネルが並ぶ水平バー――ネオブルータリズム風の枠線と濃い影が特徴です。

ネイティブ選択

フォーム、フィルター、国選択機能向けに再設計されたネイティブのHTMLセレクト要素――ネオブルータリズム風の枠線と影を備えた、OSによってレンダリングされるドロップダウンです。

バッジ

カード、表、ナビゲーション項目上のステータス、カウント、タグ用の小さなラベルです。ネオブルータリズム風の枠線と影の処理が施されています。

パンくずリスト

サイト階層におけるそのページの位置(ドキュメント、ストアのカテゴリ、ダッシュボードへのリンク経路)を、太字のネオブルータリズム体で表示します。

フィールド

設定パネル、チェックアウトフォーム、登録フロー向けのラベル、コントロール、ヘルプテキスト、エラー表示欄――ネオブルータリズム風のフォームデザインを採用しています。

プログレス

タスクが完了するたびに(アップロード、インストール、複数ステップのオンボーディングなど)徐々に埋まっていく細長いバーで、ネオブルータリズム風の枠線と影の表現が施されています。

ページネーション

検索結果、表、アーカイブ用のページ番号付きリンクに、前へ・次へボタンが付いています。デザインは、ネオブルータリズムの「枠線と影」スタイルを採用しています。

ボタン

フォームの送信、ツールバー、および取り消し不可の確認画面用のクリック可能なトリガーです。太い枠線と、クリック時に影が沈み込むような効果が特徴です。

ボタングループ

ボタン、ツールバー、入力アドオンを1つの枠付きユニットに統合しています。太い枠線、ハードシャドウ、共通のクリック操作が1つにまとめられています。

ポップオーバー

日付ピッカー、フィルター、インラインフォーム用のトリガーに固定されたフローティングパネルです。ネオブルータリズム風の枠線と影の演出が施されています。

ホバーカード

マウスオーバーすると表示されるフローティングプレビュー――プロフィールの一端、リンクのプレビュー、用語集の用語など――には、ネオブルータリズム風の枠線と影の演出が施されています。

メニューバー

アプリ風のツールバー、エディタ、ダッシュボード向けの、ドロップダウンメニューが並ぶ水平バーです。ネオブルータリズム風の枠線と影の演出が施されています。

ラジオグループ

プラン、配送オプション、設定フォーム用の単一選択式ラジオボタンセットです。ネオブルータリズム風の枠線と影の演出が施されています。

ラベル

入力欄、チェックボックス、スイッチ、およびラジオボタングループのキャプションです。クリックするとコントロールが有効になります。ネオブルータリズム風の見出しフォントで表示されています。

リサイズ可能

コードエディタ、ファイルツリー、ダッシュボードのレイアウト向けに、ドラッグ可能な分割ペイン — ネオブルータリズム風の枠線と影の演出が施されています。

入力

ログイン、検索バー、およびチェックアウトフォーム用の1行テキストフィールドです。ネオブルータリズム風の太い枠線とハードシャドウが施されています。

入力グループ

検索バー、URL入力欄、チャット作成画面の入力フィールドに、アイコン、ボタン、キーボードヒントを追加しましょう。ネオ・ブルータリスト風の枠線と影も付いています。

区切り

メニュー、ツールバー、リストを区切る水平または垂直の線――ネオブルータリストの枠と同じ実線の色で描かれています。

折りたたみ

ファイルツリー、詳細設定、および「さらに表示」セクション用のトリガーとパネルの組み合わせです。ネオブルータリズム風の枠線と影の演出が施されています。

方向

コンテキストプロバイダーにより、コンポーネントの表示方向をLTR(左から右)とRTL(右から左)の間で切り替えることで、アラビア語、ヘブライ語、ペルシア語において、メニュー、スライダー、タブが正しく反映されるようにします。

日付ピッカー

フォームやフィルターで、特定の日付、期間、誕生日を選択するためのポップオーバーカレンダーです。ネオブルータリズム風の枠線とハードシャドウが特徴です。

空状態

検索結果がない場合、ダッシュボードが空白の場合、および初回起動時の画面用のプレースホルダーです。アイコン、タイトル、アクションが、ネオブルータリズム風の枠で囲まれています。

警告ダイアログ

削除、ログアウト、破棄といった破壊的な操作を行う際に処理の流れを一時停止させるモーダルで、ネオブルータリズム風の枠線と影の演出が施されています。