beui

beUI

beUI は、公開 MCP または @beui の shadcn レジストリからコピーして使えます。

現在の接続手順とエンドポイントについては、AI エージェント向けガイドをご覧ください。 公開 MCP の https://mcp.beui.dev/mcp には、ライセンスキーも Pro 認証も必要ありません。 ライセンス対象のコンポーネントには、別途 beui-pro スキルと Pro 接続を使用してください。

ワークフロー

1. 接続している場合は、公開 MCP の list_components または search_components で現在のコンポーネントを確認します。それ以外の場合は、最新のレジストリを取得します。

curl -fsS https://beui.dev/r/registry.json

2. CLI でインストールする場合は、最新のレジストリにある items[].name から最も近いインストールスラッグを選びます。公開 MCP のカタログスラッグは、複数のインストール可能なバリアントを含むドキュメントページを指すことがあります。すべてのページスラッグがインストールスラッグとは限らないため、ご注意ください。
3. 選択したコンポーネントは MCP の get_component で確認するか、CLI でインストール可能な項目を確認します。

npx shadcn@latest view @beui/<slug>

4. MCP から返されたファイル一式を、プロジェクトのパスとエイリアスを使ってインストールし、一覧にあるパッケージの依存関係もインストールします。既存のヘルパーやローカルの変更は保持してください。または、ユーザーのパッケージランナーを使って、検証済みのレジストリスラッグをインストールします。

npx shadcn@latest add @beui/<slug>
# or
pnpm dlx shadcn@latest add @beui/<slug>
# or
bunx --bun shadcn@latest add @beui/<slug>

5. 追加されたファイルを読み込んでから、名前付きエクスポートを使って組み合わせます。beui ランタイムパッケージはありません。MCP から返された CLI コマンドは、実行する前に最新のインストールスラッグと照合して検証してください。

最新のレジストリを正としてください。以下の表は、よく似た項目を見分ける場合にのみ使用してください。

ピッカー

ユーザーの要望	@beui/... でインストール	避けるもの
トーストまたはスナックバー	animated-toast-stack	notification-stack
展開する通知インボックス	notification-stack	animated-toast-stack
モバイル用ボトムシート、Vaul スタイルのパネル	bottom-sheet	drawer
サイドパネルまたはアプリドロワー	drawer	bottom-sheet
アプリのクローム用サイドバー	animated-sidebar	bounce-sidebar、ai-sidebar
AI ファイル、フォルダー、ブックマーク	ai-sidebar	animated-sidebar
エージェントのワークスペース全体	chat-app	手作りのチャットシェル
トークンに追従するストリーミングスレッド	message-scroller、message	独自のスクロール計算
チャットバブルだけ	message-bubble	独自のバブル
プロンプトボックスまたはコンポーザー	prompt-input	textarea と独自のボタン
エージェントの推論、検索、ツールのトレース	agent-activity	通常のログリスト
タスク計画	todo-list	独自のチェックリスト
コード表示領域	code-block	pre/code を一から作成
ファイル差分	file-diff	独自の差分レンダラー
ツールの出力	tool-result	生のターミナルブロック
ツールの権限カード	tool-approval	アラートダイアログ
承認または HITL の質問	approval-card	独自のフォーム
インライン引用	citations	通常の番号付きリンク
生成画像キャンバス	image-generation	画像カードを一から作成
液体風ポップオーバー	popover	popover-morph
角がモーフィングするポップオーバー	popover-morph	popover
ドロップダウン選択	select	select-morph、combobox
パネルに広がる選択 UI	select-morph	select
検索可能な選択 UI	combobox	select
Cmd+K パレット	command-palette	combobox
右クリックまたは長押しメニュー	context-menu	bloom-menu
メニューに展開するボタン	bloom-menu	context-menu
押下ボタン	button-base	独自の motion.button
読み込み中／成功／エラーのボタン	button-stateful	スピナーボタン
マグネット式ボタン	button-magnetic	独自のポインター追跡
長押しして確認	hold-action-button	button-base
スライドして確認	slide-action-button	swipeable-list
ホバー時に矢印が広がる CTA	expanding-arrow-button	button-base
スピナー、ドット、バーのローダー	loader	thinking-shimmer
エージェントの思考ステータス	thinking-shimmer	loader、text-shimmer
推論フレーズの切り替え表示	reasoning-text	text-cascade
時間経過に応じて変わるエージェントの進捗グリフ	agent-progress	loader
きらめく見出しテキスト	text-shimmer	thinking-shimmer
単語または文字の表示アニメーション	text-reveal	text-cascade
色相が変化する単語	chromatic-text-reveal	text-shimmer
スロットマシン風の文字	text-cascade	text-scramble
スクランブルして解読されるテキスト	text-scramble	text-cascade
回転する数字	number-ticker	animated-number
表示時にカウントアップ	animated-number	number-ticker
目盛りドット付きスライダー	range-slider	その他の range-slider-*
インラインラベル付きスライダー	range-slider-inline	range-slider
液体風の塗りつぶしスライダー	range-slider-fluid	range-slider
イコライザースライダー	range-slider-wave	range-slider
値の吹き出しが傾くスライダー	range-slider-bubble	range-slider
ルーラースライダー	range-slider-ruler	range-slider
iOS のホイールピッカー	wheel-picker	select
macOS の Dock	dock	expandable-action-bar
ラベル付きアイコンアクション	expandable-action-bar	dock
オーバーフローアクションレール	overflow-actions	expandable-action-bar
アクティブラベル付きアイコンタブ	expandable-tabs	tabs
コンテンツ領域がモーフィングするタブ	morphing-tabs	tabs
ピル型または下線付きのタブ	tabs	expandable-tabs
ホバーで滑らかに移動する背景	shared-layout-bg	tabs
プレビューの目盛りまたはレール	preview-rail	bounce-sidebar
Dynamic Island	dynamic-island	notification-stack
スワイプ操作付きの行	swipeable-list	slide-action-button
引っ張って更新	pull-to-refresh	独自のタッチ計算
基本的なアップロードキュー	file-upload	attachment-upload
ファイル、音声、画像を組み合わせた添付ファイル	attachment-upload	file-upload
OTP または PIN の入力ボックス	otp-input	input
サインアップフォーム	signup-form	手動でフォームを組み立てる
テーマのワイプ切り替え	theme-toggle	クラスの切り替えのみ
シェーダー背景	shader-background	独自のキャンバス
円柱カルーセル	cylinder-carousel	marquee
ロゴまたはテキストのマーキー	marquee	cylinder-carousel
データテーブル	table	HTML テーブルを一から作成
アクティビティヒートマップ、コントリビューショングラフ	heat-calendar	独自のグリッド
月次リターングリッド	returns-calendar	heat-calendar
アナリストの株価目標チャート、予測ファン	price-target-fan	独自の SVG チャート
編集可能なテーブル	table-editable	table
非同期テーブル	table-async	table
トーナメントのトーナメント表	knockout-bracket	knockout-wheel
放射状のトーナメントホイール	knockout-wheel	knockout-bracket
404 ページ	not-found-glitch	独自の 404
プロジェクトフォルダーカード	project-folder	フォルダーカードを一から作成
トークンまたはチェーンのスワップ	swap	独自のスワップフォーム
週間対応可能時間エディター	availability-scheduler	独自のカレンダーグリッド
ウォレット概要カード	wallet-card	独自のウォレットカード
予測市場の取引チケット	prediction-market	独自の取引チケット
フィードバックポップアップ	feedback-widget	animated-toast-stack
無限スクロールのメイソングリッド	infinite-masonry	CSS columns
アコーディオン	bouncy-accordion	独自のアコーディオン
3D 傾斜カード	tilt-card	独自のグレア計算
ツールチップ	tooltip	popover
スイッチ、チェックボックス、ラジオボタン、入力欄	switch、checkbox、radio、input	スタイルを変更したネイティブコントロール

