Drawer

Betav1.0.0

끌어내려(스와이프) 닫는 바텀 시트 패널. vaul 기반.

Loading preview…

import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";

<Drawer>
  <DrawerTrigger>Open drawer</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Edit profile</DrawerTitle>
      <DrawerDescription>...</DrawerDescription>
    </DrawerHeader>
    {/* ... body ... */}
    <DrawerFooter>
      <Button type="submit">Save changes</Button>
      <DrawerClose>Cancel</DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Installation

pnpm dlx @groudit/cli@latest add drawer

Variants

Directions

direction 로 4방향 슬라이드. bottom 은 드래그 핸들 표시, 모든 방향에서 끌어 닫기 지원.

Loading preview…

// direction prop 으로 방향 지정 (기본 "bottom")
<Drawer direction="right">
  <DrawerTrigger>Open</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Right drawer</DrawerTitle>
    </DrawerHeader>
  </DrawerContent>
</Drawer>

Composition

Drawer (direction)
├── DrawerTrigger
└── DrawerContent
    ├── Drag handle (bottom)
    ├── DrawerHeader
    │   ├── DrawerTitle
    │   └── DrawerDescription
    ├── Body
    └── DrawerFooter
        └── DrawerClose

Dependencies

설치 시 자동으로 함께 들어오는 의존성. 모든 버전은 정확히 고정되어 자동 업데이트를 방지합니다.

npm packages

Package	Version
vaul	`1.1.2`
clsx	`2.1.1`
tailwind-merge	`3.6.0`

Groudit components

이 컴포넌트가 의존하는 다른 Groudit 컴포넌트 — 함께 설치됩니다.

utils

Accessibility

이 컴포넌트는 WAI-ARIA dialog 패턴을 따릅니다.

Keyboard interactions

Key	Description
`EnterSpace`	트리거에서 드로어 열기.
`Tab`	드로어 내부에서만 순환 (focus trap).
`Esc`	드로어 닫기 + 트리거로 포커스 복귀.

WCAG 2.1 AA

이 컴포넌트는 다음 Success Criteria 충족을 목표로 합니다.

1.3.1 2.1.2 2.4.3 4.1.2

Notes

•DrawerTitle 필수 — 스크린리더가 드로어를 식별.
•끌어내려 닫기(스와이프)는 포인터 사용자용. 키보드 사용자는 Esc / Close 버튼으로 닫기 제공.

Drawer

Betav1.0.0

끌어내려(스와이프) 닫는 바텀 시트 패널. vaul 기반.

Loading preview…

import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";

<Drawer>
  <DrawerTrigger>Open drawer</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Edit profile</DrawerTitle>
      <DrawerDescription>...</DrawerDescription>
    </DrawerHeader>
    {/* ... body ... */}
    <DrawerFooter>
      <Button type="submit">Save changes</Button>
      <DrawerClose>Cancel</DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Installation

pnpm dlx @groudit/cli@latest add drawer

Variants

Directions

direction 로 4방향 슬라이드. bottom 은 드래그 핸들 표시, 모든 방향에서 끌어 닫기 지원.

Loading preview…

// direction prop 으로 방향 지정 (기본 "bottom")
<Drawer direction="right">
  <DrawerTrigger>Open</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Right drawer</DrawerTitle>
    </DrawerHeader>
  </DrawerContent>
</Drawer>

Composition

Drawer (direction)
├── DrawerTrigger
└── DrawerContent
    ├── Drag handle (bottom)
    ├── DrawerHeader
    │   ├── DrawerTitle
    │   └── DrawerDescription
    ├── Body
    └── DrawerFooter
        └── DrawerClose

Dependencies

설치 시 자동으로 함께 들어오는 의존성. 모든 버전은 정확히 고정되어 자동 업데이트를 방지합니다.

npm packages

Package	Version
vaul	`1.1.2`
clsx	`2.1.1`
tailwind-merge	`3.6.0`

Groudit components

이 컴포넌트가 의존하는 다른 Groudit 컴포넌트 — 함께 설치됩니다.

utils

Accessibility

이 컴포넌트는 WAI-ARIA dialog 패턴을 따릅니다.

Keyboard interactions

Key	Description
`EnterSpace`	트리거에서 드로어 열기.
`Tab`	드로어 내부에서만 순환 (focus trap).
`Esc`	드로어 닫기 + 트리거로 포커스 복귀.

WCAG 2.1 AA

이 컴포넌트는 다음 Success Criteria 충족을 목표로 합니다.

1.3.1 2.1.2 2.4.3 4.1.2

Notes

•DrawerTitle 필수 — 스크린리더가 드로어를 식별.
•끌어내려 닫기(스와이프)는 포인터 사용자용. 키보드 사용자는 Esc / Close 버튼으로 닫기 제공.