はじめに

HextaUI とは

HextaUI は、React 向けの 65 個のコンポーネント、9 個のフック、5 個のユーティリティのコレクションです。shadcn CLI で追加すると、ソースがプロジェクトに配置され、その後は自分のコードとして読んだり変更したりできます。

すべてのコンポーネントは、すでにご存じの shadcn/ui の API を維持しています。違いは、本来なら自分で行う作業にあります。状態、エッジケース、インターフェースを完成したものに感じさせる細部です。

クイックスタート

shadcn/ui でセットアップしたプロジェクトで、コンポーネントを追加します。

pnpm dlx shadcn@latest add https://hextaui.com/r/button.json

その後、@/components/ui からインポートします。

import { Button } from "@/components/ui/button"

export function SaveButton() {
  return (
    <Button feedback onClick={() => saveSettings()}>
      Save changes
    </Button>
  )
}

要件、すべてを一度に追加する方法、@hextaui 名前空間については、インストールで説明しています。

得られるもの

これらはすべてのコンポーネントに当てはまるため、一つひとつ確認する必要はありません。

モーション

アニメーションはテーマのイージングカーブを使い、途中で中断したり逆再生したりできます。モーションの低減が有効な場合、動きはシンプルなフェードに置き換わります。

キーボードとスクリーンリーダー

すべてキーボードだけで操作でき、ポップアップの開閉時にはフォーカスが期待どおりの場所に移ります。トースト、読み込み中や保存済みの状態、選択、スライドの切り替えなどの変化も通知されます。

タッチと小さな画面

タッチスクリーンではタップターゲットが大きくなり、テキスト入力欄は iOS でズームされないよう 16px に保たれ、ポップアップは 320px 幅まで画面内に収まります。レイアウトは、右から左の言語に合わせて反転します。

ハイコントラスト

フォーカスリング、コントロールの縁、選択状態は、Windows のハイコントラストモードでも見えたままで、デフォルトのテーマはライトとダークの両方で WCAG AA のコントラストを満たします。

ベース技術

• base-vega スタイルの shadcn/ui
• 動作とアクセシビリティを担う Base UI のプリミティブ
• 色、角丸、イージングのテーマトークンを備えた Tailwind CSS v4
• Tabler アイコン

AI アシスタント

すべてのページに Markdown 版があり、/llms.txt がそれらをすべて一覧にしています。MCP に対応したアシスタントは HextaUI MCP server に接続して、ドキュメントの検索、コンポーネントの API の閲覧、インストールコマンドの取得ができます。

ライセンス

HextaUI は MIT ライセンスのオープンソースで、個人および商用プロジェクトで無料で使えます。