nexus-ui

Nexus UI

AI を活用したインターフェースを構築するための、オープンソースのコンポーネントライブラリです。チャット、ストリーミング、マルチモーダル体験に対応した、組み合わせて使えるコピー＆ペースト可能なプリミティブを、React、Tailwind CSS v4、Radix UI を基盤として提供します。

コンポーネントは shadcn レジストリ経由で配布され、ソースコードとしてユーザーのプロジェクトにインストールされます。

IMPORTANT: CLI コマンドは、プロジェクトの packageManager に応じて、プロジェクトのパッケージランナーを使って実行してください：npx shadcn@latest、pnpm dlx shadcn@latest、または bunx --bun shadcn@latest。

インストール

1. レジストリを追加する

Nexus UI レジストリをプロジェクトの components.json に追加します：

{
  "registries": {
    "@nexus-ui": "https://nexus-ui.dev/r/{name}.json"
  }
}

2. コンポーネントを追加する

npx shadcn@latest add @nexus-ui/prompt-input
npx shadcn@latest add @nexus-ui/model-selector
npx shadcn@latest add @nexus-ui/suggestions
npx shadcn@latest add @nexus-ui/attachments
npx shadcn@latest add @nexus-ui/message
npx shadcn@latest add @nexus-ui/thread
npx shadcn@latest add @nexus-ui/citation
npx shadcn@latest add @nexus-ui/reasoning
npx shadcn@latest add @nexus-ui/text-shimmer
npx shadcn@latest add @nexus-ui/image
npx shadcn@latest add @nexus-ui/feedback-bar
npx shadcn@latest add @nexus-ui/toaster
npx shadcn@latest add @nexus-ui/chain-of-thought
npx shadcn@latest add @nexus-ui/tool
npx shadcn@latest add @nexus-ui/questions

または、URL から直接インストールします（レジストリの設定は不要です）：

npx shadcn@latest add https://nexus-ui.dev/r/prompt-input.json

コンポーネントは、デフォルトで components/nexus-ui/ にインストールされます。

前提条件

• React 19+
• Tailwind CSS v4
• TypeScript
• shadcn/ui の初期化（npx shadcn@latest init）

利用可能なコンポーネント

コンポーネント	レジストリ名	説明
プロンプト入力	prompt-input	自動でサイズが変わるテキストエリアとアクションスロットを備えた、組み合わせて使えるチャット入力
モデルセレクター	model-selector	ラジオグループ、サブメニュー、カスタム項目を備えた AI モデル選択用ドロップダウン
提案	suggestions	ユーザー入力を促すプロンプト候補のチップ
添付ファイル	attachments	プレビュー、バリアント、アップロード連携に対応した、チャット入力やメッセージ用の組み合わせ可能なファイル添付機能
メッセージ	message	Markdown、任意のアバター、アクション、添付ファイルに対応したチャットメッセージのレイアウト
スレッド	thread	スクロール位置を最下部に固定するスクロール可能なチャットスレッドと、最下部への移動コントロール
引用	citation	ホバープレビューと複数ソースのカルーセルを備えた、インラインの出典参照
推論	reasoning	ストリーミング対応のラベルと Markdown 本文を備えた、折りたたみ可能なモデル推論のトレース
テキストシマー	text-shimmer	読み込み中、ツール実行中、その他進行中の UI 向けのアニメーション付きシマーテキスト
画像	image	プレビュー、ローダー、ライトボックス、アクションスロットを備え、URL、base64、バイト列のペイロードに対応した画像レンダラー
フィードバックバー	feedback-bar	メッセージごとまたはスレッドの評価に使うフィードバック用プロンプトバー。アクションスロットと閉じるスロットを備えています
トースター	toaster	Sonner を利用したヘッドレスのトースト通知。バリアント対応のスタイルと、カスタムのアクション／キャンセルコントロールを備えています
思考の連鎖	chain-of-thought	ステップの状態、任意で展開できる出力、ステップ完了時の自動クローズに対応した、構造化された複数ステップの思考タイムライン
ツール	tool	JSON の入力／出力コードブロックに対応した、状態を認識するツール呼び出し UI（pending、ready、running、completed、error）
質問	questions	単一または複数選択、カルーセルナビゲーション、一括送信に対応した、フォローアップの確認質問

コンポーネント API

各セクションは、同じ構成になっています：インポート → パーツ → ルートの props → Props とフック → 使用上の注意 → 例（短いコード例が役立つ場合）。

プロンプト入力

組み合わせ可能なチャットシェルです。自動で高さが変わるテキストエリアと、添付／送信などのコントロール用の下部アクション行を備えています。

インポート：

import {
  PromptInput,
  PromptInputTextarea,
  PromptInputActions,
  PromptInputActionGroup,
  PromptInputAction,
} from "@/components/nexus-ui/prompt-input";

パーツ：

パーツ	目的
PromptInput	ルートレイアウトです。テキストエリアとアクションを囲む枠線付きカードです。
PromptInputTextarea	shadcn の ScrollArea 内に配置する、自動でサイズが変わるテキストエリアです（最大高さは約160px）。
PromptInputActions	下部バーです。左右のアクショングループを justify-between で配置します。
PromptInputActionGroup	アクションを横方向にまとめるグループです（gap-2）。
PromptInputAction	1つのコントロール用スロットです。asChild と、tooltip（文字列またはオブジェクト）で指定する組み込みのオプションのツールチップに対応しています。

ルートの props： PromptInput の onSubmit(value: string) は任意です。指定すると、PromptInputTextarea で Enter キーを押したときに送信されます（Shift+Enter で改行）。通常の DOM 属性と className も指定できます。

Props とフック： すべてのパーツが className を受け取ります。PromptInputTextarea は標準のテキストエリア props を受け取ります。PromptInputAction は asChild と tooltip?: string | { content?: string; side?: "top" | "right" | "bottom" | "left"; shortcut?: string } に対応しています（content がない場合、ツールチップは表示されません）。コンテキストフックはありません。

使用上の注意： 添付／ツールは最初の PromptInputActionGroup に、送信は2つ目に配置して、justify-between で両者を離してください。クリック可能な要素として PromptInputAction 自体を使うのではなく、Button を PromptInputAction asChild で囲む方法を推奨します。

例：

<PromptInput>
  <PromptInputTextarea placeholder="Ask anything..." />
  <PromptInputActions>
    <PromptInputActionGroup>
      <PromptInputAction asChild>
        <Button variant="ghost" size="icon" className="rounded-full">
          <Paperclip />
        </Button>
      </PromptInputAction>
    </PromptInputActionGroup>
    <PromptInputActionGroup>
      <PromptInputAction asChild>
        <Button size="icon" className="rounded-full">
          <ArrowUp />
        </Button>
      </PromptInputAction>
    </PromptInputActionGroup>
  </PromptInputActions>
