REACT / BASE UI / TAILWIND CSS V4
柔らかな表面。
明確な使い心地。
表面、選択状態、キーボード操作を共通のルールで。ソースを導入し、自分のプロジェクトに合わせて編集できます。
部品ではなく、一つのインターフェース。
名前と設定を変更して保存してください。
56 件
TemplatessourceButton
raised、pressed、primary の状態を備えた主要なアクションコントロール。
sourceDialog
フォーカスを安全に閉じ込め、元の trigger に戻すモーダルサーフェス。
sourceDropdown Menu
action、selection、submenu をキーボードで移動できるコンテキストメニュー。
sourceAlert Dialog
取り消せない操作を明示的に確認するダイアログ。
sourcePopover
ボタンに隣接して文脈を保つ設定パネル。
sourceHover Card
リンク先を補足するプレビューカード。
sourceSheet
画面の端から開くスクロール可能な操作パネル。
sourceContext Menu
ポインター位置で開く操作メニュー。チェック、ラジオ、サブメニューに対応します。
sourceDrawer
スワイプで閉じられる下部・側面のタスクパネル。
sourceCheckbox
boolean と indeterminate の状態に対応する native checkbox。
sourceInput
focus と validation の状態が明確な inset の1行入力フィールド。
sourceInput Group
input、addon、action を1つの inset サーフェスにまとめる組み合わせ可能なフィールド。
sourceLabel
form control の名前とクリック領域を関連付ける native label。
sourceRadio Group
1つの値を選択する native radio input のグループ。
sourceSelect
ブラウザーのアクセシビリティを維持する native select サーフェス。
sourceSlider
水平または垂直の track 上で1つ以上の値を調整する range control。
sourceSwitch
即時に適用されるオン・オフ設定を pressed track で示すコントロール。
sourceTextarea
複数行のテキストを入力する、resize 可能な inset field。
sourceToggle
押下状態を保持する独立したトグルボタン。
sourceToggle Group
単一、複数選択をまとめるキーボード操作可能なグループ。
sourceField
入力とラベル、説明、検証エラーを関連付ける単位。
sourceFieldset
関連する入力に共通の見出しと無効状態を与えるグループ。
sourceForm
フィールド検証と送信エラーを扱うネイティブフォーム。
sourceNumber Field
範囲、刻み幅、地域別表示を扱う数値入力。
sourceCombobox
絞り込み、空の結果、キーボード選択を扱う検索入力。
sourceCalendar
日付と期間を選択するニューモーフィズムカレンダー。
sourceDate Picker
ポップオーバーで日付を選択・解除します。
sourceInput OTP
1つの実入力と複数の表示スロットを組み合わせた認証コード入力。
sourceAccordion
1つずつ、または複数のセクションを同時に展開できるディスクロージャーグループ。
sourceBreadcrumb
現在のページまでの経路を意味のある順序付きリストとして表示します。
sourcePagination
現在のページと前後の移動先を明示する raised link の集合。
sourceTabs
同じ文脈内の panel をキーボードで切り替える tab interface。
sourceTooltip
hover とキーボード focus で短い補足説明を表示する popup。
sourceCollapsible
追加設定のグループを展開、折りたたみするコンテナー。
sourceToolbar
文書操作をまとめる矢印キーで移動可能なツールバー。
sourceNavigation Menu
リンクとポップアップによるキーボード対応のサイトナビゲーション。
sourceMenubar
方向キーで移動するアプリケーションのコマンドメニュー。
sourceCommand
検索とキーボード選択を組み合わせたコマンドパレットとクイックナビゲーション。
sourceCarousel
タッチ、ボタン、方向キーで移動する連続コンテンツビュー。
sourceResizable
ポインターとキーボードで比率を調整できる分割パネル。
sourceSidebar
デスクトップの折りたたみとモバイル Sheet を備えたアプリケーションナビゲーション。
sourceAlert
重要な状態や結果を raised サーフェス上で伝えるメッセージ。
sourceAvatar
画像の読み込みに失敗しても fallback を維持するプロフィールサーフェス。
sourceBadge
状態や分類を明確に示す、簡潔なインラインラベル。
sourceCard
コンテンツを raised、soft、inset、flat の深度でまとめるサーフェス。
sourceProgress
inset track 内の primary fill で進捗を示すステータス。
sourceScroll Area
ブラウザーの native scrolling を維持する、テーマ対応の overflow サーフェス。
sourceSeparator
光と細い shadow で関連コンテンツ間の境界を表す divider。
sourceSkeleton
読み込み中のコンテンツの大きさと位置を先に示す inset placeholder。
sourceTable
小さな画面では横方向にスクロールする semantic なデータテーブル。
sourceMeter
既知の範囲内で測定値を示すメーター。
sourceData Table
検索、フィルター、並べ替え、行選択、ページ移動を組み合わせます。
sourceToast
結果通知と取り消し操作を提供します。
sourceChart
レスポンシブなチャート表面、ツールチップと正確なデータ表。
sourceImage Card
画像と説明を1つの raised surface にまとめるコンテンツカード。
sourceMarquee
一時停止と reduced-motion に対応した繰り返し情報ストリップ。