コンポーネント

97 種類のコンポーネントを、FigmaからReactとTailwindで実装。コピーするか、次のコマンドで導入できます： npx boardui add。すべて同じトークンを共有するため、組み合わせても統一感を保てます。

基礎

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そのまま組み込める、複数の部品を組み合わせたブロック。

考え中

ドキュメントを検索する

読み込みファイル

回答を書く

エージェントの思考

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

57%

コンポーザーローダー

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

メインページプロジェクト・シー

57%

コンポーザーパネル

権限モードを備えた2行のチャット入力欄。

メインページプロジェクト・シー

57%

コンポーザーの添付ファイル

プロンプトの上にファイルのタイルが順番に現れます。

おかえりなさい

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

または次の方法で続ける

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

認証カード

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

ウェブ検索

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

タスクリスト

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

プランの使用制限 · Max (5x)

5時間の制限2時間46分リセット38%

毎週・全モデルリセット火曜日 3:00 PM3%

ウィークリー・プロリセット火曜日 3:00 PM5%

エージェントの使用制限

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

Which harness controls should stay in the top bar?

Show up sell toggleForces the upsell card up without spending the 4-turn allowance first.Wallpaper pickerThe chat wallpaper choices.Play level-upReplays the free and premium animations

Other

質問フォーム

計画モードの質問を、1ステップずつ表示。

クラウドエンジニア

名前

ラベル

説明

言語

通知

返信の準備ができたら通知が表示されます。

音声

再生速度

エージェント作成

エージェントの名前や説明、動くアバター、音声の設定を作成。

5 左の手順

プロジェクトファイルを読む

光モードトークンの更新とインストール

ダークモードトークンの実装

再利用可能な登録テーマを追加する toggle

レジストリ、lint、生産ビルドを実行

エージェントの進捗

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

2026年8月

日

月

火

水

木

金

土

+2 もっと詳しく

カレンダー

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

データグリッド

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

結果の合計

48 お客様の声

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

データテーブル

フィルター、選択、ページ分割を組み込み済み。

通知センター

タブと操作ボタンを備えた、グループ別のアクティビティ受信箱。

現在の計画

ウルトラ $149/月

通常よりも7倍以上の使用量です。

制限事項

プレミアムよりも7倍以上の使用量

プルリクエスト

レビュー提供者

レビューのGithubまたは他のプロバイダを選択

PRの目的地

アプリ内のプルリンクリクエストを開く

通知

重要な要求

モードが重要な決定を下す必要があるときに通知を受ける

システム通知

エージェントがタスクを完了したときに根本的な通知を表示する

完成音

タスクが完了したサウンド効果

ディスパッチアラート

BoardUIメッセージが送信されたときに電話に通知をプッシュする

設定モーダル

状態を管理できるダイアログ内に、複数ページの設定を表示。

サイドバー

チームメニュー付きの、浮かぶアプリナビゲーション。

総収益

$152,313.92

先月から

16%

統計カード

増減のチップまたはフッター帯を備えたKPIカード。

チャート

18ダッシュボード向けのデータカード。

Revenue

$152,314

+16%

$131,304 last year

This year
Last year

売上チャート

今年と昨年を、エリアと破線で比較。

活動内容

ふるまい

1,592 kcal

トレーニング

1h 45m

ランニング

5.2 km

アクティビティリング

Apple風の同心円の進捗リング。

訪問者

94,700

+8.2%

オーガニック50,500

インフォメーション25,900

ペイド18,300

エリアチャート

積み上げ、重ね合わせ、100%表示のエリアチャート。

デバイス

ブラウザ

オペレーティングシステム

スクリーンのサイズ

訪問者

クロム染料53%

サファリ27%

フィリッシュ9%

エッジ6%

サムスンインターネット2%

棒リスト

割合のバーとタブを備えた、順位付きの内訳一覧。

Sessions · Conversion 3.7%

83,200

+9.4%

複合チャート

独立した軸を使う棒グラフと折れ線グラフ。

今年度の寄付

958

+14.8%

ライフタイムトークン

562.7M

ピークトークン

12h 54m

最も長いタスク

62 days

トップストリーク

活動内容

1月2月3月4月5月6月7月8月9月10月11月12月

貢献活動

GitHub風のアクティビティヒートマップ。

これまでの実績

$7,462

+14.8%

収益チャート

期間比較ができる棒グラフ。

Sign-up funnel

197

+5.2%

最後 30 日

リンクを開いた

197

はじめに

110

完了

変換された

ファネルチャート

先細りのステージとコンバージョン率のラベルを備えたファネル。

Active users

1,892

+5.2%

最後の 7 日

月

火

水

木

金

土

日

000204060810121416182022

最小限もっと詳しく

ヒートマップチャート

テーマに合わせた色階調を使う、行列型のヒートマップ。

活動量の多い日

32,459

総ステップ

1月1月

1月

2月

3月

4月

5月

6月