</PromptInput>

モデルセレクター

モデル（または同様の値）を選択するためのドロップダウンです。Radix DropdownMenu を基盤とし、ラベル、説明、アイコン用の items メタデータを任意で設定できます。

インポート：

import {
  ModelSelector,
  ModelSelectorPortal,
  ModelSelectorTrigger,
  ModelSelectorContent,
  ModelSelectorGroup,
  ModelSelectorLabel,
  ModelSelectorItemTitle,
  ModelSelectorItemDescription,
  ModelSelectorItemIcon,
  ModelSelectorItemIndicator,
  ModelSelectorItem,
  ModelSelectorCheckboxItem,
  ModelSelectorRadioGroup,
  ModelSelectorRadioItem,
  ModelSelectorSeparator,
  ModelSelectorSub,
  ModelSelectorSubTrigger,
  ModelSelectorSubContent,
} from "@/components/nexus-ui/model-selector";

パーツ：

パーツ	目的
ModelSelector	ルートプロバイダーとドロップダウンのルートです。選択コンテキストを管理します（ルートの propsを参照）。
ModelSelectorPortal	メニューコンテンツをポータルに配置する場合に使う、オプションのポータルラッパーです。
ModelSelectorTrigger	メニューを開きます。items が設定されている場合は、選択中のラベルを表示します。
ModelSelectorContent	メニューの本体／パネルです。
ModelSelectorGroup	行をグループ化します。多くの場合、ModelSelectorLabel と組み合わせて使います。
ModelSelectorLabel	グループ内のセクション見出しです。
ModelSelectorItem	汎用のメニュー行です。
ModelSelectorItemTitle	項目の主要テキスト行です。
ModelSelectorItemDescription	項目の補足テキスト行です。
ModelSelectorItemIcon	項目の先頭に表示するアイコン用スロットです。
ModelSelectorItemIndicator	選択状態を示すインジケーターです（チェックマークなど）。
ModelSelectorCheckboxItem	チェックボックス形式のメニュー項目です。
ModelSelectorRadioGroup	単一選択グループです。Radix の value ／ onValueChange を渡します。
ModelSelectorRadioItem	ラジオ形式の行です。title、description、icon、indicator に対応しています。
ModelSelectorSeparator	セクション間の視覚的な区切りです。
ModelSelectorSub	ネストされたサブメニューのコンテナーです。
ModelSelectorSubTrigger	サブメニューを展開する行です。
ModelSelectorSubContent	ネストされた項目を表示するポップオーバーの本体です。

ルートの props： ModelSelector では、value と onValueChange が必須です。items は任意で、トリガーの表示テキストと内部メタデータを設定するための { value, title, description?, icon? }[] を指定します。その他の Radix メニュールート props も適用されますが、ルートの value ／ onValueChange はこの API 専用です。

Props とフック： ModelSelectorTrigger には variant が追加されています。値は filled | outline | ghost で、デフォルトは filled です。選択状態は React の状態（value ／ onValueChange）で管理します。Radix の動作以外に追加のフックはありません。

使用上の注意： 排他的な選択肢には ModelSelectorRadioGroup と ModelSelectorRadioItem の組み合わせを、多重選択が必要な場合には ModelSelectorCheckboxItem を推奨します。高度なツリー構造は ModelSelectorSub ／ SubTrigger ／ SubContent でネストできます。項目数の多いメニューには ModelSelectorGroup、ModelSelectorLabel、ModelSelectorSeparator が便利です。

例：

// models: { value: string; title: string; description?: string; icon?: ComponentType<{ className?: string }> }[]
const [model, setModel] = React.useState(models[0].value);

<ModelSelector value={model} onValueChange={setModel} items={models}>
  <ModelSelectorTrigger />
  <ModelSelectorContent align="start">
    <ModelSelectorGroup>
      <ModelSelectorLabel>Select model</ModelSelectorLabel>
      <ModelSelectorRadioGroup value={model} onValueChange={setModel}>
        {models.map((m) => (
          <ModelSelectorRadioItem
            key={m.value}
            value={m.value}
            icon={m.icon}
            title={m.title}
            description={m.description}
          />
        ))}
      </ModelSelectorRadioGroup>
    </ModelSelectorGroup>
  </ModelSelectorContent>
</ModelSelector>

提案

クイックプロンプト用のチップと、グループ化された提案を表示するオプションのアニメーション付きパネルです。

インポート：

import Suggestions, {
  SuggestionList,
  Suggestion,
  SuggestionPanel,
  SuggestionPanelHeader,
  SuggestionPanelTitle,
  SuggestionPanelClose,
  SuggestionPanelContent,
} from "@/components/nexus-ui/suggestions";

パーツ：

パーツ	目的
Suggestions	ルート。チップのクリック時に呼び出される（コンテキスト経由の）オプションの onSelect(value: string) を指定できます。
SuggestionList	チップのフレックスリスト。orientation は "horizontal" | "vertical" です。
Suggestion	チップの Button。variant は filled | outline | ghost です。オプションで value、highlight を指定できます。
SuggestionPanel	グループ化された提案を囲むアニメーション付きのシェルです。
SuggestionPanelHeader	パネル内のトップバーです。
SuggestionPanelTitle	ヘッダー内のタイトル行です。
SuggestionPanelClose	閉じるコントロールです。asChild に対応しています。
SuggestionPanelContent	本文領域です。asChild に対応しています。

ルートの props： Suggestions — オプションの onSelect(value: string)。SuggestionPanel — オプションの open（デフォルトは true）、onOpenChange、onClose（終了アニメーション後に実行されます）。

Props とフック： セレクターフックはありません。onSelect と Suggestion の Button props を通じて動作を設定します。Suggestion は外側の variant を省略し、上記の Nexus の variant ユニオンを使用します。

使用上の注意： 複数の SuggestionList ブロックを組み合わせるか、段階的に情報を開示するためにリストを SuggestionPanel 内に配置します。highlight は、チップのラベル内で一致する部分を暗く表示します。閉じる操作を行うには、ヘッダーで SuggestionPanelClose を使用します。

例：

// Often paired with prompt state: onSelect((q) => setInput(q))
<Suggestions onSelect={(q) => setInput(q)}>
  <SuggestionList>
    <Suggestion value="Summarize this thread">Summarize this thread</Suggestion>
    <Suggestion value="Draft a reply">Draft a reply</Suggestion>
  </SuggestionList>
