Memperkenalkan RetroUI 2.0 - lebih besar, lebih berani, lebih baik

Berbulan-bulan kami membangun dalam gelap. Hari ini, kami menyalakan lampunya.

RetroUI 2.0 hadir, dan ini pembaruan terbesar yang pernah kami rilis. Ini bukan sekadar pergantian nomor versi, melainkan evolusi menyeluruh atas apa yang bisa dilakukan RetroUI dan bagaimana Anda berinteraksi dengannya.

Ketika kami meluncurkan RetroUI, tujuannya sederhana: memberi para pengembang pustaka UI yang tak menyerupai yang lain. Desain yang berani, estetika neobrutalis, dan komponen yang membuat proyek Anda menonjol. Visi itu tidak berubah. Namun, cara kami mewujudkannya? Itu berevolusi secara dramatis.

Mari kita selami apa yang baru.

🎨 Dukungan Base UI - fondasi yang Anda minta

Salah satu fitur yang paling banyak diminta sejak hari pertama adalah dukungan Base UI, dan akhirnya ia hadir.

Apa itu Base UI?

Base UI adalah pustaka komponen React yang aksesibel dan tanpa gaya, dibuat oleh tim MUI. Anggaplah ia sebagai alternatif headless dan agnostik terhadap framework untuk Material UI: Anda memperoleh seluruh perilaku dan logika aksesibilitasnya tanpa satu pun keputusan visual yang dipaksakan.

Mengapa ini penting bagi RetroUI

Sampai kini, komponen RetroUI dibangun di atas primitif Radix UI (yang memang luar biasa, jangan salah paham). Namun, Base UI membuka kemungkinan baru:

• Fleksibilitas framework: Base UI berjalan mulus di React, Next.js, dan framework modern lainnya
• Tree-shaking yang lebih baik: ukuran bundle lebih kecil berkat optimasi yang ditingkatkan
• Aksesibilitas yang diperkuat: primitif aksesibilitas Base UI telah teruji dan patuh WCAG sejak awal
• Arsitektur yang tahan masa depan: dibangun untuk React Server Components dan ekosistem React modern

Apa artinya ini bagi Anda? Komponen RetroUI kini lebih ringkas performanya, lebih aksesibel, dan lebih fleksibel dari sebelumnya. Semuanya tanpa meninggalkan bahasa visual yang berani dan khas yang Anda sukai.

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

🌐 Satu situs, satu visi - OS dan Pro bersatu

Ada satu hal yang mengganjal kami: memiliki situs terpisah untuk RetroUI OS (gratis) dan RetroUI Pro terasa... terpecah. Seolah kami memecah komunitas alih-alih menyatukannya.

Tidak lagi.

Situs yang didesain ulang sepenuhnya

Kami membangun ulang seluruh situs RetroUI dari nol, menyatukan OS dan Pro menjadi satu pengalaman yang padu. Inilah yang baru:

Pustaka komponen yang terpadu

Telusuri semua komponen, gratis dan pro, di satu tempat. Tak perlu lagi berpindah antarsitus untuk melihat apa yang tersedia. Semuanya ditandai dengan jelas, sehingga Anda tahu mana yang gratis dan mana yang premium.

Navigasi yang lebih bersih

Menemukan apa yang Anda butuhkan kini lebih cepat dan lebih intuitif. Komponen, blocks, template, dokumentasi: masing-masing punya tempatnya yang logis.

Desain yang lebih halus

Kami mempraktikkan apa yang kami khotbahkan. Situs baru ini lebih berani, lebih cepat, dan lebih rapi. Ia adalah etalase kemampuan RetroUI ketika Anda berkomitmen penuh pada estetikanya.

Pengalaman mobile yang lebih baik

Situs lama berfungsi di mobile. Yang baru bersinar di mobile. Desain responsif yang digarap dengan benar, dengan interaksi sentuh yang terasa nativ.

Bagian terbaiknya? Semuanya ditenagai komponen RetroUI. Kami menyantap masakan kami sendiri: setiap komponen yang Anda lihat di situs adalah sesuatu yang bisa Anda pakai di proyek Anda.

📚 Dokumentasi yang benar-benar membantu

Jujur saja: dokumentasi sering kali jadi urusan belakangan. Kali ini tidak.

Kami merombak total dokumentasi RetroUI dengan fitur-fitur yang memudahkan hidup Anda:

Salin sebagai Markdown

Sedang menggarap dokumentasi untuk proyek Anda sendiri? Menulis artikel tentang RetroUI? Kini Anda bisa menyalin kode komponen sebagai Markdown cukup dengan satu klik.

