NeonBlade UI

一個免費且開源的未來感React元件庫，採用科幻美學並基於Tailwind CSS建構。沒有包裝器。只有屬於你的程式碼。

規則很簡單

NeonBlade UI 完全無鎖定。元件直接下載到您的專案中——它們存在於您的程式碼庫中，而不是在 node_modules 黑盒子裡。唯一真正的需求是 Tailwind CSS。就這樣。安裝 Tailwind，執行 CLI，然後就可以開始建構。

NeonBlade UI 建立在 Tailwind CSS v4 之上作為主要樣式引擎。如果您還沒有安裝，以下是設定方式。

Next.js

bash

npm install tailwindcss @tailwindcss/postcss

然後將 @import "tailwindcss" 添加到您的全域 CSS 檔案。

Vite (React)

bash

npm install tailwindcss @tailwindcss/vite

新增 Tailwind Vite 外掛，然後在您的 CSS 入口匯入 Tailwind。

NeonBlade UI 附帶自己的 CLI。它是專為 NeonBlade 從頭打造的，並直接與我們的元件註冊表通訊。無需配置檔案，無需初始化步驟。在專案中的任何位置執行。

新增元件

bash

npx neonblade add <component-name>

列出所有可用的元件

bash

npx neonblade add

CLI 會自動偵測您的套件管理器（npm、pnpm、yarn）並安裝任何必要的依賴項。

讓我們將 corner-cut-button 元件新增到您的專案：

bash

npx neonblade add corner-cut-button

CLI 會擷取檔案、安裝依賴項，並將它們放置在您的專案中。

然後使用它：

tsx

export default function Page() {
  return (
    <CornerCutButton>
      Hello, Future
    </CornerCutButton>
  );
}

NeonBlade UI 元件是標準的 React 元件——任何能執行 React 和 Tailwind CSS 的環境都受支援。以下是我們直接測試並推薦的：

套件管理器

NeonBlade UI 也與 Remix 和 Astro（整合 React）搭配良好——只要您能匯入 React 元件並讓 Tailwind 掃描您的檔案即可。

所有可用的元件——背景、按鈕、卡片、文字效果、框架——都記錄在元件庫中。包含即時預覽、屬性表格和使用程式碼。