</Suggestions>

添付ファイル

プロンプトまたはメッセージ行用の、制御されたファイルプレビューです。非表示のファイル入力、オプションのウィンドウレベルのドラッグ＆ドロップ、アイテムごとの削除／進捗 UI を備えています。

インポート：

import Attachments, {
  AttachmentTrigger,
  AttachmentList,
  Attachment,
  AttachmentPreview,
  AttachmentRemove,
  AttachmentInfo,
  AttachmentProperty,
  AttachmentProgress,
  AttachmentsDropOverlay,
  useAttachments,
  toAttachmentMeta,
  filesFromDataTransfer,
} from "@/components/nexus-ui/attachments";

パーツ：

パーツ	目的
Attachments	ルートプロバイダー：非表示の <input type="file">、検証、Blob URL のライフサイクル管理、オプションの window ドロップリスナーです。
AttachmentTrigger	ファイル選択ダイアログを開きます（カスタムトリガーを作成する場合は、useAttachments().inputId／ラベルと組み合わせます）。
AttachmentList	各 Attachment を格納する水平スクローラー／フレックス行です。
Attachment	1 つのタイルです。attachment: AttachmentMeta を渡します。variant は compact | inline | detailed | pasted です。
AttachmentPreview	サムネイルまたはファイル形式アイコンの領域です（コンテキスト：現在の添付ファイル）。
AttachmentInfo	AttachmentProperty の行を格納するテキスト列のラッパーです。
AttachmentProperty	as="name" | "size" | "kind" を通じて、name、size、またはファイルの kind を表示します。
AttachmentRemove	現在のアイテムを削除します（指定されている場合は、Attachment の onRemove を呼び出します）。
AttachmentProgress	細い進捗バーです。value は 0～100 です。
AttachmentsDropOverlay	ドラッグ中に表示されるドロップシャドウのオーバーレイです。variant は fullscreen | contained です。

ルートの props： Attachments では、attachments と onAttachmentsChange が必須です。オプション：accept、multiple（デフォルトは true）、maxFiles、maxSize（ファイルごと、バイト単位）、disabled、onFileInputChange、onFilesRejected、windowDrop。

Props とフック： useAttachments() — <Attachments> の内側でのみ使用可能 — は、inputRef、inputId、openPicker、appendFiles、isDraggingFile、現在の attachments、onAttachmentsChange、上限値、disabled を公開します。エクスポートされる型：AttachmentMeta、AttachmentsRejectedFiles、AppendFilesOptions。ヘルパー：toAttachmentMeta(file, options?)、貼り付け／ドロップ用の filesFromDataTransfer。

使用上の注意： カスタムのドロップ／貼り付けハンドラーから appendFiles を呼び出すと、ネイティブのファイル選択ダイアログと同じ制限を適用できます。アプリ全体のファイルドラッグ時のヒントを表示するには、windowDrop と AttachmentsDropOverlay を有効にします。制御された attachments 配列からアイテムがなくなると、オブジェクト URL は解放されます。

例：

const [items, setItems] = React.useState<AttachmentMeta[]>([]);

<Attachments attachments={items} onAttachmentsChange={setItems} accept="image/*" maxFiles={5}>
  <AttachmentTrigger />
  <AttachmentList>
    {items.map((meta, index) => (
      <Attachment
        key={meta.url ?? `${meta.name}-${index}`}
        attachment={meta}
        variant="compact"
        onRemove={() => setItems(items.filter((_, i) => i !== index))}
      />
    ))}
  </AttachmentList>
</Attachments>

メッセージ

ユーザーまたはアシスタントの行です。任意のアバター、Markdown の本文（Streamdown 経由）、末尾のアクションで構成されます。

インポート：

import {
  Message,
  MessageStack,
  MessageContent,
  MessageMarkdown,
  MessageActions,
  MessageActionGroup,
  MessageAction,
  MessageAvatar,
} from "@/components/nexus-ui/message";

パーツ：

パーツ	目的
Message	ルート。必須の from は "user" | "assistant"（レイアウトと role="article" を指定します）。
MessageStack	1 つのメッセージ内に複数のブロックを配置する縦方向のスタックです。
MessageContent	吹き出し／コンテンツのラッパー（ユーザーとアシスタントでスタイルが異なります）。
MessageMarkdown	Streamdown プラグイン（コード、数式、mermaid、CJK）を使って Markdown をレンダリングします。
MessageActions	アクション行のコンテナーです。
MessageActionGroup	アクションボタンをグループ化します。
MessageAction	単一のアクションです。asChild と、tooltip（文字列またはオブジェクト）による任意の組み込みツールチップに対応しています。
MessageAvatar	アバター列です。src、任意の fallback、alt、size、delayMs を指定します。

ルートの props： Message では from が必須で、値は "user" | "assistant" です。標準の HTMLAttributes<HTMLDivElement> は article ラッパーに適用されます。aria-label または aria-labelledby を渡さない場合、デフォルトの aria-label は "User message" または "Assistant message" です。

Props とフック： エクスポートされたコンテキストフックはありません。子孫コンポーネント（MessageStack、MessageContent、MessageActions など）は、内部コンテキストから from を読み取ります（Message の外で使う場合は assistant がフォールバックになります）。MessageMarkdown は Streamdown の props（ComponentProps<typeof Streamdown>）を受け取ります。たとえば、children による Markdown、組み込みの code／table／inlineCode のデフォルトにマージされる任意の components、および className を指定できます。MessageAction は asChild（Radix Slot）と tooltip?: string | { content?: string; side?: "top" | "right" | "bottom" | "left"; shortcut?: string } に対応しています（content がない場合、ツールチップは表示されません）。MessageAvatar では src が必須です。alt、fallback、delayMs、size、className は任意です。

使用上の注意： レジストリからインストールすると、message.tsx と同じ場所に codeblock.tsx が追加されます。手動でインストールする場合は、レジストリ項目の Streamdown 関連 CSS をマージしてください。アクションには、Button を MessageAction asChild で囲む方法をおすすめします。

例：

<Message from="assistant">
  <MessageAvatar src="https://github.com/shadcn.png" fallback="AI" />
  <MessageStack>
    <MessageContent>
      <MessageMarkdown>Here is **markdown** and `inline code`.</MessageMarkdown>
    </MessageContent>
    <MessageActions>
      <MessageActionGroup>
        <MessageAction asChild>
          <Button type="button" variant="ghost" size="sm">
            Copy
          </Button>
        </MessageAction>
      </MessageActionGroup>
    </MessageActions>
  </MessageStack>
