NeobrutalismeReact UI komponen
Komponen React yang aksesibel dengan gaya neobrutalisme — garis tebal, bayangan tegas, warna mencolok. Masing-masing tersedia dalam versi Radix UI, Base UI, dan React Aria, dipasang dengan CLI shadcn, dan menjadi kode milik Anda.
Tombol
01/07Menekan ke dalam bayangan kerasnya sendiri.
npx shadcn add neobrutalism.com/r/base/button.json- 50+ komponen
- Garis tepi tebal, bayangan tajam
- shadcn CLI pasang
- Radix · Base UI · React Aria
- Radix · Base UI · React Aria
- Dapat diakses secara default
- Kode ini milik Anda
- MCP dukungan server
- Mode gelap & RTL
- Label-label kecil yang mencolok
Semua komponen
Akordeon
Serangkaian bagian yang dapat diperluas dan ditumpuk secara vertikal untuk FAQ, pengaturan, dan halaman dengan konten yang padat — dengan sentuhan gaya neobrutalis berupa garis tepi dan bayangan.
Arah
Penyedia konteks yang mengubah orientasi komponen antara LTR (kiri ke kanan) dan RTL (kanan ke kiri) sehingga menu, slider, dan tab ditampilkan dengan benar dalam bahasa Arab, Ibrani, dan Persia.
Area gulir
Sebuah wadah yang dapat digulir dengan bilah gulir khusus yang kompatibel di berbagai peramban untuk panel obrolan, bilah samping, dan pohon file — dilengkapi dengan tombol gulir bergaya neobrutalis yang tebal.
Area teks
Kotak masukan teks multi-baris untuk komentar, biografi, dan pesan dukungan — dengan sentuhan gaya neobrutalis berupa bingkai dan bayangan.
Avatar
Gambar pengguna dengan opsi pengganti berupa inisial untuk menu profil, utas komentar, dan daftar tim — dengan sentuhan gaya neobrutalis berupa garis tepi tebal.
Bidang
Kolom label, kontrol, teks bantuan, dan pesan kesalahan untuk panel pengaturan, formulir pembayaran, dan alur pendaftaran — dengan gaya desain formulir neobrutalis.
Bilah menu
Sebuah bilah horizontal berisi menu tarik-turun untuk bilah alat bergaya aplikasi, editor, dan dasbor — dengan sentuhan gaya neobrutalis berupa garis tepi dan bayangan.
Bilah sisi
Panel navigasi app-shell yang dapat dilipat untuk dasbor, dokumen, dan alat admin — dengan sentuhan gaya neobrutalis berupa garis tepi dan bayangan.
Breadcrumb
Menunjukkan posisi halaman dalam hierarki situs — jalur tautan untuk dokumen, kategori toko, dan dasbor — dengan huruf tebal bergaya neobrutalis.
Dapat dilipat
Pasangan tombol pemicu dan panel untuk struktur direktori, pengaturan lanjutan, dan bagian "lihat lebih banyak" — dengan sentuhan gaya neobrutalis pada garis tepi dan bayangan.
Dapat diubah ukuran
Panel terpisah yang dapat diseret untuk editor kode, pohon file, dan tata letak dasbor — dengan sentuhan gaya neobrutalis berupa garis tepi dan bayangan.
Dialog
Jendela modal untuk konfirmasi, formulir singkat, dan peringatan tindakan yang berisiko — ditampilkan di atas halaman dengan garis tepi tebal dan bayangan yang tegas.
Dialog peringatan
Sebuah jendela pop-up yang menghentikan alur proses untuk tindakan yang merusak — menghapus, keluar, membatalkan — dengan sentuhan desain neobrutalis berupa garis tepi dan bayangan.
Grup input
Tambahkan ikon, tombol, dan petunjuk keyboard ke kolom input untuk bilah pencarian, kolom URL, dan jendela penulisan pesan obrolan — dengan bingkai dan bayangan bergaya neobrutalis.
Grup radio
Serangkaian tombol radio pilihan tunggal untuk formulir paket, opsi pengiriman, dan pengaturan — dengan sentuhan gaya neobrutalis berupa garis tepi dan bayangan.
Grup toggle
Kelompok tombol dua keadaan untuk bilah alat editor, pengalih tampilan, dan bilah filter — dengan sentuhan gaya neobrutalis berupa garis tepi dan bayangan.
Grup tombol
Fuses menggabungkan tombol-tombol terpisah, bilah alat, dan ekstensi input menjadi satu unit berbingkai — satu garis tepi tebal, satu bayangan tajam, dan satu tombol tekan bersama.
Input
Kotak teks satu baris untuk kolom login, bilah pencarian, dan formulir pembayaran — dengan sentuhan gaya neobrutalis berupa garis tepi tebal dan bayangan tajam.
Input OTP
Kolom untuk memasukkan kode sekali pakai (2FA), verifikasi masuk, dan layar PIN — kolom yang mendukung penyisipan teks dengan bingkai bergaya neobrutalis dan bayangan tajam.
Item
Baris fleksibel yang dilengkapi slot media, judul, deskripsi, dan tindakan untuk umpan notifikasi, daftar pengaturan, dan baris berkas — bergaya neobrutalis.
Kalender
Pemilih tanggal berbasis kisi bulanan untuk pemesanan, penjadwalan, dan pemilihan rentang waktu — dengan sentuhan gaya neobrutalis berupa garis tepi dan bayangan.
Kartu
Kotak bergaris tepi untuk dasbor, tingkatan harga, dan tabel produk — bagian header, isi, dan footer dengan efek bayangan tebal bergaya neobrutalis.
Kartu hover
Pratinjau mengambang yang muncul saat kursor diarahkan ke atas — cuplikan profil, pratinjau tautan, istilah glosarium — dengan sentuhan gaya neobrutalis berupa garis tepi dan bayangan.
Karusel
Slideshow yang dapat digeser untuk galeri produk, testimoni, dan bagian utama — dengan bingkai bergaya neobrutalis dan bayangan tajam.
Kosong
Tempat penampung untuk hasil pencarian kosong, dasbor kosong, dan layar saat pertama kali dijalankan — ikon, judul, dan tindakan yang dibingkai dengan garis tepi bergaya neobrutalis.
Kotak centang
Tombol sakelar biner untuk kotak persetujuan, filter pilihan ganda, dan pemilihan baris massal — dengan sentuhan gaya neobrutalis berupa garis tepi dan bayangan.
Kotak kombo
Kotak masukan dengan fitur autocomplete yang menyaring pilihan saat Anda mengetik — seperti pemilih negara, kotak masukan tag, dan daftar pilihan panjang — dengan garis tepi dan bayangan bergaya neobrutalis.
Label
Teks keterangan untuk kolom input, kotak centang, tombol geser, dan kelompok tombol radio — klik akan mengaktifkan elemen kontrol tersebut, ditampilkan dengan font judul bergaya neobrutalis.
Laci
Lembar antarmuka berbasis gestur yang dapat digeser masuk dari tepi mana pun untuk menu seluler, filter, dan formulir cepat — dilengkapi dengan bingkai dan bayangan bergaya neobrutalis.
Lembar samping
Sebuah panel yang muncul dari tepi layar untuk menu navigasi, filter, dan formulir pengeditan — dengan sentuhan gaya neobrutalis pada garis tepi dan bayangan.
Lencana
Label kecil untuk status, jumlah, dan tag pada kartu, tabel, dan elemen navigasi — dengan sentuhan gaya neobrutalis berupa garis tepi dan bayangan.
Menu konteks
Menu klik kanan untuk baris berkas, kanvas, dan kisi data — tindakan kontekstual dengan sentuhan neobrutalis berupa garis tepi dan bayangan.
Menu navigasi
Sebuah bilah horizontal yang berisi tautan dan panel tarik-turun untuk header situs, navigasi dokumen, dan kerangka aplikasi — dengan garis tepi bergaya neobrutalis dan bayangan tajam.
Menu tarik-turun
Menu yang diaktifkan dengan tombol untuk tindakan baris, pengalih akun, dan opsi tampilan — dengan sentuhan gaya neobrutalis berupa garis tepi dan bayangan.
Paginasi
Tautan halaman bernomor dengan tombol sebelumnya/berikutnya untuk hasil pencarian, tabel, dan arsip — dalam gaya neobrutalis yang menonjolkan batas dan bayangan.
Pemilih tanggal
Kalender popover untuk memilih tanggal tunggal, rentang tanggal, dan tanggal ulang tahun dalam formulir dan filter — dengan bingkai bergaya neobrutalis dan bayangan tajam.
Pemisah
Garis horizontal atau vertikal yang memisahkan menu, bilah alat, dan daftar — digambar dengan warna garis tepi solid yang sama dengan bingkai bergaya neobrutalis.
Peringatan
Teks penjelasan yang ditampilkan langsung untuk kesalahan formulir, peringatan, dan konfirmasi keberhasilan — panel berwarna sesuai status dengan bingkai bergaya neobrutalis dan bayangan tajam.
Perintah
Palet perintah yang dikendalikan melalui keyboard untuk menu ⌘K, pencarian global, dan tindakan cepat — dengan sentuhan gaya neobrutalis berupa bingkai dan bayangan.
Popover
Panel mengambang yang terhubung ke pemicu untuk pemilih tanggal, filter, dan formulir inline — dengan sentuhan gaya neobrutalis berupa garis tepi dan bayangan.
Progres
Sebuah bilah tipis yang terisi seiring selesainya suatu tugas — pengunggahan, pemasangan, proses orientasi bertahap — dengan sentuhan gaya neobrutalis berupa garis tepi dan bayangan.
Rasio aspek
Membatasi gambar, video yang disematkan, dan peta agar tetap pada rasio tetap saat ukurannya disesuaikan — utilitas tata letak yang memastikan kartu bergaya neobrutalis tetap sejajar dengan kisi.
Sakelar
Tombol pengalih on/off untuk pengaturan instan — notifikasi, mode gelap, bendera fitur — dengan sentuhan desain neobrutalis berupa garis tepi dan bayangan.
Select
Menu tarik-turun untuk memilih satu opsi — kolom negara, urutan penyortiran, pengaturan tema — dengan garis tepi bergaya neobrutalis yang tebal dan bayangan yang tegas.
Select native
Elemen select HTML bawaan yang didesain ulang untuk formulir, filter, dan pemilih negara — menu tarik-turun yang ditampilkan oleh sistem operasi dengan garis tepi dan bayangan bergaya neobrutalis.
Skeleton
Blok penanda sementara yang berkedip untuk kartu, avatar, dan tabel saat data dimuat — dengan gaya neobrutalis yang menonjolkan tepi tebal.
Slider
Kotak masukan yang dapat diseret untuk memilih nilai atau rentang — volume, filter harga, pengaturan — dengan sentuhan gaya neobrutalis berupa garis tepi dan bayangan.
Sonner
Pemberitahuan bertumpuk berbentuk roti panggang untuk konfirmasi penyimpanan, pengunggahan, dan jendela pembatalan — dengan sentuhan gaya neobrutalis berupa garis tepi dan bayangan.
Spinner
Indikator pemuatan animasi untuk proses pengiriman, pengambilan data, dan status sibuk inline yang sedang berlangsung — ikon siap pakai untuk kontrol neobrutalis apa pun.
Tab
Beralih di antara panel konten berlapis — halaman pengaturan, dasbor, dan pratinjau kode — dengan sentuhan gaya neobrutalis berupa garis tepi dan bayangan.
Tabel
Tabel HTML semantik untuk faktur, daftar admin, dan tabel harga — baris bergaris tepi, judul tebal, serta bayangan bergaya neobrutalis yang tegas.
Tabel data
Tabel yang dapat diurutkan, difilter, dan dipaginasi untuk panel admin, dasbor, dan daftar pesanan — dengan sentuhan gaya neobrutalis berupa garis tepi dan bayangan.
Tipografi
Resep kelas utilitas untuk judul, teks isi, daftar, tabel, dan kode inline — disusun dengan gaya neobrutalis yang tebal dan kokoh.
Toggle
Tombol on/off dua posisi untuk pengaturan format bilah alat, mode bisu, dan kontrol penanda — dengan sentuhan gaya neobrutalis berupa garis tepi dan bayangan.
Tombol
Tombol pemicu yang dapat diklik untuk pengiriman formulir, bilah alat, dan konfirmasi yang membatalkan — dilengkapi dengan garis tepi tebal serta bayangan yang muncul saat tombol tersebut diklik.
Tombol keyboard
Tutup tombol keyboard untuk petunjuk pintasan di menu, tooltip, dan palet perintah — elemen `kbd` bawaan dengan bingkai dan bayangan bergaya neobrutalis.
Tooltip
Petunjuk saat mengarahkan kursor dan saat fokus untuk tombol ikon, pintasan keyboard, dan label yang dipersingkat — dengan sentuhan gaya neobrutalis pada garis tepi dan bayangan.