Giới thiệu RetroUI 2.0 - lớn hơn, táo bạo hơn, tốt hơn

Nhiều tháng qua chúng tôi đã xây dựng trong bóng tối. Hôm nay, chúng tôi bật đèn lên.

RetroUI 2.0 đã có mặt, và đây là bản cập nhật lớn nhất chúng tôi từng phát hành. Đây không chỉ là một lần nâng số phiên bản: nó là một sự tiến hóa trọn vẹn của những gì RetroUI có thể làm và cách bạn tương tác với nó.

Khi ra mắt RetroUI, mục tiêu rất đơn giản: mang đến cho các lập trình viên một thư viện UI không giống bất cứ thứ gì khác. Những thiết kế táo bạo, thẩm mỹ neo-brutalism, và các thành phần khiến dự án của bạn nổi bật. Tầm nhìn đó không đổi. Còn cách chúng tôi hiện thực hóa nó? Điều đó đã tiến hóa mạnh mẽ.

Hãy cùng đi sâu vào những gì mới mẻ.

🎨 Hỗ trợ Base UI - nền tảng bạn hằng mong đợi

Một trong những tính năng được yêu cầu nhiều nhất ngay từ ngày đầu là hỗ trợ Base UI, và cuối cùng nó đã ở đây.

Base UI là gì?

Base UI là một thư viện các thành phần React không định kiểu, có khả năng tiếp cận, do đội ngũ MUI xây dựng. Hãy xem nó như lựa chọn thay thế headless và không lệ thuộc framework cho Material UI: bạn có được toàn bộ hành vi và logic về khả năng tiếp cận mà không bị áp đặt bất kỳ quan điểm tạo kiểu nào.

Vì sao điều này quan trọng với RetroUI

Cho đến nay, các thành phần của RetroUI được dựng trên các primitive của Radix UI (vốn xuất sắc, đừng hiểu lầm). Nhưng Base UI mở ra những khả năng mới:

• Linh hoạt về framework: Base UI hoạt động mượt mà trên React, Next.js và các framework hiện đại khác
• Tree-shaking tốt hơn: kích thước bundle nhỏ hơn nhờ tối ưu hóa được tinh chỉnh
• Khả năng tiếp cận được tăng cường: các primitive về khả năng tiếp cận của Base UI đã được kiểm nghiệm kỹ và tuân thủ WCAG ngay từ đầu
• Kiến trúc sẵn sàng cho tương lai: được dựng cho React Server Components và hệ sinh thái React hiện đại

Điều này có nghĩa gì với bạn? Các thành phần của RetroUI giờ đây hiệu năng hơn, dễ tiếp cận hơn và linh hoạt hơn bao giờ hết. Tất cả mà không từ bỏ ngôn ngữ thiết kế táo bạo, đặc trưng mà bạn yêu thích.

Sao chép// Now powered by Base UI under the hood
import { Button } from '@/components/neobrutalism'
 
<Button variant="primary">
  Still bold. Still RetroUI. Now even better.
</Button>

🌐 Một website, một tầm nhìn - OS và Pro hợp nhất

Có một điều khiến chúng tôi bận lòng: giữ những website riêng biệt cho RetroUI OS (miễn phí) và RetroUI Pro mang lại cảm giác... rời rạc. Như thể chúng tôi đang chia rẽ cộng đồng thay vì gắn kết nó lại.

Không còn nữa.

Một website được thiết kế lại hoàn toàn

Chúng tôi đã dựng lại toàn bộ website RetroUI từ đầu, hợp nhất OS và Pro thành một trải nghiệm liền mạch. Đây là những điểm mới:

Một thư viện thành phần hợp nhất

Duyệt tất cả các thành phần, miễn phí và pro, ở cùng một nơi. Không còn phải nhảy qua lại giữa các website để xem có gì. Mọi thứ được đánh dấu rõ ràng, nên bạn biết cái gì miễn phí và cái gì cao cấp.

Một điều hướng gọn gàng hơn