</Message>

<Message from="user">
  <MessageContent>
    <MessageMarkdown>Short user reply</MessageMarkdown>
  </MessageContent>
</Message>

スレッド

use-stick-to-bottom をラップし、新しいコンテンツに追従して固定されるスクロール可能なメッセージリストと、ユーザーが上にスクロールしたときに表示されるフローティングコントロールを提供します。

インポート：

import {
  Thread,
  ThreadContent,
  ThreadScrollToBottom,
} from "@/components/nexus-ui/thread";

パーツ：

パーツ	目的
Thread	ルート。StickToBottom の props（resize、initial、spring オプションなど）を転送します。
ThreadContent	メッセージ用のスクロール可能な列（flex flex-col gap-*）です。
ThreadScrollToBottom	最下部にいないときに表示されるボタン（または asChild）です。scrollToBottom を呼び出します。

ルートの props： Thread は、デフォルトが resize="smooth" および initial="smooth" の StickToBottom です。任意で StickToBottomOptions の resize、initial、mass、damping、stiffness、targetScrollTop を指定できます。また、instance（事前に作成した stick-to-bottom インスタンス）、contextRef、外側の div に適用される標準の HTMLAttributes も指定できます。

Props とフック： Thread の内側では、use-stick-to-bottom の useStickToBottomContext() を使って isAtBottom、scrollToBottom、state などを取得します。ThreadScrollToBottom は内部でこのコンテキストを使用し、すでに最下部にいる場合は null を返します。asChild と標準のボタン用 HTML 属性を受け取ります（asChild を指定しない場合は、スタイル付きの <button> をレンダリングします）。

使用上の注意： Thread の内側で、ThreadContent と ThreadScrollToBottom を兄弟要素として配置してください。スクロール領域を定義できるように、Thread に高さの上限を指定してください（例：h-full／min-h-*）。

例：

<Thread className="min-h-[480px]">
  <ThreadContent>
    {messages.map((m) => (
      <Message key={m.id} from={m.role === "user" ? "user" : "assistant"}>
        <MessageContent>
          <MessageMarkdown>{m.text}</MessageMarkdown>
        </MessageContent>
      </Message>
    ))}
  </ThreadContent>
  <ThreadScrollToBottom />
</Thread>

引用

Radix の HoverCard プレビューを備えた、組み合わせ可能なインライン引用チップです。URL が複数ある場合は、パネル内でカルーセル（CitationCarousel*）を使用します。

インポート：

import {
  Citation,
  CitationTrigger,
  CitationContent,
  CitationSource,
  CitationSourcesBadge,
  CitationItem,
  CitationFavicon,
  CitationSiteName,
  CitationCarousel,
  CitationCarouselContent,
  CitationCarouselHeader,
  CitationCarouselItem,
  CitationCarouselPrev,
  CitationCarouselNext,
  CitationCarouselPagination,
  CitationCarouselIndex,
} from "@/components/nexus-ui/citation";

ヘルパー： resolveCitationSources、resolveCitationSource、parseCitationUrl、rootDomainSiteName、型 CitationSourceInput、ResolvedCitation。

パーツ：

パーツ	用途
Citation	ルートの HoverCard。解決済みのソースとカルーセルのインデックス状態を管理します。
CitationTrigger	チップのトリガー。単一ソースの場合はリンクとして、複数ソースの場合は span と「+N」として表示します。
CitationContent	ホバーパネルの表面（デフォルトは align="center"、sideOffset={4}）。
CitationCarousel	Shadcn の Carousel。setApi を引用コンテキストに接続します。
CitationCarouselContent / Item	スライド。各 CitationCarouselItem には index が必要です。
CitationCarouselPrev / Next / Index / Pagination / Header	ナビゲーション用の装飾要素。
CitationItem	デフォルトのプレビュー本文（タイトル、説明、CitationSource）、またはカスタムの子要素。href へのアンカーです。
CitationSource	フッター行：ファビコンとサイト名。
CitationFavicon / CitationSiteName	アクティブなカルーセル項目、または CitationItem のスコープから解決します。
CitationSourcesBadge	ファビコンのスタックと「N 件のソース」（またはカスタムの label）。ツールバー用であり、ホバーチップには使用しません。

ルートの props： Citation では citations: CitationSourceInput[]（url、任意の title、description）が必須です。その他のすべての props は HoverCard の children を除外して引き継ぎます。任意の children でトリガーとコンテンツを組み合わせられます。citations が空の場合は null をレンダリングします。ルートカードの openDelay / closeDelay は 50 に設定されています。

Props とフック： エクスポートされるフックはありません。CitationItem、CitationFavicon などには、祖先の Citation と（カルーセル内の項目の場合）index が一致する CitationCarouselItem が必要です。CitationTrigger：label、showFavicon（デフォルトは true）、showSiteName（デフォルトは true）は任意です。CitationCarouselItem：index: number が必須です。CitationItem：showTitle、showDescription、showSource（デフォルトは true）は任意です。href のデフォルトは解決済み URL です。CitationSourcesBadge：showFavicons、label は任意です。

使用上の注意： RAG / 検索パイプラインから citations を構築します。URL を独自に正規化する場合は resolveCitationSources を使用してください。URL が2つ以上ある場合は、CitationContent 内に CitationCarousel と、インデックスごとに1つの CitationCarouselItem を配置します。CitationSourcesBadge はメッセージヘッダーやアクション用の任意の装飾要素であり、引き続き Citation の配下に配置します。

使用例（単一ソース）：

<Citation
  citations={[
    {
      url: "https://vercel.com/blog",
      title: "Vercel Blog",
      description: "Product and platform updates.",
    },
  ]}
>
  <CitationTrigger />
  <CitationContent>
    <CitationItem />
  </CitationContent>
</Citation>

使用例（複数ソース＋カルーセル）：

const sources = [
  { url: "https://example.com/a", title: "Source A" },
  { url: "https://example.com/b", title: "Source B" },
];

<Citation citations={sources}>
  <CitationTrigger />
  <CitationContent>
    <CitationCarousel>
      <CitationCarouselHeader>
        <CitationSourcesBadge />
        <CitationCarouselPagination>
          <CitationCarouselPrev />
          <CitationCarouselIndex />
          <CitationCarouselNext />
        </CitationCarouselPagination>
      </CitationCarouselHeader>
      <CitationCarouselContent>
        {sources.map((_, index) => (
          <CitationCarouselItem key={index} index={index}>
            <CitationItem />
          </CitationCarouselItem>
        ))}
      </CitationCarouselContent>
    </CitationCarousel>
  </CitationContent>
