コンテンツにスキップ
Hypermedia Components

キッチンシンク

（ほぼ）すべてのコンポーネントを、ライブで、1 ページに — コンポーネントのサイドバーと同じグルーピングです。準備の重い一部 （チャート、コード、フィルターバー、スパークライン、目次、 トランスファー）は各コンポーネントページに住んでいます。 ライブラリ全体をひと目で見渡す、 テーマの健全性チェック(ヘッダーのカラー / 密度 / ダークの切り替えを 試してください)、見出しのリンクからコンポーネントの完全なドキュメント へ飛ぶ、といった用途に使ってください。なお、密度スイッチャーの compact / dense 階層はポインタが精密なデスクトップ向けの プリセットです — タッチユーザーに出荷する前に 密度 · タッチターゲット を参照してください。

アクション

Section titled “アクション”

ボタン

Section titled “ボタン”

ボタングループ · Kbd

Section titled “ボタングループ · Kbd”
⌘K

トグルグループ

Section titled “トグルグループ”

ツールバー

Section titled “ツールバー”

コマンド

Section titled “コマンド”
Navigation
Go homeG H
Search

フォーム

Section titled “フォーム”

フィールド · インプット

Section titled “フィールド · インプット”

We’ll never share it.

インプットグループ

Section titled “インプットグループ”

Input OTP · スライダー

Section titled “Input OTP · スライダー”

レンジ

Section titled “レンジ”

セレクト · デートピッカー

Section titled “セレクト · デートピッカー”

コンボボックス · マルチコンボボックス

Section titled “コンボボックス · マルチコンボボックス”
  • Japan
  • United States
  • United Kingdom
  • JavaScript
  • TypeScript
  • Python

チェックボックス · ラジオ · スイッチ

Section titled “チェックボックス · ラジオ · スイッチ”

レーティング

Section titled “レーティング”
Rate

カレンダー

Section titled “カレンダー”

ドロップゾーン

Section titled “ドロップゾーン”

添付ファイル

Section titled “添付ファイル”
  • notes.md4 KB
  • report.pdf1.2 MB
  • huge.iso9.8 GB

ナビゲーション

Section titled “ナビゲーション”

パンくずリスト · ページネーション

Section titled “パンくずリスト · ページネーション”

ステッパー

Section titled “ステッパー”
  1. Account (completed)
  2. Profile
  3. Review

タブ

Section titled “タブ”
Account settings.

メニュー

Section titled “メニュー”

メニューバー · ナビゲーションメニュー

Section titled “メニューバー · ナビゲーションメニュー”

コンテキストメニュー

Section titled “コンテキストメニュー”
Right-click me

ツリー

Section titled “ツリー”
  • src
    • app.js

オーバーレイ

Section titled “オーバーレイ”

ダイアログ · ドロワー · ポップオーバー

Section titled “ダイアログ · ドロワー · ポップオーバー”

Dialog

A native modal dialog.

Drawer

Slides in from the edge.

A light-dismiss popover.

ツールチップ · ホバーカード

Section titled “ツールチップ · ホバーカード”
A short tooltip.@ada
Ada Lovelace
@ada
Mathematician & first programmer.

データ表示

Section titled “データ表示”

テーブル

Section titled “テーブル”
NameRoleStatus
AdaEngineerActive
BeaDesignerAway

データグリッド

Section titled “データグリッド”
NameRoleStatus
AdaEngineerActive
BeaDesignerAway

カード · アバター

Section titled “カード · アバター”
Card title
A generic surface for grouped content.
ABC

アイテム

Section titled “アイテム”
Quarterly reportUpdated 2 days ago

バッジ

Section titled “バッジ”
InfoSuccessWarningError

チップ

Section titled “チップ”
  • read:members
  • write:members
  • admin:realm

セパレータ

Section titled “セパレータ”

Above

Below

Alternative

タイムライン

Section titled “タイムライン”
  1. Deploy finished
  2. Build started

チャット

Section titled “チャット”
  1. Show me the failing checks.
  2. Context switched to project “ops”.
  3. Two checks are red: lint and unit.

アコーディオン

Section titled “アコーディオン”

What is Hypermedia Components?

A semantic CSS + htmx UI kit for hypermedia applications.

How do I install it?

pnpm add @hypermedia-components/core

コラプシブル

Section titled “コラプシブル”

Show details

This region is hidden until the user opens it.

フィードバック

Section titled “フィードバック”

アラート

Section titled “アラート”
Saved

Your changes were saved successfully.

トースト · プログレス · スピナー

Section titled “トースト · プログレス · スピナー”

メーター

Section titled “メーター”
42%82%97%

スケルトン

Section titled “スケルトン”

空状態

Section titled “空状態”

No results

We couldn’t find anything matching your search.

レイアウト

Section titled “レイアウト”

アスペクト比

Section titled “アスペクト比”
16 / 9

スクロールエリア

Section titled “スクロールエリア”

Scroll me.

Two

Three

Four

Five

Six

スプリッター

Section titled “スプリッター”
Left
Right

シェル

Section titled “シェル”

完全なアプリケーションシェルを、ここではボックスに縮めて表示して います。実際のページではビューポートを満たし、モバイルではサイドバー がオフキャンバスオーバーレイに折りたたまれます。

Acme
Main content scrolls independently of the chrome.
© Acme

カルーセル

Section titled “カルーセル”
Slide 1
Slide 2
Slide 3

レイアウトパターン

Section titled “レイアウトパターン”

コンポーネントではありません — 基礎 · レイアウトの レスポンシブプリミティブと、テーブルのオーバーフローヘルパーを、 網羅のためにここに載せています。

レイアウトユーティリティ

Section titled “レイアウトユーティリティ”

本質的にレスポンシブなプリミティブ — ブレークポイントなし。ウィンドウ をリサイズすると、グリッドは流れ直し、クラスターは折り返し、サイド バーは折りたたまれます。

A
B
C
D
  • tag-one
  • tag-two
  • tag-three
  • tag-four
Main content keeps its width and wraps the sidebar when space runs out.

テーブルスクロールラッパー

Section titled “テーブルスクロールラッパー”

.hc-table-scroll 内の広いテーブルは、ページを横に押し広げる代わりに オーバーフローをスクロール帯に閉じ込めます。下の帯をスクロールして みてください。

OrderCustomerEmailCreatedStatusTotal
#1001Ada Lovelaceada@example.com2026-05-01Shipped$129.00
#1002Alan Turingalan@example.com2026-05-02Pending$42.50

関連

Section titled “関連”