コンポーネントとブロック

BoardUIの各コンポーネント、ブロック、チャート、テンプレート 97 すべてで。。 62 オープンソースとしてこのプロジェクトに既に存在しています。各カードは、インストールコマンドとプロップを使って、Boardui.com のドキュメントを開きます。

基礎

2すべてのコンポーネントの基盤となるトークン。

カラー

すべてのカラーパレットと、用途に応じたトークン。

DisplayTitleHeadlineBody regularMono caption

タイポグラフィ

文字のサイズ体系、太さ、テキストスタイル。

基本コンポーネント

49日々の開発に使える基本コンポーネント。

Plans are billed monthly for every active seat.

アコーディオン

その場で開く FAQ や設定。

2つの新しいコンポーネント

Carousel と Input OTP は、今日の CLI を通じてインストール可能です。

お知らせ

閉じることができる製品ニュースのバナー。

アバター

写真がない場合はイニシャルを表示するユーザー画像。

パンくずリスト

階層を折りたためるパンくずリスト。

ボタン

プライマリ、セカンダリ、危険な操作のボタン。

ボタングループ

一体化した、選択可能なボタンの列。

カルーセル

スナップ、矢印、ドットでカードを切り替え。

選択済み未選択一部選択

チェックボックス

動くチェックマーク、カード型、2種類のサイズ。

完了待機中+14.8%確認済み失敗レビューv2.4.0ドラフト公開中-3.2%ベータ版アーカイブ済み

チップ

削除できるコンパクトなフィルタートークン。

閉じるボタン

使いやすさを考えた、小さな閉じるボタン。

コマンドパレット

すべてのページと操作を ⌘K ひとつで。

review @

トークン入力

@ メンションと / コマンドをトークンとして。

Q3 report.pdf2.4 MB

コンテキストメニュー

サブメニューも使える右クリック操作。

カラーピッカー

見た目、hex、プリセットから選べる。

MRMateo Ruiz

AHAmir Haddad

コンボボックス

入力して絞り込み、選択します。

Stay, 2026年11月

2026年11月

日付カレンダー

日付と期間を選べる、ページ上の 1 か月。

Mertcan Esmergul

hi@mertcan.works

30分イントロミーティング

設計ニーズとコラボレーション方法について話し合おう

30分英語

会議の日付, 2026年8月

2026年8月

日付ピッカー

1つの日付を選択するポップオーバーカレンダー。

または

区切り線

単線、二重線、塗りつぶしの区切り線。

Filters

Narrow the customer list.

StatusActiveTrialingPast dueCanceled

ドロワー

どの端からでも開くサイドパネルとボトムシート。

ドロップダウン

チーム、モデル、操作に使える、組み合わせ可能なメニュー。

ドラッグ&ドロップでアップロードまたはドロップ選択する

PDF, JPG, PNG, XLSX (最大) 8 MB)

アップロード ...

正常にアップロード!

ファイルアップロード

ドラッグによるアップロード、ファイルの検証、進捗の表示。

アイコンボタン

アイコンだけを表示する、正方形の操作ボタン。

入力

補助要素と入力検証を備えたテキスト入力欄。

OTP入力

貼り付けと自動入力に対応した、ワンタイムコードの入力欄。

リンクボタン

リンク風のスタイルを持つ、インラインのテキスト操作。

Storage72%

Seats84%

API requests96%

メーター

上限に対する使用量。満ちるにつれて色が変わります。

Delete project?

Acme Dashboard and its 24 files will be deleted for everyone. You can't undo this.

モーダル

暗くしたページの上に表示するダイアログとアラートダイアログ。

通知

アイコン、アバター、操作ボタン付きのステータスメッセージ。

Seats

Discount

数値フィールド

ステッパー、単位、上下限つきの数値入力。

ページネーション

省略表示に対応したページ番号。

ポップオーバー

トリガーに固定されたリッチなコンテンツ。矢印は任意です。

Uploading64%

プログレス

バーとリング。確定でも、スイープでも。

週次月次年次

ラジオボタン

グラデーションの丸、カード型、2種類のサイズ。

セグメントコントロール

選択表示がスライドする、カプセル型の切り替え。

Amir HaddadDesign

Priya NairDesign

検索フィールド

入力で絞り込み、Escape でクリア。

セレクト

検索付きの、1つの項目を選ぶリストボックス。

スケルトン

本物のコンテンツへとブラーで変わるプレースホルダー。

スライダー

単一の値、または最小・最大値で範囲を選択。

ソーシャルボタン

ロゴ付きの、24サービスに対応するサインインボタン。

スピナー

処理中を示す、重なった光の軌道。

スイッチ

スプリングの動きを備えたオン・オフの切り替え。

Name	Role	Status
Olivia Rhye	Product Designer	Active
Phoenix Baker	Engineer	Active
Lana Steiner	Design Lead	Invited
Demi Wilkinson	Frontend Engineer	Active

テーブル

並べ替え可能な列と、固定ヘッダー。

コンポーネント48

ブロック6

チャート

タブ

下線型とカプセル型のタブ一覧。

Topics

DesignEngineeringMarketingSalesSupport

BugFeature

タググループ

絞り込み、選択、削除ができるタグ。

0/120

テキストエリア

高さの自動調整と文字数表示を備えた複数行の入力欄。

Opens

9:00 AM

Closes

6:00 PM

時刻フィールド

セグメントごとに入力する時刻。

トースト

どこからでも toast()。積み重ねて時間で消えます。

src

components

button.tsx

button.module.css

page.tsx

README.md

ツリービュー

選択とキーボード操作に対応した入れ子のフォルダー。

ツールチップ

ホバーやフォーカス時に、適切な位置にヒントを表示。

ブロック

18そのまま組み込める、複数の部品を組み合わせたブロック。

考え中

ドキュメントを検索する

読み込みファイル

回答を書く

エージェントの思考

チャットコンポーザー用の、エージェント思考中の表示。

コンポーザーローダー

作業中のコンポーザーの周囲を巡る光の帯。

おかえりなさい

退去した場所をピックアップするためにサインインします。

または次の方法で続ける

初めてご利用ですか？アカウントを作成

認証カード

ソーシャルログイン付きのサインイン・新規登録ブロック。

ウェブ検索

エージェントが開いた情報源を含む調査履歴。

タスクリスト

エージェントのログを、1ステップずつストリーミング表示。

エージェントの使用制限

コンテキストウィンドウとプランの使用上限。

エージェントの進捗

複数ステップのAIタスクの進捗を、折りたたみ可能な形で表示。

カレンダー

イベントのラベル付きの月間カレンダー。

データグリッド

選択、フィルター、リアルタイム集計に対応した編集可能なスプレッドシート。

結果の合計

48 お客様の声

	ステータス
ジョン・クラークソン	配達失敗しました	2026年9月5日	$3.412
アスペン・ルビン	配達失敗しました	2026年3月25日	$1.899
マイケル・エストロム	出荷済み	2026年8月1日	$2.752
キアンナ・バカロ	出荷済み	2026年4月2日	$145
リヴィア・サリス	配達失敗しました	2026年11月14日	$708