</Citation>

Reasoning

shadcn Collapsible に基づく、折りたたみ可能な「思考」ブロックです。トリガーのラベルは、ストリーミング中のテキストから所要時間の概要に切り替わり、本文は Streamdown で Markdown をレンダリングします。

インポート：

import {
  Reasoning,
  ReasoningTrigger,
  ReasoningContent,
} from "@/components/nexus-ui/reasoning";

パーツ：

パーツ	目的
Reasoning	ルートプロバイダーと折りたたみ可能なルートです。開閉状態と isStreaming を管理し、状況に応じたトリガーラベル（Thinking… → Thought for N seconds）を組み立てます。
ReasoningTrigger	脳のアイコン、ラベルテキスト（ストリーミング中は span に tw-shimmer ユーティリティを適用）、開いているときに回転するシェブロンを含む行です。
ReasoningContent	Streamdown で、控えめなスタイルと先頭のボーダー付きで Markdown を展開します。children: string（Markdown のソース）が必要です。

ルートのプロパティ： Reasoning の任意の isStreaming（デフォルトは false）によって、ストリーミング中は自動で開き、ストリーミング終了時は自動で閉じて所要時間を記録します。任意の制御用 open／defaultOpen／onOpenChange も指定できます（折りたたみの仕様を継承しますが、Reasoning では Radix の open／defaultOpen／onOpenChange を型から除外し、記載されているプロパティを代わりに使用します）。その他の Collapsible 互換プロパティと className も受け付けます。

プロパティとフック： エクスポートされたフックはありません（内部コンテキストのみ）。ReasoningTrigger／ReasoningContent は Reasoning の子孫である必要があります。レジストリからインストールすると、collapsible、streamdown、Hugeicons パッケージ、@import "tw-shimmer"、折りたたみの高さアニメーション用キーフレームが追加されます。

使用上の注意： チャットのトランスポートまたはパートストリームから isStreaming を切り替えます。計算されたラベルを使う場合は ReasoningTrigger の子を省略してください。表示ラベルを上書きする場合のみ子を渡し、その際はアクセシビリティに配慮してください。

例：

<Reasoning isStreaming={status === "streaming"}>
  <ReasoningTrigger />
  <ReasoningContent>{reasoningMarkdownString}</ReasoningContent>
</Reasoning>

Text Shimmer

テキスト上を動くハイライトをアニメーション表示する単一のプリミティブです（bg-clip-text と注入される @keyframes を使用）。@/lib/utils 以外に UI 依存関係はありません。

インポート：

import { TextShimmer } from "@/components/nexus-ui/text-shimmer";

パーツ： 単一のコンポーネント TextShimmer です。as による任意のポリモーフィックなルートを指定できます（デフォルトは "span"）。

ルートのプロパティ： duration — アクティブなスイープの秒数（デフォルトは 2.5）。repeatDelay — 次のスイープまでの間隔（デフォルトは 0）。spread — 中心からのハイライト幅（パーセントポイント単位、約5～45に制限、デフォルトは 20）。angle — グラデーション軸に加える角度（デフォルトは 0）。color — ビームの停止色を上書きします。invert — デフォルトのライト／ダークのビームのコントラストを反転します。標準の HTML 属性、className、style も指定できます。子要素はラベルのテキスト／ノードツリーです。

プロパティとフック： コンテキストはありません。useId を使って、インスタンスごとに一意の @keyframes 名を注入します。

使用上の注意： 「ツールを実行中…」など、短いステータス文字列に使うのがおすすめです。文字組みから端の色を継承させる場合は、ラッパーに控えめな text-muted-foreground を組み合わせてください。

例：

<TextShimmer repeatDelay={0.5}>Running tool calls</TextShimmer>

Image

マルチモーダルモデル向けの組み合わせ可能な画像タイルです。src、base64、または uint8Array（+ mediaType）を受け取り、ライトボックス表示用にコンテンツを Radix Dialog のルートでラップし、ローダーと絶対配置のアクション領域を提供します。

インポート：

import {
  Image,
  ImagePreview,
  ImageLightbox,
  ImageLightboxOverlay,
  ImageLightboxPreview,
  ImageLightboxClose,
  ImageLoader,
  ImageActions,
  ImageActionGroup,
  ImageAction,
} from "@/components/nexus-ui/image";

パーツ：

パーツ	目的
Image	Dialog 内のルート div です。src、base64 からのデータ URL、または uint8Array からのオブジェクト URL を解決し、コンテキストを提供します。デフォルトの子要素は ImagePreview です。
ImagePreview	サムネイルです。src が解決されると <img> を Dialog の Trigger でラップし、空の場合は ImageLoader を表示します。
ImageLightbox	Dialog.Portal のラッパーです。
ImageLightboxOverlay	モーダルの背景です。
ImageLightboxPreview	大きな <img>（object-contain）とスクリーンリーダー向けタイトルを含む Dialog.Content です。
ImageLightboxClose	視覚的に隠された閉じるコントロール（sr-only）です。
ImageLoader	パルス表示のスケルトンです。コンテキストを介してエラー状態を反映します。
ImageActions	絶対配置のアクションストリップです。align：inline-start | inline-end | block-start | block-end。
ImageActionGroup / ImageAction	グループ化されたコントロールです。ImageAction は asChild + Slot と、tooltip（文字列またはオブジェクト）による任意の組み込みツールチップをサポートします。

ルートの props： Image には src、base64、uint8Array のいずれかを渡します。mediaType、alt は任意です。また、Radix ダイアログのルート props（open、defaultOpen、onOpenChange、modal）と通常の div HTML 属性／className も渡せます。

Props とフック： 内部コンテキストのみです（エクスポートされるフックはありません）。ネストされたパーツは Image の内側に配置する必要があります。

使用上の注意： デフォルトのプレビューを表示するには、Image の children を省略します。プレビューをクリックするとモーダルが開くように、ImageLightbox* はルートカードの兄弟要素として組み合わせます（ドキュメントで一般的なパターンです）。ダウンロードや共有には、ImageActions と ImageAction asChild で Button をラップして使用します。ラベル、配置する側、任意のショートカットを指定するには、ImageAction に tooltip を追加します。

例（最小構成）：

<Image base64={modelImageBase64} alt="Generated scene">
  <ImagePreview />
  <ImageLightbox>
    <ImageLightboxOverlay />
    <ImageLightboxPreview />
    <ImageLightboxClose />
  </ImageLightbox>
