ショーケース

全コンポーネントを、1つのキャンバスで。

システム本体から描画した全 153 コンポーネントのライブプレビュー。カードをクリックして props・状態・コードを確認できます。

アコーディオン preview
アコーディオンAccordion
表示
アコーディオングループ preview
アコーディオングループAccordionGroup
表示
アクション付きデータテーブル preview
アクション付きデータテーブルActionDataTable
表示
活動タイムラインカード preview
活動タイムラインカードActivityTimelineCard
チャート
アラート preview
アラートAlert
フィードバック
確認ダイアログ preview
確認ダイアログAlertDialog
オーバーレイ
分析カード preview
分析カードAnalyticsCard
チャート
アプリレール preview
アプリレールAppRail
ナビゲーション
アスペクト比 preview
アスペクト比AspectRatio
レイアウト
アセットカード preview
アセットカードAssetCard
表示
アセットグリッド preview
アセットグリッドAssetGrid
表示
アセットインスペクター preview
アセットインスペクターAssetInspectorPanel
レイアウト
アバター preview
アバターAvatar
表示
アバターグループ preview
アバターグループAvatarGroup
表示
バッジ preview
バッジBadge
表示
バナー preview
バナーBanner
フィードバック
棒グラフ preview
棒グラフBarChart
チャート
パンくず preview
パンくずBreadcrumb
ナビゲーション
ボタン preview
ボタンButton
入力
カレンダー preview
カレンダーCalendar
入力
カード preview
カードCard
表示
カルーセル preview
カルーセルCarousel
表示
チャート凡例 preview
チャート凡例ChartLegend
チャート
チャットコンポーザー preview
チャットコンポーザーChatComposer
入力
チャット入力 preview
チャット入力ChatInput
入力
チャットメッセージ preview
チャットメッセージChatMessage
表示
チャットパネル preview
チャットパネルChatPanel
オーバーレイ
チェックボックス preview
チェックボックスCheckbox
入力
塗り分け地図 preview
塗り分け地図ChoroplethMap
チャート
クラスター preview
クラスターCluster
レイアウト
コード preview
コードCode
表示
コードブロック preview
コードブロックCodeBlock
表示
開閉パネルトグル preview
開閉パネルトグルCollapsiblePanelToggle
レイアウト
カラースウォッチ preview
カラースウォッチColorSwatch
表示
コンボボックス preview
コンボボックスCombobox
入力
コマンド preview
コマンドCommand
ナビゲーション
コマンドパレット preview
コマンドパレットCommandPalette
ナビゲーション
同心円進捗カード preview
同心円進捗カードConcentricProgressCard
チャート
コンテナ preview
コンテナContainer
レイアウト
コンテキストメニュー preview
コンテキストメニューContextMenu
オーバーレイ
コピーボタン preview
コピーボタンCopyButton
入力
データテーブル preview
データテーブルDataTable
表示
日付ピッカー preview
日付ピッカーDatePicker
入力
日付範囲ピッカー preview
日付範囲ピッカーDateRangePicker
入力
デバイスフレーム preview
デバイスフレームDeviceFrame
レイアウト
ダイアログ preview
ダイアログDialog
オーバーレイ
分布バー preview
分布バーDistributionBar
チャート
注釈 preview
注釈DocNote
表示
ドキュメントページャー preview
ドキュメントページャーDocumentPager
ナビゲーション
ドーナツチャート preview
ドーナツチャートDonutChart
チャート
ドロワー preview
ドロワーDrawer
オーバーレイ
ドロップダウン preview
ドロップダウンDropdownMenu
オーバーレイ
編集可能フィールド preview
編集可能フィールドEditableField
入力
空状態 preview
空状態EmptyState
表示
ファイルツリー preview
ファイルツリーFileTree
表示
ファイルアップローダー preview
ファイルアップローダーFileUploader
入力
フィルターボタン preview
フィルターボタンFilterButton
入力
フローティングパネル preview
フローティングパネルFloatingPanel
オーバーレイ
フッター preview
フッターFooter
ナビゲーション
フォーム preview
フォームForm
入力
ゲージチャート preview
ゲージチャートGaugeChart
チャート
グリッド preview
グリッドGrid
レイアウト
ヘッダー preview
ヘッダーHeader
ナビゲーション
ヒートマップ preview
ヒートマップHeatmapChart
チャート
ホバーカード preview
ホバーカードHoverCard
オーバーレイ
水平スタック preview
水平スタックHStack
レイアウト
アイコン preview
アイコンIcon
表示
画像プレビュー preview
画像プレビューImagePreview
表示
画像 preview
画像Img
表示
入力欄 preview
入力欄Input
入力
OTP入力 preview
OTP入力InputOTP
入力
インスペクター preview
インスペクターInspectorPanel
レイアウト
キー表示 preview
キー表示Kbd
表示
ラベル preview
ラベルLabel
入力
ラベル付きドーナツカード preview
ラベル付きドーナツカードLabeledDonutCard
チャート
折れ線チャート preview
折れ線チャートLineChart
チャート
リスト preview
リストList
表示
Markdown描画 preview
Markdown描画MarkdownRenderer
表示
マーキーフレーム preview
マーキーフレームMarqueeFrame
レイアウト
メディアライトボックス preview
メディアライトボックスMediaLightbox
オーバーレイ
メディア選択ダイアログ preview
メディア選択ダイアログMediaPickerDialog
オーバーレイ
メンション preview
メンションMention
入力
メニューバー preview
メニューバーMenubar
ナビゲーション
メタデータリスト preview
メタデータリストMetadataList
表示
ミニ分布バーカード preview
ミニ分布バーカードMiniDistributionBarCard
チャート
モーダル preview
モーダルModal
オーバーレイ
ナビゲーション preview
ナビゲーションNavigationMenu
ナビゲーション
通知センター preview
通知センターNotificationCenter
フィードバック
数値入力 preview
数値入力NumberInput
入力
オンボーディング preview
オンボーディングOnboardingFlow
オーバーレイ
ページ補助 preview
ページ補助PageAside
ナビゲーション
ページネーション preview
ページネーションPagination
ナビゲーション
パスワードグループ preview
パスワードグループPasswordGroup
入力
パスワード入力 preview
パスワード入力PasswordInput
入力
パスワード要件リスト preview
パスワード要件リストPasswordRequirementList
入力
パスワード強度メーター preview
パスワード強度メーターPasswordStrengthMeter
入力
電話番号入力 preview
電話番号入力PhoneInput
入力
円グラフ preview
円グラフPieChart
チャート
ポップオーバー preview
ポップオーバーPopover
オーバーレイ
郵便番号入力 preview
郵便番号入力PostalCodeInput
入力
進捗バー preview
進捗バーProgress
フィードバック
進捗ウィジェット preview
進捗ウィジェットProgressWidget
フィードバック
4象限マトリクス preview
4象限マトリクスQuadrantMatrix
チャート
レーダーチャート preview
レーダーチャートRadarChart
チャート
ラジアルバーチャート preview
ラジアルバーチャートRadialBarChart
チャート
ラジオグループ preview
ラジオグループRadioGroup
入力
範囲スライダー preview
範囲スライダーRangeSlider
入力
リサイズ可能 preview
リサイズ可能Resizable
レイアウト
継続率コホートカード preview
継続率コホートカードRetentionCohortCard
チャート
リボンチャート preview
リボンチャートRibbonChart
チャート
右レール preview
右レールRightRail
ナビゲーション
スクロール領域 preview
スクロール領域ScrollArea
レイアウト
検索可能アコーディオン preview
検索可能アコーディオンSearchableAccordion
表示
検索入力 preview
検索入力SearchInput
入力
セグメントゲージカード preview
セグメントゲージカードSegmentedGaugeCard
チャート
セグメントタイムラインカード preview
セグメントタイムラインカードSegmentTimelineCard
チャート
セレクト preview
セレクトSelect
入力
区切り線 preview
区切り線Separator
表示
共有モーダル preview
共有モーダルShareModal
オーバーレイ
シート preview
シートSheet
オーバーレイ
サイドバー preview
サイドバーSidebar
ナビゲーション
サイドバー項目 preview
サイドバー項目SidebarItem
ナビゲーション
スケルトン preview
スケルトンSkeleton
表示
スライダー preview
スライダーSlider
入力
並び替え preview
並び替えSortButton
入力
スペーサー preview
スペーサーSpacer
表示
スパークライン preview
スパークラインSparklineChart
チャート
空間キャンバス preview
空間キャンバスSpatialCanvas
レイアウト
スピナー preview
スピナーSpinner
フィードバック
積み上げ棒チャート preview
積み上げ棒チャートStackedBarChart
チャート
統計 preview
統計Statistic
表示
ステータスバー preview
ステータスバーStatusBar
フィードバック
ステータス画面 preview
ステータス画面StatusScreen
フィードバック
ステッパー preview
ステッパーStepper
フィードバック
スイッチ preview
スイッチSwitch
入力
テーブル preview
テーブルTable
表示
タブ preview
タブTabs
ナビゲーション
タグ preview
タグTag
表示
タグエディタ preview
タグエディタTagEditor
表示
タグ入力 preview
タグ入力TagInput
入力
テキストエリア preview
テキストエリアTextarea
入力
テキストリンク preview
テキストリンクTextLink
ナビゲーション
タイムライン preview
タイムラインTimeline
表示
時刻ピッカー preview
時刻ピッカーTimePicker
入力
トースト preview
トーストToast
フィードバック
トーストプロバイダ preview
トーストプロバイダToastProvider
フィードバック
トグル preview
トグルToggle
入力
トグルグループ preview
トグルグループToggleGroup
入力
ツールピル preview
ツールピルToolPill
表示
ツールチップ preview
ツールチップTooltip
オーバーレイ
ツールチップ付きボタン preview
ツールチップ付きボタンTooltipButton
入力
ツリービュー preview
ツリービューTreeView
表示
垂直スタック preview
垂直スタックVStack
レイアウト