NeonBlade UI

一个免费开源的未来主义React组件库，采用科幻美学风格，基于Tailwind CSS构建。无封装层。代码完全属于你。

规则很简单

NeonBlade UI 完全无锁定。组件直接下载到你的项目中——它们存在于你的代码库中，而非node_modules黑盒内。唯一真正的依赖是Tailwind CSS。仅此而已。安装Tailwind，运行CLI，然后就可以开始构建了。

• 在你的项目中配置好Tailwind CSS

• 运行CLI来添加组件

• 组件直接放入你的源代码中

• 随意自定义——现在它是你的代码了

安装Tailwind CSS

NeonBlade UI 基于Tailwind CSS v4作为主要样式引擎构建。如果你还没有安装，以下是配置方法。

Next.js

npm install tailwindcss @tailwindcss/postcss

然后在你全局CSS文件中添加@import "tailwindcss"。

Vite (React)

npm install tailwindcss @tailwindcss/vite

添加Tailwind Vite插件，然后在你的CSS入口文件中导入Tailwind。

Tailwind CSS 官方文档

NeonBlade CLI

NeonBlade UI 附带了自己的CLI。它是专为NeonBlade从零构建的，直接连接到我们的组件注册表。无需配置文件，无需初始化步骤。你可以在项目的任何位置运行它。

添加组件

npx neonblade add <component-name>

列出所有可用组件

npx neonblade add

CLI会自动检测你的包管理器（npm、pnpm、yarn）并安装所需的依赖。

使用示例

让我们将corner-cut-button组件添加到你的项目中：

npx neonblade add corner-cut-button

CLI会获取文件，安装依赖，并将它们放入你的项目中。

然后使用它：

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

支持的环境

NeonBlade UI 组件是标准的React组件——任何运行React和Tailwind CSS的环境都支持。以下是我们直接测试和推荐的：

• Next.js

• React

• Vite

• TypeScript

• Tailwind CSS

包管理器

• npm

• pnpm

• yarn

NeonBlade UI 也与Remix和Astro（通过React集成）兼容良好——任何你可以导入React组件并让Tailwind扫描文件的地方。

浏览组件

所有可用组件——背景、按钮、卡片、文本效果、框架——都在组件库中进行了文档记录。包含实时预览、属性表和用法代码。