構成ルール

• カスタムの単発モーションウィジェットより、インストール済みの beUI ソースを優先してください。
• shadcn が追加するファイルから名前付きエクスポートをインポートしてください。
• レイアウトや小さなスタイル変更には className を使用してください。ユーザーから依頼がない限り、内部実装をフォークしないでください。
• @/lib/ease、@/lib/utils、フックなど、レジストリによってインストールされたヘルパーを使い続けてください。
• beUI コンポーネントの周囲に新たなモーションを追加する場合は、motion/react の useReducedMotion() を使用してください。
• マグネット効果や傾き効果などの装飾的なホバーエフェクトは、useHoverCapable() で制御してください。
• transform と opacity をアニメーションさせ、レイアウトプロパティのアニメーションは避けてください。

このリポジトリについて

beUI 自体に貢献する場合は、AGENTS.md に従ってください。新しいパブリックコンポーネントには、ソース、プレビュー、レジストリエントリが必要です。また、bun run check:registry が成功しなければなりません。既存の /r/{name}.json スラッグは決して変更しないでください。

チャートコンポーネント（heat-calendar、returns-calendar、price-target-fan）は、ドキュメントの /charts 配下にあります。@beui のインストール用スラッグは変更されていません。

チャートはルートとエクスポートされたパーツから組み立ててください。HeatCalendar は HeatCalendarGrid、HeatCalendarLegend、HeatCalendarTooltip を提供します。ReturnsCalendar は ReturnsCalendarGrid と ReturnsCalendarTooltip を提供します。各カレンダーのツールチップは、そのグリッド内に配置してください。どちらも selection、defaultSelection、onSelectionChange を受け取ります。

PriceTargetFan は Header、Plot、Svg、Axes、History、Targets、Now、Cursor、Tooltip のパーツを提供します（各パーツの先頭に PriceTargetFan を付けてください）。Svg のパーツは Svg 内に、Tooltip は Plot 内で Svg の隣に配置してください。current、targets、および省略可能な時系列順の history（{ date: ISOString, price }）を渡してください。history を省略すると、過去の系列は表示されません。読み取り表示の制御には active、defaultActive、onActiveChange を使用してください。各チャートは、カスタムの子孫コンテンツ用に use... フックをエクスポートします。ツールチップの子要素には、レンダー関数を指定できます。サンプルデータはチャートの実装ではなく、利用側のアプリに配置してください。HeatCalendar.endDate には UTC の暦日を使用します。