---
type: snippet
tags: ['modal', 'sheet', 'bottom-sheet']
status: release
ctime: 2023-08-07
mtime: 2024-03-22
---

Bottom Sheet 라이브러리 비교

**react-modal-sheet** 추천:
- 활발한 유지보수 (v5 최근 릴리즈)
- Framer Motion 기반, Compound component 패턴
- `avoidKeyboard`, `disableDismiss` 등 유용한 옵션

```tsx
import { Sheet } from 'react-modal-sheet'

<Sheet isOpen={isOpen} onClose={() => setOpen(false)}>
  <Sheet.Container>
    <Sheet.Header />
    <Sheet.Content>콘텐츠</Sheet.Content>
  </Sheet.Container>
  <Sheet.Backdrop />
</Sheet>
```

> [!WARNING]
> react-spring-bottom-sheet는 3년간 업데이트 없음. 신규 프로젝트에선 피할 것.

---

- [react-modal-sheet](https://github.com/Temzasse/react-modal-sheet)
- [vaul](https://github.com/emilkowalski/vaul) - Radix 기반 대안
- [Material Design - Bottom Sheet](https://m3.material.io/components/bottom-sheets)
- [Apple HIG - Sheet](https://developer.apple.com/design/human-interface-guidelines/sheets)