Tìm thứ bạn cần giờ đây nhanh hơn và trực quan hơn. Thành phần, blocks, template, tài liệu: mỗi thứ đều có một chỗ hợp lý.

Một thiết kế được chăm chút hơn

Chúng tôi thực hành điều mình rao giảng. Website mới táo bạo hơn, nhanh hơn và tinh tế hơn. Nó là một cửa sổ trưng bày những gì RetroUI có thể làm khi bạn cam kết trọn vẹn với thẩm mỹ ấy.

Một trải nghiệm di động tốt hơn

Website cũ hoạt động trên di động. Website mới tỏa sáng trên di động. Thiết kế responsive được làm đúng cách, với những tương tác cảm ứng mang cảm giác thuần bản địa.

Phần hay nhất? Tất cả đều chạy trên các thành phần RetroUI. Chúng tôi tự dùng sản phẩm của chính mình: mỗi thành phần bạn thấy trên website đều là thứ bạn có thể dùng trong dự án của mình.

📚 Tài liệu thực sự hữu ích

Nói thẳng nhé: tài liệu thường bị xem là chuyện tính sau. Lần này thì không.

Chúng tôi đã đại tu toàn bộ tài liệu RetroUI với những tính năng giúp cuộc sống của bạn dễ dàng hơn:

Sao chép dưới dạng Markdown

Đang làm tài liệu cho dự án của riêng bạn? Đang viết một bài về RetroUI? Giờ đây bạn có thể sao chép mã của một thành phần dưới dạng Markdown chỉ với một cú nhấp.

Hoàn hảo để:

• Tạo tài liệu cho các thành phần của riêng bạn
• Viết hướng dẫn và cẩm nang
• Chia sẻ ví dụ mã trong các công cụ dựa trên Markdown (Notion, GitHub, v.v.)

Tài liệu được hỗ trợ bởi AI

Chúng tôi đã tích hợp trợ giúp AI ngay trong tài liệu. Có câu hỏi về cách tùy chỉnh một thành phần? Cần hiểu API? AI giúp bạn tìm câu trả lời nhanh hơn so với việc lục lọi hàng loạt trang tài liệu.

Ví dụ về những gì bạn có thể hỏi:

• «Làm sao để thành phần Button dùng màu tùy chỉnh?»
• «Thành phần Card nhận những props nào?»
• «Cho tôi ví dụ về việc dùng Modal với biểu mẫu»

Chẳng khác gì có một chuyên gia RetroUI túc trực 24/7.

Ví dụ mã được cải thiện

Giờ đây mỗi thành phần đều có:

• Xem trước trực tiếp mà bạn có thể tương tác
• Nhiều biến thể minh họa các trường hợp sử dụng khác nhau
• Mã sẵn sàng sao chép-dán với các import đúng
• Ví dụ TypeScript cho độ an toàn kiểu tốt hơn
• Ghi chú về khả năng tiếp cận giải thích cách mỗi thành phần xử lý a11y

Không còn phải đoán. Không còn phải lục lọi mã nguồn. Chỉ những ví dụ rõ ràng, hữu ích giúp bạn xây dựng nhanh hơn.

🧱 Hơn 100 blocks mới - xây dựng nhanh hơn bao giờ hết

Các thành phần rất tuyệt. Nhưng đôi khi bạn cần cả những phần hoàn chỉnh, không chỉ nút và thẻ.

Đó là lúc blocks vào cuộc.

blocks là gì?

blocks là những phần dựng sẵn mà bạn có thể thả vào dự án: phần hero, bảng giá, lưới tính năng, đánh giá của khách hàng, CTA và nhiều hơn nữa. Chúng hoàn toàn responsive, dễ tiếp cận và sẵn sàng để tùy chỉnh.

Có gì mới trong 2.0?

Chúng tôi đã thêm hơn 100 blocks mới trên mọi hạng mục bạn có thể nghĩ tới:

Phần hero

• Hơn 15 biến thể hero mới, từ tối giản đến tràn viền (full-bleed)
• Bao gồm nền động, bố cục chia đôi màn hình, và hero có video