</Image>

Feedback Bar

メッセージやスレッド上で「役に立ちましたか？」のような操作を行うためのコンパクトなバーです。左側にプロンプト（ラベル）、右側にアクション（例：親指アイコン）を配置し、任意で閉じる列を追加できます。FeedbackBarAction は asChild を使って実際のボタンをラップでき、任意のキーボードショートカットチップを含むツールチップを表示できます（shadcn Tooltip + Kbd）。

インポート：

import {
  FeedbackBar,
  FeedbackBarContent,
  FeedbackBarPrompt,
  FeedbackBarLabel,
  FeedbackBarActions,
  FeedbackBarAction,
  FeedbackBarClose,
} from "@/components/nexus-ui/feedback-bar";

パーツ：

パーツ	目的
FeedbackBar	ルートの role="group" ストリップです。デフォルトは h-12、幅いっぱい（最大約 28rem）、境界線付きの rounded-[12px] サーフェスです。
FeedbackBarContent	バー全体に広がる justify-between のフレックス行です。
FeedbackBarPrompt	テキストと先頭コンテンツ用の左側のグループです（デフォルトは pl-4）。
FeedbackBarLabel	主なプロンプトテキストです（font-[350]）。
FeedbackBarActions	コントロールグループ用の右側のグループです（gap-1.5）。
FeedbackBarAction	単一のコントロール用ラッパーです。asChild + Slot と、任意の tooltip：string または { content?, side?, shortcut? } を指定できます。
FeedbackBarClose	先頭に境界線がある幅の狭い右側の列です。ホストの div を FeedbackBarAction + asChild でラップします。子要素として閉じる Button／IconButton を渡します。

ルートの props： 各パーツで通常の HTMLAttributes を使用します。スロットパーツは className を受け取ります。FeedbackBarAction / FeedbackBarClose については、上記のツールチップの説明を参照してください。

Props とフック： コンテキストはありません。tooltip.content を指定した各アクションでは、ローカルの TooltipProvider がレンダリングされます。

使用上の注意： タップ領域を確保するには、アイコンボタンを FeedbackBarAction asChild の内側に配置します。実際のキーボード操作に合わせる場合は、tooltip の shortcut を優先して使用します。

例：

<FeedbackBar>
  <FeedbackBarContent>
    <FeedbackBarPrompt>
      <FeedbackBarLabel>Was this response helpful?</FeedbackBarLabel>
    </FeedbackBarPrompt>
    <FeedbackBarActions>
      <FeedbackBarAction asChild tooltip={{ content: "Helpful", shortcut: "⌘Y" }}>
        <button type="button" aria-label="Helpful">…</button>
      </FeedbackBarAction>
    </FeedbackBarActions>
    <FeedbackBarClose>
      <button type="button" aria-label="Dismiss">…</button>
    </FeedbackBarClose>
  </FeedbackBarContent>
</FeedbackBar>

Toaster

Sonner を利用したヘッドレスなトースト通知です。バリアントに応じたスタイルと、カスタムのアクション／キャンセルコントロールを備えています。ライト／ダーク／システムテーマには next-themes を使用します。Toaster（ルートレイアウトで一度だけマウント）と、使いやすいヘルパーおよび toast.dismiss を備えた toast オブジェクトをエクスポートします。

インポート：

import { Toaster, toast } from "@/components/nexus-ui/toaster";

パーツ／API：

エクスポート	用途
Toaster	toastOptions={{ unstyled: true }} と useTheme() のテーマを指定して <Sonner /> をレンダリングします。追加の ToasterProps も展開します。
toast.custom	完全にカスタマイズ可能なペイロード（title、任意の description、variant、icon、action、cancel、Sonner のタイミング／オプション）を作成します。
toast.default / success / info / warning / error / loading	toast.custom に委譲する簡易形式の (title, options?) です。
toast.dismiss	Sonner の閉じる API に転送します。

ルートの props： Toaster では、標準の Sonner props（position、duration、expand など）に加えて、Sonner の className マージ動作を利用できます。

Props とフック： useTheme() が解決されるよう、Toaster をレンダリングするレイアウトの上位に next-themes の ThemeProvider が必要です。トーストの本文では、アクション／キャンセル／閉じるボタンに shadcn の Button を使用します。

使用上の注意： <Toaster /> はアプリのクロームの隣（例：layout.tsx）に配置します。簡単なフィードバックには toast.success("Copied") を使用し、キャンセルボタンやカスタムアイコンが必要な場合は toast.custom を使用します（デフォルトのアイコンを非表示にするには icon: null を指定します）。

使用例：

// layout.tsx
<Toaster position="bottom-right" />

// anywhere client-side
toast.success("Saved");
toast.error("Something went wrong", { description: "Try again.", duration: 5000 });

Chain of Thought

ツール／推論ステップを構造化されたタイムラインで表示します。ルートの折りたたみ可能な領域がすべての子ステップのステータスを追跡し、アクティブなラベルには任意でシマー（tw-shimmer 経由）を表示できます。また、ステップの遷移に応じた自動開閉には useOnChange を使用します。

インポート：

import {
  ChainOfThought,
  ChainOfThoughtTrigger,
  ChainOfThoughtContent,
  ChainOfThoughtStep,
  ChainOfThoughtStepTitle,
  ChainOfThoughtStepContent,
  ChainOfThoughtComplete,
  type ChainOfThoughtStepStatus,
} from "@/components/nexus-ui/chain-of-thought";

パーツ：

パーツ	用途
ChainOfThought	ステップ用のコンテキストレジストリを備えたルートの Collapsible です。すべてのステップが completed になると閉じる autoCloseOnAllComplete（デフォルトは true）を指定できます。
ChainOfThoughtTrigger	アイコン／ラベルを任意で表示できるヘッダー行と、シェブロンです。処理中はラベルがシマー表示されます。
ChainOfThoughtContent	ChainOfThoughtStep のリストを格納する本文コンテナです。
ChainOfThoughtStep	ステップごとの Collapsible です。status が登録とシマー表示を制御し、hasContent と autoCloseOnComplete が展開状態を自動管理します。
ChainOfThoughtStepTitle	アイコンとラベルを含む行です。展開可能なコンテンツがある場合は CollapsibleTrigger になり、collapsible を強制することもできます。
ChainOfThoughtStepContent	ステップの展開可能な出力領域です。
ChainOfThoughtComplete	ステップの後に表示する任意のフッター行（「すべてのステップが完了しました」）です。

