Nxui: Bộ thư viện thành phần UI có hoạt ảnh cho Vue, hỗ trợ sao chép và dán trực tiếp

Nxui là một thư viện mã nguồn mở mới nổi, cung cấp bộ sưu tập các thành phần giao diện người dùng (UI) có hoạt ảnh được thiết kế đẹp mắt dành cho Vue. Điểm đặc biệt nhất của công cụ này là cho phép các nhà phát triển sao chép mã nguồn và dán trực tiếp vào ứng dụng của mình, giúp tăng tốc độ xây dựng giao diện mà không cần lo lắng về các phụ thuộc phức tạp.

Thư viện này hướng tới sự đơn giản và hiệu quả, mang lại trải nghiệm "copy-paste" nhưng vẫn đảm bảo tính tùy biến cao thông qua Tailwind CSS.

Các tính năng chính

Nxui tập trung vào việc cung cấp các hiệu ứng thị giác mượt mà và dễ dàng tích hợp. Dưới đây là những tính năng nổi bật:

• Thành phần có hoạt ảnh đa dạng: Bao gồm các hiệu ứng văn bản, nền động, hiệu ứng thị giác, nền hero, nút bấm và nhiều thành phần khác.
• Vue 3 Composition API: Được xây dựng dựa trên Vue 3 và TypeScript, đảm bảo tính hiện đại và mạnh mẽ.
• Tailwind CSS v4: Sử dụng các lớp tiện ích (utility classes) để định dạng, cho phép tùy chỉnh hoàn toàn giao diện.
• motion-v: Tích hợp thư viện motion-v (phiên bản Vue của Framer Motion) để tạo ra các chuyển động mượt mà.
• Hỗ trợ VueUse: Sử dụng các composable từ VueUse để tối ưu hóa logic.
• Dark Mode: Mọi thành phần đều hỗ trợ chế độ tối (dark mode) ngay lập tức.
• Sao chép và Dán: Bạn có thể cài đặt thông qua CLI hoặc sao chép mã nguồn trực tiếp từ tài liệu.

Công nghệ nền tảng

Nxui được xây dựng trên một stack công nghệ hiện đại để đảm bảo hiệu suất và trải nghiệm nhà phát triển tốt nhất:

• Vue 3: Khung làm việc giao diện người dùng (UI framework).
• Nuxt 4: Khung hỗ trợ kết xuất phía máy chủ (SSR) và tạo trang tĩnh (SSG).
• Tailwind CSS v4: Khung định dạng kiểu utility-first.
• motion-v: Thư viện hoạt ảnh (phiên bản port của Framer Motion sang Vue).
• VueUse: Bộ tiện ích composition.
• reka-ui: Các nguyên tố giao diện headless (headless UI primitives).

Cài đặt và sử dụng

Nxui cung cấp hai cách chính để đưa các thành phần vào dự án của bạn.

Cách đầu tiên là sử dụng CLI của shadcn-vue:

npx shadcn-vue@latest add "https://nxui.geoql.in/r/hyper-text.json"

Cách thứ hai là truy cập trang tài liệu (docs), xem bản demo trực tiếp và sao chép toàn bộ mã nguồn để dán vào dự án. Điều này mang lại cho bạn quyền sở hữu hoàn toàn đối với mã code mà không cần phụ thuộc vào thời gian chạy (runtime dependency) của nxui.

Giấy phép và FAQ

Nxui hoàn toàn miễn phí và mã nguồn mở vĩnh viễn theo giấy phép MIT. Bạn có thể sử dụng mọi thành phần trong cả dự án cá nhân và thương mại mà không tốn bất kỳ chi phí nào.

Thư viện này tương thích hoàn toàn với Nuxt vì các thành phần là các tệp thành phần đơn (single-file components) chuẩn của Vue 3. Hiện tại, Nxui đã cung cấp hơn 180 thành phần có hoạt ảnh để nhà phát triển thỏa sức sáng tạo.