Ruixen UI：100+ 精美 React 组件库，支持 Tailwind v3/v4

本文介绍 Ruixen UI，一个现代化的 React UI 组件库，提供 100+ 精美组件、支持 Tailwind CSS v3/v4 双版本、可选 Radix 或 Base 原语，帮助开发者快速构建高质量的用户界面。

项目简介

Ruixen UI 是一个开源的 React 组件库，专注于提供现代化、可访问且高度可定制的 UI 组件。该项目支持 Tailwind CSS v3 和 v4 双版本，开发者可以根据项目需求灵活选择。同时，Ruixen UI 提供 Radix 和 Base 两种原语（Primitives）选项，满足不同的开发场景。

核心特性

• 双版本 Tailwind 支持 - 同时支持 Tailwind CSS v3 和 v4，无缝切换
• 可选原语层 - 支持 Radix UI 和 Base UI 两种底层实现
• 100+ 组件 - 覆盖从基础按钮到复杂日历的完整组件集
• 精致动画 - 内置 Framer Motion 动画效果
• 暗色模式 - 完整的深色主题支持
• 响应式设计 - 移动端优先的设计理念
• TypeScript - 完整的类型定义
• Copy & Paste - 零依赖安装，直接复制代码使用

组件分类

基础组件

交互组件

视觉组件

高级组件

页面区块

安装指南

前置要求

• Node.js >= 18
• React >= 18
• Tailwind CSS v3 或 v4

使用方式

Ruixen UI 采用 Copy & Paste 模式，无需安装 npm 包：

1. 访问 Ruixen UI 文档
2. 选择所需组件
3. 复制组件代码到项目中
4. 根据需要安装依赖（如 Radix UI、Framer Motion）

必需依赖

# 基础依赖
pnpm add tailwindcss framer-motion

# Radix 原语（可选）
pnpm add @radix-ui/react-slot @radix-ui/react-dialog

快速开始

1. 初始化项目

# 创建 Next.js 项目
npx create-next-app@latest my-app --typescript --tailwind

# 进入项目目录
cd my-app

2. 复制组件

从 Ruixen UI 文档复制你需要的组件代码，例如 Confetti Button：

// components/confetti-button.tsx
"use client"

import { motion } from "framer-motion"
import { cn } from "@/lib/utils"

interface ConfettiButtonProps {
  children: React.ReactNode
  className?: string
  onClick?: () => void
}

export function ConfettiButton({ children, className, onClick }: ConfettiButtonProps) {
  const handleClick = () => {
    // 触发彩纸动画
    confetti()
    onClick?.()
  }

  return (
    <motion.button
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      className={cn("relative px-6 py-3 rounded-lg", className)}
      onClick={handleClick}
    >
      {children}
    </motion.button>
  )
}

3. 使用组件

// app/page.tsx
import { ConfettiButton } from "@/components/confetti-button"

export default function Home() {
  return (
    <main className="flex min-h-screen items-center justify-center">
      <ConfettiButton className="bg-primary text-white">
        点击庆祝 🎉
      </ConfettiButton>
    </main>
  )
}

设计原则

Ruixen UI 遵循以下设计原则：

清晰胜于巧妙 (Clarity over cleverness)

代码应该易于理解和维护，避免过度抽象和复杂的模式。

重复的节奏 (Rhythm in repetition)

保持一致的视觉语言和交互模式，让用户能够预测行为。

克制的纪律 (The discipline of restraint)

移除不必要的元素，让每个边框、阴影、颜色都有其存在的意义。

数字材质 (Digital materiality)

在数字界面中模拟真实的材质感，提供有意义的反馈。

技术栈

• 框架: Next.js 15 / React 19
• 样式: Tailwind CSS v3/v4
• 动画: Framer Motion
• 原语: Radix UI / Base UI
• 类型: TypeScript

特色组件推荐

Claude Chat Input

仿照 Claude AI 的聊天输入框，支持多模式切换和实时状态反馈。

Glass AI Card

玻璃态设计的 AI 卡片组件，适合展示 AI 功能入口。

Event Scheduler

完整的事件日历组件，支持拖拽、多视图切换。

Floating Navbar

悬浮导航栏，支持渐变背景和毛玻璃效果。

Pro 版本

Ruixen 还提供付费的 Pro 版本（$59 一次性购买，终身更新）：

• 50+ 高级组件
• 专属模板和区块
• Next.js 15 + TypeScript
• Tailwind CSS v4 + Framer Motion
• 终身更新

项目链接

• 官网: https://ruixen.com
• 组件文档: https://ruixen.com/docs/components
• GitHub: https://github.com/ruixenui/ruixen.com
• Twitter: @ruixen_ui
• Pro 版本: https://pro.ruixen.com