7月

8月

9月

10月

11月

12月

活動量の多い日

アクティビティリングと連動する、曜日別の棒グラフ。

訪問者

1,424

+5.2%

Jan – Jun 2024

レーダーチャート

塗りつぶし、点線、線、スコア表示のレーダーチャート。

訪問者

925

+5.2%

Jan – Jun 2024

ラジアルチャート

リング、ゲージ、積み上げ式の半円ゲージ。

売上

$18,240

+9.4%

折れ線チャート

淡いエリアの上に、曲線または直線を表示。

Tracked time

86h

今週の予定

サンキーチャート

色付きの接続と割合を表示するフロー図。

Revenue per account

742

+6.8%

売上セッション

スターター270

成長率783

拡大率1,388

散布図

相関を表す散布図。サイズを指定するとバブル表示に。

睡眠スコア

とても良い

6/29 - 7/56/29 - 7/5

時間: 7h 50m

49/50

就寝時間: 20分早め

29/30

中断: 5分の覚醒

20/20

睡眠スコア

スコアの内訳を備えたラジアルゲージ。

Pipeline

4,820

+2.4%

最後 30 日

訪問数

4,820100%

サインアップ

3,26068%

有効

2,01042%

Pro

1,16024%

チームメンバー

54011%

エンタープライズ

1804%

訪問数

4,820

サインアップ

3,260

有効

2,010

Pro

1,160

チームメンバー

540

エンタープライズ

180

ステージバー

ファネルの各段階を、角丸の横長バーで表示。

歩数

31,600

総ステップ

6/29 - 7/56/29 - 7/5

歩数チャート

目標の目印を備えた日別の歩数。

テンプレート

10連携済みの、完成した画面。

新しいチャット

助けてもらえますか?

このチャットは、独自の API キーに対して実行されます。このブラウザーで履歴が保持されます。

設定されていない

新しいチャット

チャットスターター

お使いのモデルのAPIキーで動く、無料のデプロイ可能なチャット。

マルチエージェントチャット

動くエージェント、個別・グループのチャット、ライブのアバター編集。

コード

12 未記入の変更+156-23

boardui/app/components/button.tsx +74

新着