ルートの props： ソースの型を参照してください。ルートとステップでは、制御用の open／defaultOpen／onOpenChange を使用できます。ChainOfThoughtStepStatus は "pending" | "active" | "completed" | "error" です。

Props とフック： 内部コンテキストのみを使用します。レジストリから取得する場合、インストールには lib/use-on-change.ts が含まれます。

使用上の注意： 展開／折りたたみを使用する場合は、hasContent に各ステップの安定した表示コンテンツを設定してください。各ステップの status を更新して、ストリーミング／ツールイベントと連携させます。

使用例（構造）：

<ChainOfThought>
  <ChainOfThoughtTrigger>Chain of thought</ChainOfThoughtTrigger>
  <ChainOfThoughtContent>
    <ChainOfThoughtStep status="completed">
      <ChainOfThoughtStepTitle icon={…} label="Search the web" />
    </ChainOfThoughtStep>
    <ChainOfThoughtStep status="active" hasContent>
      <ChainOfThoughtStepTitle icon={…} label="Read results" />
      <ChainOfThoughtStepContent>…</ChainOfThoughtStepContent>
    </ChainOfThoughtStep>
  </ChainOfThoughtContent>
</ChainOfThought>

ツール

単一のツール呼び出しに対応した、状態を反映する折りたたみ可能な UI です。ステータスに応じてヘッダー（アイコン＋バッジ）が変わり、JSON 入力と、Shiki コードブロックによる任意の出力を表示します。Vercel AI SDK のツールパートの各状態に対応します。

インポート：

import {
  Tool,
  ToolTrigger,
  ToolContent,
  ToolInput,
  ToolOutput,
  type ToolStatus,
} from "@/components/nexus-ui/tool";

パーツ：

パーツ	目的
Tool	ルートの Collapsible です。必須の status（pending | ready | running | completed | error）が、バッジやアイコンのスタイル設定に使う CSS 変数とコンテキストを設定します。
ToolTrigger	ヘッダー行です。必須の name（ツールのラベル）に加え、ステータスバッジとシェブロンを表示します。
ToolContent	ToolInput / ToolOutput セクション用の本文です。
ToolInput	書式設定された JSON（または文字列）の入力ブロックを表示します。
ToolOutput	status が showWhen（デフォルトは ["completed"]）に含まれる場合に出力を表示します。error の場合は errorText と、任意でペイロードのコードブロックを表示します。

ルートの props： Tool は Collapsible の props を転送します。ToolOutput は showWhen?: ToolStatus[] と errorText?: string を受け取ります。

props とフック： 内部コンテキストのみです。レジストリのインストールでは、tool.tsx とともに codeblock-new.tsx と lib/shiki/highlighter.ts が追加されます。

使用上の注意： ツールのライフサイクルに応じて status を設定してください（例：AI SDK の tool-invocation の状態をマッピングします）。失敗時にも出力が必要な場合は、ToolOutput に showWhen={["completed", "error"]} を指定してください。

例：

<Tool status="running">
  <ToolTrigger name="search_web" />
  <ToolContent>
    <ToolInput payload={{ query: "nexus ui" }} />
    <ToolOutput payload={result} showWhen={["completed", "error"]} errorText="Search failed" />
  </ToolContent>
</Tool>

質問

チャットで追加の確認を行うためのカード UI です。items のメタデータを渡し、Question スライドを QuestionOption / QuestionOther と組み合わせ、QuestionsCarousel* で移動し、onSubmit で回答を収集します。

インポート：

import {
  Questions,
  Question,
  QuestionOptions,
  QuestionOption,
  QuestionOther,
  QuestionsTitle,
  QuestionsHeader,
  QuestionsFooter,
  QuestionsSkip,
  QuestionsSubmit,
  QuestionsDismiss,
  QuestionsCarousel,
  QuestionsCarouselContent,
  QuestionsCarouselItem,
  QuestionsCarouselPagination,
  QuestionsCarouselPrev,
  QuestionsCarouselNext,
  QuestionsCarouselIndex,
  type QuestionsSubmission,
  type QuestionInput,
} from "@/components/nexus-ui/questions";

パーツ：

パーツ	目的
Questions	ルートの Card とプロバイダーです。必須の items: QuestionInput[] と、任意の autoAdvance（デフォルトは true）、onSubmit、onSkip、onDismiss を受け取ります。
QuestionsHeader / QuestionsTitle / QuestionsDismiss	上部の表示要素と閉じる操作です。
QuestionsCarousel*	複数の質問に対応する Shadcn Carousel ラッパーです（Prev / Next / Index / Pagination）。
Question	1 つのスライドです。id、type（single | multiple）、prompt、required を登録します。
QuestionOptions	選択肢の行を配置するラッパーです。
QuestionOption	選択可能な行です（質問の種類に応じたラジオボタンまたはチェックボックスのスタイル）。
QuestionOther	QUESTION_OTHER_VALUE を使う自由記述の「その他」選択肢です。
QuestionsFooter / QuestionsSkip / QuestionsSubmit	フッターの操作要素です。必須の質問に回答するまで送信は無効になります。

ルートの props： Questions は items、autoAdvance、onSubmit(submission: QuestionsSubmission)、onSkip(questionId)、onDismiss() を受け取ります。スキップされた任意の質問は、[No Preference] として送信されます。

props とフック： 内部コンテキストのみです。定数：QUESTION_OTHER_VALUE、QUESTION_NO_PREFERENCE_VALUE、QUESTION_NO_PREFERENCE_LABEL。

使用上の注意： autoAdvance が true の場合、単一選択では自動的に次へ進みます。複数の質問がある場合は、カルーセルの最後のスライドに到達するまで送信を非表示または無効にしてください。

例：

<Questions
  items={[
    {
      id: "scope",
      type: "single",
      prompt: "What should we focus on?",
      required: true,
      options: [
        { value: "perf", label: "Performance" },
        { value: "ux", label: "UX" },
      ],
    },
  ]}
  onSubmit={(submission) => console.log(submission)}
>
  <QuestionsHeader>
    <QuestionsTitle>Quick questions</QuestionsTitle>
    <QuestionsDismiss />
  </QuestionsHeader>
  <QuestionsCarousel>
    <QuestionsCarouselContent>
      {items.map((item) => (
        <QuestionsCarouselItem key={item.id}>
          <Question {...item}>
            <QuestionOptions>
              {item.options.map((option) => (
                <QuestionOption key={option.value} value={option.value}>
                  {option.label}
                </QuestionOption>
              ))}
              <QuestionOther />
            </QuestionOptions>
          </Question>
        </QuestionsCarouselItem>
      ))}
    </QuestionsCarouselContent>
  </QuestionsCarousel>
  <QuestionsFooter>
    <QuestionsSkip />
    <QuestionsSubmit />
  </QuestionsFooter>