Sempurna untuk:

• Membuat dokumentasi komponen Anda sendiri
• Menulis tutorial dan panduan
• Membagikan contoh kode di perkakas berbasis Markdown (Notion, GitHub, dsb.)

Dokumentasi bertenaga AI

Kami mengintegrasikan bantuan AI langsung ke dalam dokumentasi. Punya pertanyaan tentang cara mengustomisasi komponen? Perlu memahami API-nya? AI membantu Anda menemukan jawaban lebih cepat ketimbang menggali berlembar-lembar dokumentasi.

Contoh yang bisa Anda tanyakan:

• «Bagaimana caranya membuat komponen Button memakai warna kustom?»
• «Prop apa saja yang diterima komponen Card?»
• «Tunjukkan contoh penggunaan Modal dengan formulir»

Ini bak memiliki pakar RetroUI yang siap sedia sepanjang waktu.

Contoh kode yang diperbaiki

Kini setiap komponen memiliki:

• Pratinjau langsung yang bisa Anda ajak berinteraksi
• Beragam varian yang menampilkan kasus penggunaan berbeda
• Kode siap salin-tempel dengan impor yang benar
• Contoh TypeScript untuk keamanan tipe yang lebih baik
• Catatan aksesibilitas yang menjelaskan cara tiap komponen menangani a11y

Tak perlu lagi menebak-nebak. Tak perlu lagi menggali kode sumber. Cukup contoh yang jelas dan berguna yang membuat Anda membangun lebih cepat.

🧱 Lebih dari 100 blocks baru - membangun lebih cepat dari sebelumnya

Komponen itu bagus. Tetapi terkadang Anda butuh bagian yang utuh, bukan sekadar tombol dan kartu.

Di sinilah blocks berperan.

Apa itu blocks?

Blocks adalah bagian jadi yang bisa Anda jatuhkan ke dalam proyek: bagian hero, tabel harga, grid fitur, testimoni, CTA, dan lainnya. Semuanya sepenuhnya responsif, aksesibel, dan siap dikustomisasi.

Apa yang baru di 2.0?

Kami menambahkan lebih dari 100 blocks baru di setiap kategori yang bisa Anda bayangkan:

Bagian hero

• Lebih dari 15 varian hero baru, dari yang minimalis hingga full-bleed
• Termasuk latar beranimasi, tata letak split-screen, dan hero bervideo

Fitur dan manfaat

• Grid fitur berbasis ikon
• Etalase tangkapan layar
• Panduan langkah demi langkah
• Tabel perbandingan

Tabel harga

• Dari tata letak sederhana 2 kolom hingga harga rumit 4 tingkat
• Sakelar penagihan (bulanan/tahunan)
• Matriks perbandingan fitur

Testimoni

• Tata letak grid, korsel, dan desain masonry
• Testimoni video
• Dinding logo sebagai bukti sosial

CTA dan konversi

• Pendaftaran buletin
• Formulir daftar tunggu
• Bagian unduhan aplikasi
• Formulir kontak yang berkarakter

Header dan navigasi

• Mega menu
• Pola navigasi yang mengutamakan mobile
• Header lengket dengan efek saat menggulir

Footer

• Footer multikolom
• Footer minimalis satu baris
• Footer dengan buletin terintegrasi

Setiap block dibangun dengan estetika RetroUI yang berani: garis tepi tebal, bayangan tegas, warna semarak, dan tata letak asimetris. Semuanya dirancang untuk menonjol, bukan menyatu dengan latar.

Salin// 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 baru: Dasbor Perkakas Dev Mode Gelap

Template adalah tempat semuanya bersatu: komponen, blocks, dan filosofi desain berpadu menjadi aplikasi yang utuh.

Memperkenalkan template terbaru kami: Dark Mode Dev Tool Dashboard.

Apa ini?

Dasbor berfitur lengkap yang mengutamakan mode gelap, dibangun untuk perkakas pengembang, platform SaaS, dan panel admin. Ini segala yang Anda butuhkan untuk membangun aplikasi siap produksi dengan estetika RetroUI yang berani.

Apa saja isinya?

Tata letak dasbor yang lengkap

• Navigasi samping dengan menu yang bisa diciutkan
• Header atas dengan pencarian dan profil pengguna
• Desain responsif yang berfungsi di mobile, tablet, dan desktop

Halaman jadi

• Ikhtisar dasbor dengan metrik dan grafik
• Manajemen pengguna (daftar, detail, sunting)
• Halaman pengaturan dengan contoh formulir
• Halaman dokumentasi API
• Manajemen penagihan dan langganan

