HeroUI (NextUI)

项目概述

HeroUI（原知名开源项目 NextUI）是一套专注于极致美学与流畅交互的现代 React UI 组件库。它基于 Tailwind CSS 与 Adobe 的 React Aria 无障碍体系构建，将细腻丝滑的弹簧物理动效（Spring Animations）与现代设计语言深度融合。

无论是卡片悬浮波纹、流畅的下拉选择还是自适应阴影，HeroUI 都能为你的 Web 应用带来媲美原生 iOS 级的顺滑质感。

核心特性

• ✨ 丝滑弹簧微动效：基于 Framer Motion 精心调校的弹簧动效与水波纹点击反馈，质感极其细腻。
• ♿️ React Aria 底层支撑：底层基于 Adobe React Aria，原生内建严格的键盘无障碍与屏幕阅读器支持。
• 🎨 Tailwind Variants 样式定制：通过 tailwind-variants 实现组件各部件（Slots）的原子级样式覆盖与扩展。
• 🌓 自动化深色模式：内建高对比度深色模式支持，色彩明度过渡自然平滑。

快速上手与示例代码

npm i @heroui/react framer-motion

基础组件示例

import React from "react";
import { Button, Card, CardBody } from "@heroui/react";

export default function App() {
  return (
    <Card className="max-w-[340px] shadow-sm">
      <CardBody className="gap-3">
        <h4 className="font-bold text-large">现代质感卡片</h4>
        <p className="text-small text-default-500">开箱即享细腻的弹簧动效与光影反馈。</p>
        <Button color="primary" variant="shadow">
          立即体验
        </Button>
      </CardBody>
    </Card>
  );
}

技术选型建议与适用场景

• 非常适合：现代 React / Next.js Web 应用程序、注重品牌调性与动态交互的高颜值 SaaS 产品及创意展示站。
• 不适用场景：完全排斥 npm 第三方打包依赖、严格要求代码 100% 复制到本地自研管理的极简团队。