# Vaul

React 애플리케이션에 원활하게 통합되도록 설계된 스타일 없는 드로어 컴포넌트로, 모바일 기기에서의 사용자 상호작용을 개선합니다.

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

Vaul은 React 애플리케이션을 위해 특별히 설계된 스타일 없는 드로어 컴포넌트입니다. 대화상자를 대체하며 태블릿과 모바일 기기에서 사용하도록 최적화되어 있습니다. 유연성을 고려해 제작되어 개발자가 애플리케이션에서 드로어의 동작과 모양을 맞춤 설정할 수 있습니다.

주요 기능 중 하나는 드로어를 열 때 배경을 확대해 사용자에게 더 몰입감 있는 경험을 제공하는 것입니다. 드로어는 프로그래밍 방식으로 제어할 수 있어 React의 상태 관리를 통해 열린 상태를 관리할 수 있습니다.

Vaul은 Drawer.Root, Drawer.Trigger, Drawer.Content, Drawer.Overlay와 같이 명확하게 정의된 컴포넌트로 간단한 API를 제공하므로 애플리케이션에 체계적으로 통합할 수 있습니다. 더 나은 사용자 상호작용을 위한 스냅 지점, 드로어 컨테이너 맞춤 설정, 닫을 수 없도록 하는 옵션 등 다양한 기능을 지원합니다.

이 컴포넌트는 애플리케이션의 디자인 시스템과 충돌할 수 있는 스타일 컴포넌트의 제약 없이 반응형 모바일 친화적 드로어 기능을 구현하려는 개발자에게 적합합니다.

사용법에 관한 자세한 예시는 CodeSandbox에서 제공하는 대화형 데모 모음에서 확인할 수 있습니다. 데모에서는 스크롤 제어와 맞춤 스냅 지점 등 다양한 기능을 살펴볼 수 있습니다.

## 기능

- 스타일 없는 드로어 컴포넌트
- 모바일 및 태블릿 최적화
- 배경 확대
- 맞춤 스냅 지점
- 열린 상태의 프로그래밍 방식 제어
- 중첩 드로어 지원
- 유연한 콘텐츠 배치
- 렌더링을 위한 맞춤 포털

## 세부 정보

**GitHub 스타**

6.5K

**npm 다운로드**

605.0K/주

**최신 버전**

1.1.1

**생성일**

Jul 16, 2023

**업데이트일**

Dec 6, 2024

**라이선스**

MIT License

여기에 광고를 게재하시겠어요?

[이메일 보내기](mailto:hi@dennn.is?subject=KickstartUI%20%EA%B4%91%EA%B3%A0%20%EB%AC%B8%EC%9D%98)

[광고 WordPress을 위한 에이전트 지원 플러그인 모음입니다.](https://sleekwp.com/?ref=kickstartui)

## 관련 항목

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

스타일이 없는 헤드리스 React 컴포넌트로, 스타일을 완전히 제어하면서 접근성이 뛰어나고 사용자 지정이 자유로운 인터페이스를 구축할 수 있습니다.

**GitHub 스타**

5.2K

**업데이트일**

Aug 17, 2025

**라이선스**

MIT License

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

Vue.js 애플리케이션을 쉽고 효율적으로 구축할 수 있도록 설계된 다양한 오픈 소스 UI 컴포넌트 모음입니다.

**GitHub 스타**

11.0K

**업데이트일**

Dec 6, 2024

**라이선스**

MIT License

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

스타일이 적용되지 않은 접근성 높은 오픈 소스 React 프리미티브로, 고품질 웹 앱과 디자인 시스템을 구축할 수 있습니다.

**GitHub 스타**

16.0K

**업데이트일**

Dec 6, 2024

**라이선스**

MIT License

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

이 오픈 소스 UI 솔루션을 사용하면 다양한 시각적 스타일과 접근성 표준에 맞게 조정할 수 있는 사용자 지정 가능한 컴포넌트로 정교한 디자인 시스템을 만들 수 있습니다.

**GitHub 스타**

3.9K

**업데이트일**

Dec 6, 2024

**라이선스**

MIT License

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

사용하기 쉽고 사용자 지정이 자유로운 필수 컴포넌트 모음으로 접근성 높은 웹 애플리케이션을 빠르고 효율적으로 만드세요.

**GitHub 스타**

38.1K

**업데이트일**

Dec 6, 2024

**라이선스**

MIT License

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

이 컴포넌트는 사용자 경험과 개발자의 유연성에 모두 초점을 맞춘 React용 종합 명령 메뉴 솔루션입니다.

**GitHub 스타**

10.0K

**업데이트일**

Dec 6, 2024

**라이선스**

MIT License

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

콘텐츠와 사용성에 집중해 문서 사이트를 손쉽게 만들 수 있도록 돕는 프로젝트입니다.

**GitHub 스타**

57.0K

**업데이트일**

Dec 6, 2024

**라이선스**

MIT License

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

웹 프로젝트를 개선하고 디자인 작업을 간소화할 수 있도록 아름답게 디자인된 다용도 컴포넌트 모음입니다.