markmead/hyperui

これは何？

主な機能

• 01コンポーネントは Tailwind CSS のユーティリティクラスを使ったプレーンな HTML です。
• 02パッケージのインストールは不要で、マークアップをプロジェクトに直接コピーできます。
• 03マーケティングサイト、Web アプリ、eCommerce のレイアウトをカバーしています。
• 04hyperui.dev で閲覧できるカタログと、併設のブログを提供しています。
• 05Astro と pnpm を使って構築されており、ローカルで開発できます。

ユースケース

• Tailwind プロジェクトにランディングページのヒーロー、料金、機能紹介セクションを手早く追加する。
• すべてのコンポーネントを一から設計せずに、管理画面やダッシュボードの UI パーツを作る。
• Tailwind のクラスを使って、eCommerce の商品一覧やチェックアウト用ブロックを試作する。

クイックスタート

1. 1

   hyperui.devでコンポーネントを探して、マークアップをコピーします

2. 2

   コピーしたコードをTailwind CSSプロジェクトに貼り付けます。インストールするパッケージはありません

使う前に知っておきたいこと

• !コンポーネントはコピー＆ペーストするマークアップのため、自分でメンテナンスする必要があり、自動更新されません。

収録されている特集

トピック

よくある質問

hyperui とは？

インストール不要で、コンポーネントをコピーして自分のプロジェクトに貼り付けて使える、無料のオープンソース Tailwind CSS UI コンポーネント集です。 HyperUI は、マーケティングサイト、Web アプリ、eCommerce のフロントエンド向けに、すぐ使える Tailwind CSS コンポーネントを提供するライブラリです。パッケージをインストールする代わりに、hyperui.dev でコンポーネントを探し、マークアップをコピーして Tailwind CSS プロジェクトに貼り付けます。

hyperui は無料で使えますか？ライセンスは？

hyperui は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

hyperui は今もメンテナンスされていますか？

活発にメンテナンス中。hyperui の最終コミットは 2026年10月21日 です。

hyperui は何に使えますか？

Tailwind プロジェクトにランディングページのヒーロー、料金、機能紹介セクションを手早く追加する。 すべてのコンポーネントを一から設計せずに、管理画面やダッシュボードの UI パーツを作る。 Tailwind のクラスを使って、eCommerce の商品一覧やチェックアウト用ブロックを試作する。

hyperui のインストール方法は？

hyperui.devでコンポーネントを探して、マークアップをコピーします コピーしたコードをTailwind CSSプロジェクトに貼り付けます。インストールするパッケージはありません

hyperui はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/markmead/hyperui