コンポーネント

Tailwind CSSとReka UIを搭載した125以上のVueコンポーネントで、美しく、アクセスしやすく、レスポンシブなユーザーインターフェイスを構築します。

Layout

アプリケーションのレイアウトを整理し、UIの一貫した基盤を確立するためのコア構造コンポーネント。

App preview
App
アプリケーションにグローバル設定、トースト、ツールチップを提供するラッパー。
Container preview
Container
コンテンツの幅を中央に配置して制限するレイアウト要素。
Error preview
Error
NuxtErrorをサポートするビルド済みのエラーコンポーネント。
Footer preview
Footer
サイトのリンクや法的通知のレスポンシブフッター。
Header preview
Header
サイトナビゲーションのレスポンシブヘッダー。
Main preview
Main
使用可能なビューポートの高さを埋めるmain要素。
Sidebar preview
Sidebar
複数のビジュアルバリエーションを持つ折りたたみ式サイドバー。
Splitter preview
Splitter
ドラッグ可能なハンドルで区切られたサイズ変更可能なパネルのセット。
Theme preview
Theme
テーマ子コンポーネントへのヘッドレスコンポーネント。

Element

ボタン、バッジ、アバター、アイコン、その他の基本的なインターフェイス要素を含む、直感的で一貫性のあるユーザーエクスペリエンスを作成するための不可欠なUIビルディングブロック。

Alert preview
Alert
ユーザーの注意を引くためのコールアウト。
Avatar preview
Avatar
フォールバックとNuxt Imageをサポートするimg要素。
AvatarGroup preview
AvatarGroup
複数のアバターをグループに積み重ねる。
Badge preview
Badge
ステータスまたはカテゴリを表す短いテキスト。
Banner preview
Banner
ウェブサイトの上部にバナーを表示して、重要な情報をユーザーに知らせます。
Button preview
Button
リンクとして機能したり、アクションをトリガーしたりできるボタン要素。
Calendar preview
Calendar
単一の日付、複数の日付、または日付範囲を選択するカレンダーコンポーネント。
Card preview
Card
ヘッダー、ボディ、フッターでカードのコンテンツを表示します。
Chip preview
Chip
数値または状態の指標。
Collapsible preview
Collapsible
コンテンツの表示を切り替える折りたたみ可能な要素。
フィールドグループ preview
フィールドグループ
複数のボタンのような要素をグループ化します。
Icon preview
Icon
Iconifyまたは他のコンポーネントから任意のアイコンを表示するコンポーネント。
Kbd preview
Kbd
キーボードキーを表示するkbd要素。
Progress preview
Progress
タスクの進捗状況を示すインジケータ。
ProgressGroup preview
ProgressGroup
プログレスバーが複数のセグメントに分割され、合計になります。
Separator preview
Separator
コンテンツを水平または垂直に分離する。
Skeleton preview
Skeleton
コンテンツの読み込み中に表示するプレースホルダー。

Form

テキスト入力、選択、チェックボックス、ラジオグループ、スイッチ、スライダー、完全なフォーム検証など、インタラクティブなユーザー入力エクスペリエンスを構築するための包括的なフォームコンポーネント。

Checkbox preview
Checkbox
チェック状態とチェックされていない状態を切り替えるinput要素。
CheckboxGroup preview
CheckboxGroup
リストから複数のオプションを選択するチェックボックスのセット。
カラーピッカー preview
カラーピッカー
色を選択するコンポーネント。
ファイルアップロード preview
ファイルアップロード
ファイルをアップロードするinput要素。
Form preview
Form
検証と送信処理を内蔵したフォームコンポーネント。
FormField preview
FormField
バリデーションとエラー処理を提供するフォーム要素のラッパー。
Input preview
Input
テキストを入力するinput要素。
InputDate preview
InputDate
日付選択のための入力コンポーネント。
入力メニュー preview
入力メニュー
リアルタイムの提案を含むオートコンプリート入力。
InputNumber preview
InputNumber
カスタマイズ可能な範囲を持つ数値の入力。
入力評価 preview
入力評価
ユーザーからの評価を表示および収集するコンポーネント。
入力タグ preview
入力タグ
インタラクティブタグを表示するinput要素。
入力時間 preview
入力時間
時間を選択するための入力。
Listbox preview
Listbox
検索、仮想化、リッチアイテムレンダリングを備えたアイテムの選択可能なリスト。
ピン入力 preview
ピン入力
ピンを入力する入力要素。
ラジオグループ preview
ラジオグループ
リストから1つのオプションを選択するラジオボタンのセット。
Select preview
Select
オプションのリストから選択するselect要素。
選択メニュー preview
選択メニュー
高度な検索可能な選択要素。
Slider preview
Slider
範囲内の数値を選択するための入力。
Switch preview
Switch
2つの状態を切り替えるコントロール。
Textarea preview
Textarea
複数行のテキストを入力するtextarea要素。