Tính năng và lợi ích

• Lưới tính năng dựa trên biểu tượng
• Trưng bày ảnh chụp màn hình
• Hướng dẫn từng bước
• Bảng so sánh

Bảng giá

• Từ bố cục 2 cột đơn giản đến bảng giá phức tạp 4 bậc
• Công tắc chu kỳ thanh toán (theo tháng/theo năm)
• Ma trận so sánh tính năng

Đánh giá của khách hàng

• Bố cục lưới, băng chuyền, và thiết kế masonry
• Đánh giá bằng video
• Bức tường logo làm bằng chứng xã hội

CTA và chuyển đổi

• Đăng ký bản tin
• Biểu mẫu danh sách chờ
• Phần tải ứng dụng
• Biểu mẫu liên hệ có cá tính

Header và điều hướng

• Mega menu
• Mẫu điều hướng ưu tiên di động
• Header dính với hiệu ứng khi cuộn

Footer

• Footer nhiều cột
• Footer tối giản một hàng
• Footer tích hợp bản tin

Mỗi block được dựng với cùng thẩm mỹ RetroUI táo bạo: viền dày, bóng đanh, màu sắc rực rỡ và bố cục bất đối xứng. Chúng được thiết kế để nổi bật, chứ không để hòa lẫn.

Sao chép// Drop in a complete hero section in seconds
import { HeroBold } from '@/components/blocks'
 
<HeroBold
  title="Your Product Name"
  subtitle="Ship faster with bold design"
  cta="Get Started"
/>

🌙 Template mới: Dashboard công cụ dev chế độ tối

Template là nơi mọi thứ hội tụ: thành phần, blocks và triết lý thiết kế hợp nhất thành một ứng dụng hoàn chỉnh.

Giới thiệu template mới nhất của chúng tôi: Dark Mode Dev Tool Dashboard.

Nó là gì?

Một dashboard đầy đủ tính năng, ưu tiên chế độ tối, được dựng cho công cụ lập trình, nền tảng SaaS và bảng quản trị. Nó là mọi thứ bạn cần để xây dựng một ứng dụng sẵn sàng cho production với thẩm mỹ táo bạo của RetroUI.

Bao gồm những gì?

Một bố cục dashboard hoàn chỉnh

• Điều hướng bên với menu có thể thu gọn
• Header trên cùng với ô tìm kiếm và hồ sơ người dùng
• Thiết kế responsive hoạt động trên di động, máy tính bảng và desktop

Các trang dựng sẵn

• Trang tổng quan dashboard với số liệu và biểu đồ
• Quản lý người dùng (danh sách, chi tiết, chỉnh sửa)
• Trang cài đặt với ví dụ biểu mẫu
• Trang tài liệu API
• Quản lý thanh toán và đăng ký

Chế độ tối làm đúng cách

• Không chỉ là màu bị đảo ngược: được thiết kế có chủ đích cho nền tối
• Tương phản cao để dễ đọc
• Màu nhấn rực rỡ nổi bật trên nền tối

Các tính năng sẵn sàng cho production

• Màn hình xác thực (đăng nhập, đăng ký, quên mật khẩu)
• Trạng thái lỗi và trạng thái trống
• Skeleton khi đang tải
• Thông báo toast
• Hộp thoại modal và xác nhận

Thân thiện với lập trình viên

• Được dựng bằng TypeScript
• Cấu trúc thành phần được ghi tài liệu
• Dễ tùy chỉnh và mở rộng
• Tuân theo quy ước App Router của Next.js

Đây không phải một template đồ chơi. Nó là một nền tảng bạn có thể xây dựng lên cho các sản phẩm thật. Dù bạn đang ra mắt một SaaS mới, dựng một công cụ nội bộ, hay tạo một nền tảng dành cho lập trình viên, template này cho bạn một lợi thế khởi đầu.

Và đúng vậy, nó chẳng giống bất kỳ template dashboard nào khác ngoài kia. Đó chính là điểm mấu chốt.

