nxui (Vue)

项目概述

nxui 是一套专为 Vue 3 与 Nuxt 4 生态打造的高颜值动效 UI 组件库，由 Vinayak Kulkarni 开源。nxui 填补了 Vue 生态在现代微动效与 Copy-and-Paste 源码所有权模式上的空白，基于最新的 Tailwind CSS v4 与 motion-v（Framer Motion 官方 Vue 移植版）构建，底层融合了 VueUse 组合式函数与 Reka UI 无障碍无头基建。全库收录了 230+ 款开箱即用的高阶动效组件，支持通过 shadcn-vue CLI 单命令将纯净的 Vue SFC 单文件源码复制进项目。

核心特性

• 💚 专为 Vue 3 & Nuxt 4 深度优化：基于 <script setup> 组合式 API 与原生 TypeScript 编写，无缝支持 Nuxt 4 SSR 服务端渲染与静态导出。
• 🎬 motion-v 驱动的物理级动效：采用 Framer Motion 的官方 Vue 移植版，提供流畅的文本揭示、背景粒子、流光按钮与视差卡片动效。
• 🧱 230+ 款丰富场景组件：涵盖文本动画（Hyper Text、Typing）、Hero 动态背景、交互卡片、状态指示器及全套表单控件。
• 📦 零运行时黑盒依赖：兼容 shadcn-vue Registry 格式，源码直接入库，支持任意原子化 Tailwind 类名自定义与全量深色模式（Dark Mode）。

快速上手与示例代码

# 使用 shadcn-vue CLI 按需添加 nxui 动效组件（例如炫酷的打字机文本效果）
npx shadcn-vue@latest add "https://nxui.geoql.in/r/hyper-text.json"

<script setup lang="ts">
import HyperText from '@/components/ui/hyper-text/HyperText.vue';
</script>

<template>
  <div class="flex flex-col items-center justify-center min-h-[300px] p-8 bg-background">
    <HyperText
      text="NXUI FOR VUE 3"
      class="text-4xl font-bold tracking-tight text-foreground font-mono"
      :duration="800"
    />
    <p class="mt-3 text-sm text-muted-foreground">
      Powered by Tailwind CSS v4 and motion-v.
    </p>
  </div>
</template>

技术选型建议与适用场景

• 非常适合：正在使用 Vue 3、Vite 或 Nuxt 4 技术栈，希望提升官网主视觉（Hero Section）、创意交互卡片与微动画质感的前端团队，以及偏好 shadcn 代码所有权模式的 Vue 开发者。
• 与同类方案对比：以往 Vue 社区大多依赖传统的组件库（如 Element Plus、Naive UI），这类库偏向传统后台但缺乏抓人眼球的现代微交互；而类似 Aceternity UI 的先锋动效组件库以往几乎全是 React 专属，nxui 让 Vue 开发者终于也能零门槛享受媲美 React 生态的顶级视觉动效组件。