Data

テーブル、アコーディオン、カルーセル、タイムライン、ツリー、ユーザープロファイルなど、データを表示および整理するためのコンポーネント。

Accordion preview
Accordion
折りたたみ式パネルの積み重ねセット。
Carousel preview
Carousel
Emblaを使用して構築されたモーションとスワイプのカルーセル。
Empty preview
Empty
空の状態を表示するコンポーネント。
Marquee preview
Marquee
無限スクロールコンテンツを作成するコンポーネント。
スクロールエリア preview
スクロールエリア
仮想化をサポートする柔軟なスクロールコンテナ。
Table preview
Table
行と列でデータを表示する応答性のあるテーブル要素。
Timeline preview
Timeline
日付、タイトル、アイコン、またはアバターを含む一連のイベントを表示するコンポーネント。
Tree preview
Tree
階層データ構造を表示して操作するツリービューコンポーネント。
User preview
User
名前、説明、アバターでユーザー情報を表示します。

メニュー、パンくず、ページネーション、タブ、ステッパー、リンク、コマンドパレットなど、ユーザーナビゲーションとウェイファインディングのためのコンポーネント。

Breadcrumb preview
Breadcrumb
ウェブサイトをナビゲートするためのリンクの階層。
コマンドパレット preview
コマンドパレット
効率的なファジィマッチングのためのFuse.jsによる全文検索機能を備えたコマンドパレット。
FooterColumns preview
FooterColumns
フッターに表示する列としてのリンクのリスト。
Link preview
Link
NuxtLinkのラッパーに追加の小道具があります。
ナビゲーションメニュー preview
ナビゲーションメニュー
水平または垂直に表示できるリンクのリスト。
Pagination preview
Pagination
ページをナビゲートするためのボタンまたはリンクのリスト。
Stepper preview
Stepper
複数のステッププロセスを通じて進捗状況を示すために使用される一連のステップ。
Tabs preview
Tabs
一度に1つずつ表示されるタブパネルのセット。

オーバーレイ

モーダル、ポップオーバー、ツールチップ、引き出し、スライドオーバー、コンテキストメニューなど、メインコンテンツの上に表示されるフローティングUI要素。

コンテキストメニュー preview
コンテキストメニュー
要素を右クリックしたときのアクションを表示するメニュー。
Drawer preview
Drawer
画面の内外をスムーズにスライドさせる引き出し。
ドロップダウンメニュー preview
ドロップダウンメニュー
要素をクリックしたときのアクションを表示するメニュー。
Modal preview
Modal
メッセージを表示したり、ユーザ入力を要求したりするために使用できるダイアログウィンドウ。
Popover preview
Popover
トリガー要素の周りに浮かぶ非モーダルダイアログ。
Slideover preview
Slideover
画面の任意の側面からスライドするダイアログ。
Toast preview
Toast
ユーザーに情報やフィードバックを提供するための簡潔なメッセージ。
Tooltip preview
Tooltip
要素にマウスオーバーすると情報が表示されるポップアップ。

Page

ランディングページ、ブログ、価格ページ、その他のマーケティング資料を作成するための事前構築されたマーケティングおよびコンテンツセクション。