Vì sao điều này quan trọng

RetroUI 2.0 không chỉ là chuyện thêm tính năng. Nó là chuyện làm cho RetroUI mạnh mẽ hơn, linh hoạt hơn và hữu ích hơn cho các dự án thực tế.

Hỗ trợ Base UI nghĩa là hiệu năng và khả năng tiếp cận tốt hơn.

Website hợp nhất nghĩa là dễ khám phá hơn và một trải nghiệm tốt hơn cho tất cả mọi người.

Tài liệu được cải thiện nghĩa là ít thời gian tìm kiếm hơn, nhiều thời gian xây dựng hơn.

Hơn 100 blocks mới nghĩa là bạn có thể phát hành cả trang hoàn chỉnh trong vài phút, không phải vài ngày.

Template chế độ tối nghĩa là bạn có một nền tảng vững chắc cho dự án kế tiếp.

Cùng nhau, những cập nhật này biến RetroUI 2.0 thành thư viện UI đầy đủ nhất, sẵn sàng cho production nhất, dành cho những lập trình viên từ chối xây dựng những giao diện nhàm chán.

Tiếp theo là gì?

Đây là một bản phát hành lớn, nhưng chúng tôi không dừng lại. Đây là những gì có trong lộ trình:

• Thêm nhiều template (biến thể chế độ sáng, landing page, thương mại điện tử)
• Tích hợp Figma sang mã cho một quy trình từ thiết kế đến phát triển nhanh hơn
• Thêm các thành phần Base UI khi chúng tôi mở rộng thư viện
• Một cửa sổ trưng bày cộng đồng giới thiệu các dự án dựng bằng RetroUI
• Hướng dẫn bằng video đi qua các mẫu và trường hợp sử dụng phổ biến

Và chúng tôi lắng nghe. Nếu có một thành phần bạn cần, một tính năng bạn muốn, hay một vấn đề bạn đang gặp, hãy cho chúng tôi biết. RetroUI được dựng cho lập trình viên, bởi lập trình viên. Phản hồi của bạn định hình những gì chúng tôi xây dựng tiếp theo.

Dùng thử RetroUI 2.0 ngay hôm nay

Sẵn sàng đắm mình vào chưa? Đây là cách bắt đầu:

Dành cho người dùng mới

Sao chép# Install RetroUI
npx retroui-cli init
 
# Or install via npm
npm install @retroui/react

Duyệt các thành phần, khám phá blocks, và lấy template mới. Mọi thứ đều sẵn sàng để dùng trong dự án Next.js, React hay Vite của bạn.

Dành cho người dùng hiện tại

Nếu bạn đã dùng RetroUI, việc nâng cấp lên 2.0 rất đơn giản:

pnpmnpmyarnbun
pnpm add @retroui/react@latest
npm install @retroui/react@latest
yarn add @retroui/react@latest
bun add @retroui/react@latest
Sao chép

Hãy xem changelog để nắm mọi thay đổi phá vỡ tương thích (rất ít, và chúng tôi đã ghi tài liệu cách khắc phục cho tất cả).

Cảm ơn

RetroUI tồn tại vì những lập trình viên như bạn đã chán những thiết kế chung chung. Bạn muốn xây dựng những thứ nổi bật, có cá tính, mang cảm giác khác biệt.

Chúng tôi ở đây để làm điều đó dễ dàng hơn.

Phiên bản 2.0 là kết quả của nhiều tháng làm việc, hàng trăm commit, vô số lần lặp thiết kế, và phản hồi từ một cộng đồng tuyệt vời. Cảm ơn bạn đã là một phần của hành trình này.

Giờ hãy đi và xây dựng một thứ gì đó táo bạo. 🚀

Khám phá RetroUI 2.0:

• Duyệt các thành phần
• Xem qua blocks
• Lấy template
• Đọc tài liệu
• Tham gia cộng đồng

Có câu hỏi? Phản hồi? Tìm thấy một lỗi? Mở một issue trên GitHub hoặc liên hệ trên Twitter/X.