1import type { Metadata } from "next";2import Link from "next/link";3import { ComponentDetail } from "@/components/application/docs/component-detail";4import { DashboardShell } from "@/components/application/dashboard/dashboard-shell";5
6export const metadata: Metadata = {7  title: "Home Dashboard Template — React + Tailwind (Pro)",8  description:9    "Full admin dashboard template for React + Tailwind CSS — sidebar navigation, KPI cards, bar chart, and a customers data table. A BoardUI Pro template.",10};11
12const PREVIEW_CODE = `import { DashboardShell } from "@/components/application/dashboard/dashboard-shell";13
14export default function DashboardPage() {15  // Full screen: floating sidebar, header, KPI cards,16  // earnings bar chart, and the customers data table.17  return <DashboardShell />;18}`;19
20export default function HomeDashboardDetail() {21  return (22    <ComponentDetail23      wide24      breadcrumb={[25        { label: "Board UI", href: "/" },26        { label: "Components", href: "/components" },27        { label: "Home Dashboard" },28      ]}29      title="Home Dashboard"30      description="A complete admin dashboard screen — floating sidebar navigation, header with search and notifications, KPI stat cards, an earnings bar chart, and a customers data table."31      preview={32        <div className="h-[760px] w-full overflow-hidden rounded-2xl border border-border-button-default">33          <div className="origin-top-left scale-[0.8] [width:125%]">34            <DashboardShell />35          </div>36        </div>37      }38      previewClassName="p-3 sm:p-4"39      previewCode={PREVIEW_CODE}40      sections={[41        {42          id: "full-template",43          title: "Live template",44          body: (

エージェントのチャット

ダークモード用のカラートークンを更新し、再利用可能なテーマを追加してレジストリに切り替えます。完了したら、lintと生産ビルドを実行します。

57%

12 未記入の変更+156-23

boardui/app/components/button.tsx +74

新着

1import type { Metadata } from "next";2import Link from "next/link";3import { ComponentDetail } from "@/components/application/docs/component-detail";4import { DashboardShell } from "@/components/application/dashboard/dashboard-shell";5
6export const metadata: Metadata = {7  title: "Home Dashboard Template — React + Tailwind (Pro)",8  description:9    "Full admin dashboard template for React + Tailwind CSS — sidebar navigation, KPI cards, bar chart, and a customers data table. A BoardUI Pro template.",10};11
12const PREVIEW_CODE = `import { DashboardShell } from "@/components/application/dashboard/dashboard-shell";13
14export default function DashboardPage() {15  // Full screen: floating sidebar, header, KPI cards,16  // earnings bar chart, and the customers data table.17  return <DashboardShell />;18}`;19
20export default function HomeDashboardDetail() {21  return (22    <ComponentDetail23      wide24      breadcrumb={[25        { label: "Board UI", href: "/" },26        { label: "Components", href: "/components" },27        { label: "Home Dashboard" },28      ]}29      title="Home Dashboard"30      description="A complete admin dashboard screen — floating sidebar navigation, header with search and notifications, KPI stat cards, an earnings bar chart, and a customers data table."31      preview={32        <div className="h-[760px] w-full overflow-hidden rounded-2xl border border-border-button-default">33          <div className="origin-top-left scale-[0.8] [width:125%]">34            <DashboardShell />35          </div>36        </div>37      }38      previewClassName="p-3 sm:p-4"39      previewCode={PREVIEW_CODE}40      sections={[41        {42          id: "full-template",43          title: "Live template",44          body: (

AIチャット

コードパネルとコンポーザーを備えた、完成したチャットアプリ。

ギャラリー

イメージ生成

アルゼンチンのホームキットを青色の背景に合わせ、Lionel Messi dribbling のヴィンテージ編集イラストを作成します。

57%

AI画像生成

生成状況のフレームとギャラリーパネルを備えたプロンプトスレッド。

エージェント

32 エージェント

12月12月

6月14日

今日

トークン

667.7Mトークン

+9.4%

6月14日

今日

AIプロフィール

ヒートマップとチャートを備えた貢献活動のプロフィール。

金融ダッシュボード

キャッシュフローのサンキーチャート、支出リング、取引テーブル。

ホームダッシュボード

KPI、売上の推移、顧客テーブル。

マーケティングダッシュボード

顧客獲得ファネル、支出のチャート、キャンペーンテーブル。

医療プロフィール

健康チャートを備えた患者の概要。

BoardUI デザインタスク

バックログ

3/8

DS-38エージェントハンドオフ

低いです。ヴィブル

エージェントハンドオフの承認カードを探索する

Since 14 Sep

FE-86プロジェクトボード

低いです。ファーストビュー

プロジェクトチームごとに保存されたビューを追加

Since 13 Sep

BE-23アクティビティ API

中ヴィブル

エージェントアクションの監査証を記録する

Since 12 Sep

未着手

3/5

DS-34基礎

高知県BoardUI

高められた表面のためのセマンティックトークンを定義して下さい

Since 12 Sep

FE-82コンポーザー

低いです。ファーストビュー

モデルピッカーにキーボードナビゲーションを追加

Since 11 Sep

BE-19使用法 API

低いです。ヴィブル

転がり限界をリセットタイムスタンプで戻して下さい

Since 10 Sep

進行中

2/4

FE-79エージェントの進捗

中ファーストビュー

彼らはストリームとしてネストされたタスクグループを合理化

Since 9 Sep

DS-31ダークモード

緊急事態BoardUI

ダークダッシュボードカードのチューンチャートコントラスト

Since 8 Sep

レビュー

1/3

FE-76質問フォーム

低いです。ヴィブル

計画の質問間の移行を磨く

Since 7 Sep

完了

4/6

DS-27アバター

低いです。BoardUI

船オーバーラップアバターカードのグループ

Completed 6 Sep

FE-71スタジオキャンバス

中ファーストビュー

ズームしながら生成された画面を揃え続ける

Completed 5 Sep

BE-16ニュースレター

低いです。BoardUI

ビルド中にテンプレートの依存性を検証

Completed 4 Sep

DS-25アクション

低いです。BoardUI

ブロックのための文書の減少モーション動作

Completed 3 Sep

プロジェクトボード

チケットの詳細パネル、コメント、トークンチャートを備えたカンバン画面。

基礎

カラー

タイポグラフィ

基本コンポーネント

How does billing work?

Can I change plans later?

What happens to my data?

アコーディオン

お知らせ

アバター

パンくずリスト

ボタン

ボタングループ

カルーセル

チェックボックス

チップ

閉じるボタン

コマンドパレット

トークン入力

コンテキストメニュー

カラーピッカー

コンボボックス

Stay, 2026年11月

日付カレンダー

会議の日付, 2026年8月

日付ピッカー

区切り線

Filters

ドロワー

ドロップダウン

ファイルアップロード

アイコンボタン

入力

OTP入力

リンクボタン

メーター

Delete project?

モーダル

通知

数値フィールド

ページネーション

ポップオーバー

プログレス

ラジオボタン

セグメントコントロール

検索フィールド

セレクト

スケルトン

スライダー

ソーシャルボタン

スピナー

スイッチ

テーブル

タブ

タググループ

テキストエリア

時刻フィールド

トースト

ツリービュー

ツールチップ

ブロック

エージェントの思考

コンポーザーローダー

コンポーザーパネル

コンポーザーの添付ファイル

おかえりなさい

認証カード

ウェブ検索

タスクリスト

エージェントの使用制限

質問フォーム

エージェント作成

エージェントの進捗

カレンダー

データグリッド

データテーブル

通知

通知センター

設定モーダル

サイドバー