AuthForm preview
AuthForm
ログイン、登録、パスワードリセットフォームを作成するカスタマイズ可能なフォーム。
ブログ投稿 preview
ブログ投稿
ブログページに表示するカスタマイズ可能な記事。
ブログ投稿 preview
ブログ投稿
レスポンシブグリッドレイアウトでブログ投稿のリストを表示します。
ChangelogVersion preview
ChangelogVersion
変更履歴に表示するカスタマイズ可能な記事。
ChangelogVersions preview
ChangelogVersions
タイムラインに変更履歴バージョンのリストを表示します。
Page preview
Page
左右の列を持つページのグリッドレイアウト。
ページアンカー preview
ページアンカー
ページに表示するアンカーのリスト。
ページ別 preview
ページ別
ページナビゲーションを表示するための付箋脇。
PageBody preview
PageBody
ページのメインコンテンツ。
PageCard preview
PageCard
タイトル、説明、およびオプションのリンクを表示するスタイル付きのカードコンポーネント。
ページカラム preview
ページカラム
コンテンツを並べて整理するためのレスポンシブなマルチカラムレイアウトシステム。
ページCTA preview
ページCTA
ページに表示するCTAセクション。
ページ機能 preview
ページ機能
アプリケーションの主要機能を表示するコンポーネント。
PageGrid preview
PageGrid
柔軟なレイアウトでコンテンツを表示するためのレスポンシブグリッドシステム。
PageHeader preview
PageHeader
ページのレスポンシブヘッダー。
PageHero preview
PageHero
あなたのページのレスポンシブヒーロー。
ページリンク preview
ページリンク
ページに表示されるリンクのリスト。
ページリスト preview
ページリスト
コンテンツをスタック形式で表示するための垂直リストレイアウト。
ページロゴ preview
ページロゴ
ページに表示するロゴや画像のリスト。
ページセクション preview
ページセクション
あなたのページの応答セクション。
料金プラン preview
料金プラン
価格ページに表示されるカスタマイズ可能な価格プラン。
料金プラン preview
料金プラン
料金プランのリストをレスポンシブグリッドレイアウトで表示します。
PricingTable preview
PricingTable
機能比較とともに階層的な価格プランを表示するレスポンシブな価格表コンポーネント。
実際の例については、GitHubの** SaaS template**をご覧ください。

Dashboard

サイズ変更可能なパネル、折りたたみ可能なサイドバー、ツールバー、検索機能を備えた動的ダッシュボードを構築するための専用コンポーネント。

DashboardGroup preview
DashboardGroup
サイドバー状態管理と永続性を備えたダッシュボードコンポーネントのコンテキストを提供する固定レイアウトコンポーネント。
ダッシュボードNavbar preview
ダッシュボードNavbar
ダッシュボードに表示するレスポンシブなナビバー。
ダッシュボードパネル preview
ダッシュボードパネル
ダッシュボードに表示するサイズ変更可能なパネル。
ダッシュボードResizeHandle preview
ダッシュボードResizeHandle
サイドバーまたはパネルのサイズを変更するハンドル。
ダッシュボード検索 preview
ダッシュボード検索
ダッシュボードに追加するためのすぐに使用できるCommandPalette。
DashboardSearchButton preview
DashboardSearchButton
DashboardSearchモーダルを開くためのスタイル設定済みボタン。
ダッシュボードサイドバー preview
ダッシュボードサイドバー
ダッシュボードに表示するサイズ変更可能で折りたたみ可能なサイドバー。
ダッシュボードサイドバー Collapse preview
ダッシュボードサイドバー Collapse
デスクトップ上のサイドバーを折りたたむボタン。
DashboardSidebarToggle preview
DashboardSidebarToggle
モバイルでサイドバーを切り替えるボタン。
ダッシュボードツールバー preview
ダッシュボードツールバー
ダッシュボードのナビバーの下に表示するツールバー。
実際の例については、GitHubのNuxtおよびVueダッシュボードテンプレートをご覧ください。

AIチャット

Vercel AI SDKを搭載した対話型インターフェイスとチャットボットを構築するためのコンポーネント。

