H
Horizon UI
適用於 Chakra UI、Next.js 和 Tailwind CSS 儀表板專案的開源 React 管理後台範本。
subscription
最後更新 2026/7/30
關於 Horizon UI
Horizon UI 為希望從已編寫完成的儀表板元件和頁面範例著手的團隊提供開源 React 管理後台範本。官方網站展示以 Chakra UI 或 Tailwind CSS 建構的不同版本，並提供 JavaScript、TypeScript 以及有文件說明的 Next.js 組合。常見範例包括驗證、個人資料和 NFT 頁面；Horizon AI Template 則為以 ChatGPT 為基礎的應用程式提供 React、Next.js 和 Chakra UI 基礎，並包含超過 100 個深色與淺色介面元素。這種多樣性可以縮短介面設定時間，但各版本是彼此獨立的起點，並非單一可互換的套件，因此團隊仍需選擇技術堆疊並檢查其相依套件。樣板文件也展示了一個包含三張方案卡片的定價頁面，已串接結帳、訂閱管理和儀表板路由功能；實際產品和價格必須在 Stripe 中設定。
功能特性
React 管理後台儀表板
直接使用為驗證、個人資料、NFT 及其他常見管理後台頁面編寫完成的版面配置和元件，無須從頭設計每個畫面。
多種介面技術堆疊
選擇 Chakra UI 或 Tailwind CSS 範本，並搭配 JavaScript、TypeScript 或文件中說明的 Next.js 選項。
AI 應用程式範本
使用 Horizon AI Template 的元件和已編寫頁面，作為以 ChatGPT 為基礎的 SaaS 應用程式或提示詞驅動型網頁應用程式的介面基礎。
優點
- 開源下載降低了測試 React 儀表板起始範本的前期成本。
- 多個 Chakra UI 和 Tailwind CSS 版本讓團隊可以使範本配合現有前端技術堆疊。
- 已編寫的元件和頁面範例減少了組裝常見管理後台畫面所需的工作。
缺點
- JavaScript、TypeScript、Next.js、Chakra UI 和 Tailwind 的版本彼此獨立，採用前需要進行相容性檢查。
- 文件中的定價介面仍要求團隊自行設定 Stripe 產品和價格。
- 這些範本所呈現的產品資訊不包含安全和隱私保障，因此團隊必須自行評估部署需求。
價格方案
在 Stripe 中設定的訂閱
Configured in Stripe自訂
- 三張方案卡片的定價介面
- 結帳函式呼叫
- 訂閱管理流程
- 結帳後導向儀表板
* 價格資訊僅供參考，請以Horizon UI官網最新公告為準。
常見問題
Horizon UI 是開源 React 管理後台範本供應商，為 Chakra UI、Next.js 和 Tailwind CSS 提供儀表板選項。其範本包含已編寫的介面元素和頁面範例，可用於建構網頁應用程式儀表板。
官方網站提供搭配 TypeScript 或 JavaScript 的 React Chakra UI 範本、適用於 React 和 Next.js 的 Chakra UI 選項，以及搭配 TypeScript 或 JavaScript 的 React Tailwind CSS 範本。
是。Horizon AI Template 使用 React、Next.js 和 Chakra UI 建構，適用於以 ChatGPT 為基礎的專案；其文件說明包含超過 100 個深色與淺色介面元素。
工具資訊
開發商Horizon UI
釋出日期2026/7/20
定價模式subscription