ドキュメント
ショーケース
パターン
ドキュメントを検索...
検索...
⌘
K
EN
テーマをカスタマイズ
テーマを切り替え
ショーケース
全コンポーネントを、1つのキャンバスで。
システム本体から描画した全 208 コンポーネントのライブプレビュー。カードをクリックして props・状態・コードを確認できます。
全て
208
入力
42
表示
78
チャート
26
フィードバック
12
ナビゲーション
20
オーバーレイ
16
レイアウト
14
アコーディオン
Accordion
表示
アコーディオングループ
AccordionGroup
表示
アクション付きデータテーブル
ActionDataTable
表示
対応キュー
ActionQueue
表示
活動タイムラインカード
ActivityTimelineCard
チャート
アラート
Alert
フィードバック
確認ダイアログ
AlertDialog
オーバーレイ
金額内訳
AmountBreakdown
表示
分析カード
AnalyticsCard
チャート
アプリレール
AppRail
ナビゲーション
承認ステップ
ApprovalSteps
表示
承認ワークフロー
ApprovalWorkflow
表示
アスペクト比
AspectRatio
レイアウト
アセットカード
AssetCard
表示
アセットグリッド
AssetGrid
表示
アセットインスペクター
AssetInspectorPanel
レイアウト
アバター
Avatar
表示
アバターグループ
AvatarGroup
表示
バッジ
Badge
表示
バナー
Banner
フィードバック
棒グラフ
BarChart
チャート
ボトムアクションバー
BottomActionBar
ナビゲーション
パンくず
Breadcrumb
ナビゲーション
ボタン
Button
入力
カレンダー
Calendar
入力
カード
Card
表示
カルーセル
Carousel
表示
チャート凡例
ChartLegend
チャート
チャットコンポーザー
ChatComposer
入力
チャット入力
ChatInput
入力
チャットメッセージ
ChatMessage
表示
チャットパネル
ChatPanel
オーバーレイ
チェックボックス
Checkbox
入力
複数選択カード
CheckboxCard
表示
チェックリスト
CheckList
表示
塗り分け地図
ChoroplethMap
チャート
クラスター
Cluster
レイアウト
コード
Code
表示
コードブロック
CodeBlock
表示
開閉パネルトグル
CollapsiblePanelToggle
レイアウト
カラースウォッチ
ColorSwatch
表示
コンボボックス
Combobox
入力
コマンド
Command
ナビゲーション
コマンドパレット
CommandPalette
ナビゲーション
企業セル
CompanyCell
表示
同心円進捗カード
ConcentricProgressCard
チャート
コンテナ
Container
レイアウト
コンテキストメニュー
ContextMenu
オーバーレイ
コピーボタン
CopyButton
入力
2人確認
CoSign
入力
金額入力
CurrencyInput
入力
データテーブル
DataTable
表示
日付ピッカー
DatePicker
入力
日付範囲ピッカー
DateRangePicker
入力
差分
Delta
表示
デスクトップページヘッダー
DesktopPageHeader
ナビゲーション
デバイスフレーム
DeviceFrame
レイアウト
ダイアログ
Dialog
オーバーレイ
分布バー
DistributionBar
チャート
注釈
DocNote
表示
ドキュメントページャー
DocumentPager
ナビゲーション
書類行
DocumentRow
表示
ドーナツチャート
DonutChart
チャート
ドロワー
Drawer
オーバーレイ
ドロップダウン
DropdownMenu
オーバーレイ
編集可能データテーブル
EditableDataTable
表示
編集可能フィールド
EditableField
入力
空状態
EmptyState
表示
月間カレンダー
EventCalendar
表示
有効期限
ExpiryBadge
表示
ファイルツリー
FileTree
表示
ファイルアップローダー
FileUploader
入力
フィルターボタン
FilterButton
入力
フィルタチップ
FilterChips
表示
フローティングパネル
FloatingPanel
オーバーレイ
フッター
Footer
ナビゲーション
フォーム
Form
入力
ギャラリー
Gallery
表示
ガントチャート
Gantt
表示
ゲージチャート
GaugeChart
チャート
グリッド
Grid
レイアウト
ヘッダー
Header
ナビゲーション
ヒートマップ
HeatmapChart
チャート
ホバーカード
HoverCard
オーバーレイ
水平スタック
HStack
レイアウト
アイコン
Icon
表示
画像プレビュー
ImagePreview
表示
画像
Img
表示
入力欄
Input
入力
OTP入力
InputOTP
入力
インスペクター
InspectorPanel
レイアウト
旅程
Itinerary
表示
カンバンボード
KanbanBoard
表示
キー表示
Kbd
表示
ラベル
Label
入力
ラベル付きドーナツカード
LabeledDonutCard
チャート
ランキング
Leaderboard
チャート
上限監視
LimitMonitor
表示
系譜グラフ
LineageGraph
表示
折れ線チャート
LineChart
チャート
路線チップ
LineChip
表示
リスト
List
表示
リストカード
ListCard
表示
ロイヤリティ要約カード
LoyaltySummaryCard
表示
Markdown描画
MarkdownRenderer
表示
マーキーフレーム
MarqueeFrame
レイアウト
マッチカード
MatchCard
表示
メディアライトボックス
MediaLightbox
オーバーレイ
メディア選択ダイアログ
MediaPickerDialog
オーバーレイ
メンション
Mention
入力
メニューバー
Menubar
ナビゲーション
メタデータリスト
MetadataList
表示
メーター
Meter
表示
ミニ分布バーカード
MiniDistributionBarCard
チャート
モーダル
Modal
オーバーレイ
ナビゲーション
NavigationMenu
ナビゲーション
ナビ行
NavRow
ナビゲーション
通知センター
NotificationCenter
フィードバック
数値入力
NumberInput
入力
稼働メーター
OccupancyMeter
表示
オンボーディング
OnboardingFlow
オーバーレイ
区間(発着)
OriginDestination
表示
ページ補助
PageAside
ナビゲーション
ページヘッダー
PageHeader
ナビゲーション
ページネーション
Pagination
ナビゲーション
パレート図
ParetoChart
チャート
パスワードグループ
PasswordGroup
入力
パスワード入力
PasswordInput
入力
パスワード要件リスト
PasswordRequirementList
入力
パスワード強度メーター
PasswordStrengthMeter
入力
人物セル
PersonCell
表示
電話番号入力
PhoneInput
入力
円グラフ
PieChart
チャート
ポップオーバー
Popover
オーバーレイ
郵便番号入力
PostalCodeInput
入力
進捗バー
Progress
フィードバック
進捗ウィジェット
ProgressWidget
フィードバック
4象限マトリクス
QuadrantMatrix
チャート
レーダーチャート
RadarChart
チャート
ラジアルバーチャート
RadialBarChart
チャート
選択カード
RadioCard
表示
ラジオグループ
RadioGroup
入力
範囲スライダー
RangeSlider
入力
レーティング
Rating
表示
基準値判定
ReferenceValue
表示
関係行
RelationshipRow
表示
リサイズ可能
Resizable
レイアウト
継続率コホートカード
RetentionCohortCard
チャート
条件付きセクション
RevealSection
表示
リボンチャート
RibbonChart
チャート
右レール
RightRail
ナビゲーション
配送ルート
RouteStops
表示
安全バナー
SafetyBanner
フィードバック
段階スキャン
ScanGate
入力
スキャン入力
ScanInput
入力
スケジュールグリッド
ScheduleGrid
表示
スクロール領域
ScrollArea
レイアウト
検索可能アコーディオン
SearchableAccordion
表示
検索入力
SearchInput
入力
座席表
SeatMap
表示
セクションリスト
SectionList
表示
セグメント切替
SegmentedControl
入力
セグメントゲージカード
SegmentedGaugeCard
チャート
セグメントタイムラインカード
SegmentTimelineCard
チャート
セレクト
Select
入力
区切り線
Separator
表示
共有モーダル
ShareModal
オーバーレイ
シート
Sheet
オーバーレイ
サイドバー
Sidebar
ナビゲーション
サイドバー項目
SidebarItem
ナビゲーション
署名記録
SignedRecord
表示
スケルトン
Skeleton
表示
スライダー
Slider
入力
並び替え
SortButton
入力
スペーサー
Spacer
表示
スパークライン
SparklineChart
チャート
空間キャンバス
SpatialCanvas
レイアウト
スピナー
Spinner
フィードバック
積み上げ棒チャート
StackedBarChart
チャート
指標グループ
StatGroup
表示
統計
Statistic
表示
ステータスバー
StatusBar
フィードバック
状態ボード
StatusBoard
表示
ステータス画面
StatusScreen
フィードバック
ステッパー
Stepper
フィードバック
運行図表
Stringline
チャート
スウォッチグループ
SwatchGroup
表示
スイッチ
Switch
入力
テーブル
Table
表示
タブ
Tabs
ナビゲーション
タグ
Tag
表示
タグエディタ
TagEditor
表示
タグ入力
TagInput
入力
テキストエリア
Textarea
入力
テキストリンク
TextLink
ナビゲーション
チケット券面
TicketStub
表示
タイムライン
Timeline
表示
時刻ピッカー
TimePicker
入力
トースト
Toast
フィードバック
トーストプロバイダ
ToastProvider
フィードバック
トグル
Toggle
入力
トグルグループ
ToggleGroup
入力
ツールピル
ToolPill
表示
ツールチップ
Tooltip
オーバーレイ
ツールチップ付きボタン
TooltipButton
入力
ツリービュー
TreeView
表示
垂直スタック
VStack
レイアウト
週間カレンダー
WeekView
表示