チャットメッセージ preview
チャットメッセージ
アイコン、アバター、アクションでチャットメッセージを表示します。
チャットメッセージ preview
チャットメッセージ
Vercel AI SDKとシームレスに連携するように設計されたチャットメッセージの一覧を表示します。
チャットパレット preview
チャットパレット
オーバーレイ内にチャットボットインターフェイスを作成するためのチャットパレット。
チャットプロンプト preview
チャットプロンプト
AIチャットインターフェイスでプロンプトを送信するための拡張されたTextarea。
チャットプロンプト送信 preview
チャットプロンプト送信
自動ステータス処理付きチャットプロンプトを送信するためのボタン。
チャット推論 preview
チャット推論
折りたたみ式のAI推論や思考プロセスを表示します。
ChatShimmer preview
ChatShimmer
テキストシマーアニメーション効果を表示します。
ChatTool preview
ChatTool
折りたたみ式AIツール呼び出しステータスを表示します。
実際の例については、GitHubのNuxtおよびVue AIチャットテンプレートをご覧ください。

Editor badge{label="4.3+" class="align-text-top"}

TipTapを搭載した、markdown、HTML、JSONコンテンツタイプをサポートするリッチテキストエディタを構築するためのコンポーネント。

Editor preview
Editor
Markdown、HTML、JSONコンテンツタイプをサポートするTipTapベースのリッチテキストエディタコンポーネント。
編集者ドラッグハンドル preview
編集者ドラッグハンドル
エディタでブロックを並べ替えて選択するためのドラッグ可能なハンドル。
編集者絵文字メニュー preview
編集者絵文字メニュー
エディタで:文字を入力すると絵文字の候補が表示される絵文字ピッカーメニュー。
エディターメンションメニュー preview
エディターメンションメニュー
エディタでトリガー文字を入力すると、ユーザーの提案を表示するメンションメニュー。
編集者提案メニュー preview
編集者提案メニュー
エディタで/文字を入力すると、書式設定とアクションの提案を表示するコマンドメニュー。
エディターツールバー preview
エディターツールバー
固定メニュー、バブルメニュー、またはフローティングメニューとして表示できるエディタアクション用のカスタマイズ可能なツールバー。
実際の例については、GitHubのEditor templateをご覧ください。

コンテンツ

目次、検索、ナビゲーションツリー、および周囲のページリンクを含むドキュメントサイト用の Contentと統合されるコンポーネント。

ContentNavigation preview
ContentNavigation
ページリンクを整理するためのアコーディオンスタイルのナビゲーションコンポーネント。
コンテンツ検索 preview
コンテンツ検索
すぐに使用できるCommandPaletteドキュメントに追加できます。
ContentSearchButton preview
ContentSearchButton
ContentSearchモーダルを開くためのスタイル設定済みボタン。
ContentSurround preview
ContentSurround
ページ間を移動するためのprevとnextのペア。
ContentToc preview
ContentToc
自動的にアクティブなアンカーリンクをハイライトするスティッキーな目次。
実際の例については、GitHubのDocs templateをご覧ください。

Colorモード

Color Modeと統合されたコンポーネントで、ライト、ダーク、およびシステム環境設定を切り替えます。

Color Modeと統合されたコンポーネントで、ライト、ダーク、およびシステム環境設定を切り替えます。

カラーモードアバター preview
カラーモードアバター
ライトモードとダークモードの異なるソースを持つアバター。
ColorModeButton preview
ColorModeButton
ライトモードとダークモードを切り替えるボタン。
ColorModeImage preview
ColorModeImage
ライトモードとダークモードの異なるソースを持つイメージ要素。
カラーモード選択 preview
カラーモード選択
システム、ダークモード、ライトモードを切り替えるための選択。
ColorModeSwitch preview
ColorModeSwitch
ライトモードとダークモードを切り替えるスイッチ。

i18n

国際化とロケール管理のためにi 18 nと統合するコンポーネント。

国際化とロケール管理のためにi 18 nと統合するコンポーネント。

Locale Select preview
Locale Select
ロケールを切り替えるための選択。