# Vaul

Komponen drawer tanpa gaya bawaan yang dirancang untuk integrasi mulus dalam aplikasi React dan meningkatkan interaksi pengguna di perangkat seluler.

[Website](https://vaul.emilkowal.ski) [GitHub](https://github.com/emilkowalski/vaul) [npm](https://npmjs.com/package/vaul)

Vaul adalah komponen drawer tanpa gaya bawaan yang dirancang khusus untuk aplikasi React. Komponen ini berfungsi sebagai pengganti dialog dan dioptimalkan untuk digunakan pada tablet dan perangkat seluler. Komponen ini dibuat agar fleksibel, sehingga developer dapat menyesuaikan perilaku dan tampilan drawer di aplikasi mereka.

Salah satu fitur utamanya adalah kemampuan untuk memperbesar latar belakang saat drawer dibuka, sehingga menciptakan pengalaman yang lebih imersif bagi pengguna. Drawer dapat dikendalikan secara terprogram, sehingga developer dapat mengatur status terbukanya melalui pengelolaan state React.

Vaul menyediakan API yang sederhana untuk integrasi, dengan komponen yang jelas seperti Drawer.Root, Drawer.Trigger, Drawer.Content, dan Drawer.Overlay, sehingga strukturnya tertata saat digunakan dalam aplikasi. Pustaka ini mendukung berbagai fungsi, seperti titik snap untuk meningkatkan interaksi pengguna, kustomisasi wadah drawer, dan opsi agar drawer tidak dapat ditutup.

Komponen ini ideal bagi developer yang ingin menerapkan fitur drawer responsif dan ramah perangkat seluler tanpa batasan komponen bergaya yang dapat berbenturan dengan sistem desain aplikasi mereka.

Untuk contoh penggunaan yang lengkap, pengguna dapat menjelajahi demo interaktif di CodeSandbox yang menampilkan berbagai fitur komponen, seperti kontrol gulir dan titik snap kustom.

## Fitur

- Komponen drawer tanpa gaya bawaan
- Dioptimalkan untuk perangkat seluler dan tablet
- Skala latar belakang
- Titik snap yang dapat disesuaikan
- Kontrol terprogram atas status terbuka
- Mendukung drawer bertingkat
- Penempatan konten yang fleksibel
- Portal kustom untuk rendering

## Detail

**Bintang GitHub**

6.5K

**Unduhan NPM**

605.0K/minggu

**Versi Terbaru**

1.1.1

**Dibuat pada**

Jul 16, 2023

**Diperbarui pada**

Dec 6, 2024

**Lisensi**

MIT License

Iklan Anda di sini?

[Email kami](mailto:hi@dennn.is?subject=Beriklan%20di%20KickstartUI)

[Iklan Rangkaian plugin siap agen untuk WordPress.](https://sleekwp.com/?ref=kickstartui)

## Item Terkait

### [BaseUI](https://kickstartui.com/id/details/baseui/)

Komponen React tanpa headless dan tanpa gaya bawaan untuk membangun antarmuka yang aksesibel dan sangat mudah disesuaikan dengan kendali penuh atas gaya.

**Bintang GitHub**

5.2K

**Diperbarui pada**

Aug 17, 2025

**Lisensi**

MIT License

### [PrimeVue](https://kickstartui.com/id/details/primevue/)

Kumpulan komponen UI open source yang kaya, dirancang untuk membangun aplikasi Vue.js dengan lancar dan efisien.

**Bintang GitHub**

11.0K

**Diperbarui pada**

Dec 6, 2024

**Lisensi**

MIT License

### [Radix Primitives](https://kickstartui.com/id/details/radix-ui-primitives/)

Primitif React open source yang aksesibel dan tanpa gaya untuk aplikasi web serta sistem desain berkualitas tinggi.

**Bintang GitHub**

16.0K

**Diperbarui pada**

Dec 6, 2024

**Lisensi**

MIT License

### [ArkUI](https://kickstartui.com/id/details/ark-ui/)

Solusi UI open source ini memungkinkan pembuatan sistem desain canggih menggunakan komponen yang dapat disesuaikan dengan berbagai gaya visual dan standar aksesibilitas.

**Bintang GitHub**

3.9K

**Diperbarui pada**

Dec 6, 2024

**Lisensi**

MIT License

### [ChakraUI](https://kickstartui.com/id/details/chakra-ui/)

Buat aplikasi web yang aksesibel dengan cepat dan efisien menggunakan rangkaian komponen penting yang andal, mudah digunakan, dan sangat mudah disesuaikan.

**Bintang GitHub**

38.1K

**Diperbarui pada**

Dec 6, 2024

**Lisensi**

MIT License

### [cmdk](https://kickstartui.com/id/details/cmdk/)

Komponen ini menyediakan solusi menu perintah yang lengkap untuk React, dengan fokus pada pengalaman pengguna dan fleksibilitas developer.

**Bintang GitHub**

10.0K

**Diperbarui pada**

Dec 6, 2024

**Lisensi**

MIT License

### [Docusaurus](https://kickstartui.com/id/details/docusaurus/)

Proyek untuk membantu membuat situs dokumentasi dengan mudah, dengan fokus pada konten dan kemudahan penggunaan.

**Bintang GitHub**

57.0K

**Diperbarui pada**

Dec 6, 2024

**Lisensi**

MIT License

### [MagicUI](https://kickstartui.com/id/details/magic-ui/)

Kumpulan komponen serbaguna dengan desain indah untuk menyempurnakan proyek web dan menyederhanakan proses desain Anda.