Mode gelap yang digarap dengan benar

• Bukan sekadar warna yang dibalik, melainkan dirancang khusus untuk latar gelap
• Kontras tinggi demi keterbacaan
• Warna aksen semarak yang mencolok di atas latar gelap

Fitur siap produksi

• Layar autentikasi (masuk, daftar, lupa kata sandi)
• Status galat dan status kosong
• Kerangka pemuatan (skeleton)
• Notifikasi toast
• Dialog modal dan konfirmasi

Ramah pengembang

• Dibangun dengan TypeScript
• Struktur komponen yang terdokumentasi
• Mudah dikustomisasi dan diperluas
• Mengikuti konvensi App Router Next.js

Ini bukan template mainan. Ini fondasi yang bisa Anda kembangkan untuk produk nyata. Entah Anda meluncurkan SaaS baru, membangun perkakas internal, atau menciptakan platform pengembang, template ini memberi Anda keunggulan awal.

Dan ya, ia tak menyerupai template dasbor lain mana pun yang beredar. Justru itulah intinya.

Mengapa ini penting

RetroUI 2.0 bukan sekadar soal menambah fitur. Ia soal menjadikan RetroUI lebih ampuh, lebih fleksibel, dan lebih berguna untuk proyek dunia nyata.

Dukungan Base UI berarti performa dan aksesibilitas yang lebih baik.

Situs terpadu berarti penemuan yang lebih mudah dan pengalaman yang lebih baik bagi semua orang.

Dokumentasi yang diperbaiki berarti lebih sedikit waktu untuk mencari, lebih banyak waktu untuk membangun.

Lebih dari 100 blocks baru berarti Anda bisa merilis halaman utuh dalam hitungan menit, bukan hari.

Template mode gelap berarti Anda punya fondasi yang solid untuk proyek berikutnya.

Secara keseluruhan, pembaruan ini menjadikan RetroUI 2.0 pustaka UI paling lengkap dan siap produksi bagi para pengembang yang menolak membangun antarmuka yang membosankan.

Apa selanjutnya?

Ini rilis besar, tetapi kami tak berhenti di sini. Inilah yang ada di peta jalan:

• Lebih banyak template (varian mode terang, halaman landing, e-commerce)
• Integrasi Figma ke kode untuk alur dari desain ke pengembangan yang lebih cepat
• Komponen Base UI tambahan seiring kami memperluas pustaka
• Etalase komunitas yang menampilkan proyek yang dibangun dengan RetroUI
• Tutorial video yang menelusuri pola dan kasus penggunaan yang umum

Dan kami mendengarkan. Jika ada komponen yang Anda butuhkan, fitur yang Anda inginkan, atau masalah yang Anda hadapi, beri tahu kami. RetroUI dibangun untuk pengembang, oleh pengembang. Masukan Anda membentuk apa yang kami bangun selanjutnya.

Coba RetroUI 2.0 hari ini

Siap menyelam? Begini cara memulainya:

Bagi pengguna baru

Salin# Install RetroUI
npx retroui-cli init
 
# Or install via npm
npm install @retroui/react

Telusuri komponennya, jelajahi blocks-nya, dan ambil template barunya. Semuanya siap dipakai di proyek Next.js, React, atau Vite Anda.

Bagi pengguna lama

Jika Anda sudah memakai RetroUI, memutakhirkan ke 2.0 itu mudah:

pnpmnpmyarnbun
pnpm add @retroui/react@latest
npm install @retroui/react@latest
yarn add @retroui/react@latest
bun add @retroui/react@latest
Salin

Periksa changelog untuk perubahan yang memutus kompatibilitas (jumlahnya sangat sedikit, dan kami telah mendokumentasikan solusi untuk semuanya).

Terima kasih

RetroUI ada karena para pengembang seperti Anda lelah dengan desain yang generik. Anda ingin membangun hal-hal yang menonjol, yang berkepribadian, yang terasa berbeda.

Kami di sini untuk membuatnya lebih mudah.

Versi 2.0 adalah buah dari berbulan-bulan kerja, ratusan commit, iterasi desain yang tak terhitung, dan masukan dari komunitas yang menakjubkan. Terima kasih telah menjadi bagian dari perjalanan ini.

Kini, pergilah dan bangun sesuatu yang berani. 🚀

Jelajahi RetroUI 2.0:

• Telusuri komponen
• Lihat blocks
• Ambil templatenya
• Baca dokumentasinya
• Bergabung dengan komunitas

Ada pertanyaan? Masukan? Menemukan bug? Buka issue di GitHub atau hubungi kami di Twitter/X.