</Questions>

AI SDK との統合

@ai-sdk/react の Vercel AI SDK を使用します。チャットフックでは、API ルートを指定する DefaultChatTransport などのトランスポートを使います。テキストエリアをローカル状態（またはフォームライブラリ）に接続し、送信時に sendMessage を呼び出します。

import * as React from "react";
import { useChat } from "@ai-sdk/react";
import { DefaultChatTransport } from "ai";
import {
  PromptInput,
  PromptInputTextarea,
  PromptInputActions,
  PromptInputActionGroup,
  PromptInputAction,
} from "@/components/nexus-ui/prompt-input";
import { Button } from "@/components/ui/button";
import { ArrowUp } from "lucide-react";

function ChatInput() {
  const [input, setInput] = React.useState("");
  const { sendMessage, status } = useChat({
    transport: new DefaultChatTransport({ api: "/api/chat" }),
  });

  const busy = status === "streaming" || status === "submitted";

  async function onSend() {
    const text = input.trim();
    if (!text || busy) return;
    await sendMessage({ text });
    setInput("");
  }

  return (
    <PromptInput>
      <PromptInputTextarea
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === "Enter" && !e.shiftKey) {
            e.preventDefault();
            void onSend();
          }
        }}
        disabled={busy}
      />
      <PromptInputActions>
        <PromptInputActionGroup>
          <PromptInputAction asChild>
            <Button
              type="button"
              size="icon"
              className="rounded-full"
              disabled={!input.trim() || busy}
              onClick={() => void onSend()}
            >
              <ArrowUp />
            </Button>
          </PromptInputAction>
        </PromptInputActionGroup>
      </PromptInputActions>
    </PromptInput>
  );
}

SDK に対応したファイル入力を使用する場合、添付ファイルは sendMessage({ text, files }) で同じターンに渡せます（FileList / ファイルパートについては、最新の AI SDK ドキュメントを参照してください）。

コンポジションの原則

1. 設定するのではなく、組み合わせます。 巨大な設定オブジェクトより、小さなプリミティブを優先してください。
2. プロンプトの操作には asChild を使用します。 Button を PromptInputAction asChild でラップします（該当する場合は SuggestionPanelClose asChild を使用します）。
3. プロンプトの操作をグループ化します。 PromptInputActions 内の PromptInputActionGroup を使い、左側（添付、ツール）と右側（送信）に分けます。
4. ソースを所有します。 コンポーネントはプロジェクトにコピーされるため、直接カスタマイズできます。

スタイリング

• 全体で Tailwind CSS v4 のユーティリティクラスを使用します。
• 任意の部分に className を指定して上書きできます。
• ダークモード：dark: バリアントは、一般的な shadcn スタイルのトークンに沿っています。

プロジェクト構成

components/
├── nexus-ui/
│   ├── prompt-input.tsx
│   ├── model-selector.tsx
│   ├── suggestions.tsx
│   ├── attachments.tsx
│   ├── message.tsx
│   ├── codeblock.tsx
│   ├── thread.tsx
│   ├── citation.tsx
│   ├── reasoning.tsx
│   ├── text-shimmer.tsx
│   ├── image.tsx
│   ├── feedback-bar.tsx
│   ├── toaster.tsx
│   ├── chain-of-thought.tsx
│   ├── codeblock-new.tsx
│   ├── tool.tsx
│   └── questions.tsx
├── ui/
│   ├── button.tsx
│   ├── textarea.tsx
│   ├── scroll-area.tsx
│   └── ...
└── ...

依存関係

レジストリ項目では必要に応じてこれらが導入されます（shadcn CLI がレジストリの依存関係をインストールします）。

• プロンプト入力： @radix-ui/react-slot、shadcn textarea、scroll-area、tooltip、kbd、@/lib/utils
• 候補： @radix-ui/react-presence、@radix-ui/react-slot、class-variance-authority、shadcn button
• モデルセレクター： radix-ui（DropdownMenu）、class-variance-authority、@hugeicons/react、@hugeicons/core-free-icons
• 添付ファイル： @radix-ui/react-slot、class-variance-authority、@hugeicons/react、@hugeicons/core-free-icons
• メッセージ： streamdown + @streamdown/* プラグイン、radix-ui、@radix-ui/react-slot、@hugeicons/react、@hugeicons/core-free-icons、shadcn button、avatar、tooltip、kbd
• スレッド： @radix-ui/react-slot、use-stick-to-bottom、@hugeicons/react、@hugeicons/core-free-icons
• 引用： radix-ui、@hugeicons/react、@hugeicons/core-free-icons、shadcn carousel、hover-card
• 推論： streamdown、@hugeicons/react、@hugeicons/core-free-icons、tw-shimmer、shadcn collapsible、シマーと折りたたみの高さのキーフレーム用レジストリ CSS
• テキストシマー： @/lib/utils のみ（cn）
• 画像： @radix-ui/react-dialog、@radix-ui/react-slot、shadcn tooltip、kbd、@/lib/utils
• フィードバックバー： @radix-ui/react-slot、shadcn tooltip、kbd、@/lib/utils
• トースター： sonner、next-themes、@hugeicons/react、@hugeicons/core-free-icons、shadcn button、@/lib/utils
• 思考の連鎖： @hugeicons/react、@hugeicons/core-free-icons、shadcn collapsible、tw-shimmer（レジストリ CSS）、@/lib/use-on-change、@/lib/utils
• ツール： @hugeicons/react、@hugeicons/core-free-icons、shiki、@react-symbols/icons、shadcn badge、collapsible、レジストリの codeblock-new.tsx、lib/shiki/highlighter.ts、@/lib/utils
• 質問： @hugeicons/react、@hugeicons/core-free-icons、shadcn carousel、button、card、checkbox、@/lib/utils

ドキュメント

• ウェブサイト：https://nexus-ui.dev
• ドキュメント：https://nexus-ui.dev/docs
• コンポーネント：プロンプト入力 · モデルセレクター · 候補 · 添付ファイル · メッセージ · スレッド · 引用 · 推論 · テキストシマー · 画像 · フィードバックバー · トースター · 思考の連鎖 · ツール · 質問
• GitHub：https://github.com/victorcodess/nexus-ui
• LLM コンテキスト：https://nexus-ui.dev/llms.txt