Drawer

특히 터치 화면에서 스와이프로 닫을 수 있는 임시 작업 패널에 사용합니다.

미리보기

프로필 설정 드로어

설명과 닫기 버튼이 있는 프로필 패널을 열고 버튼이나 아래 방향 스와이프로 닫습니다.

미리보기를 불러오는 중입니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/drawer

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

프로필 설정 드로어

npx shadcn@latest add @neumorphism-ui/drawer @neumorphism-ui/button

Registry JSON

사용법

Drawer 안에 트리거, 콘텐츠, 헤더, 제목과 설명을 구성하세요. 원하는 방향으로 swipeDirection을 정하고 제스처와 함께 명시적인 닫기 버튼도 제공합니다.

"use client";

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

export default function Example() {
  return (
    <Drawer swipeDirection="down">
      <DrawerTrigger render={<Button />}>Quick settings</DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Quick settings</DrawerTitle>
          <DrawerDescription>Adjust options without leaving this page.</DrawerDescription>
        </DrawerHeader>
        <DrawerFooter><DrawerClose render={<Button />}>Done</DrawerClose></DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
}

API 레퍼런스

Base UI Drawer의 swipe gesture와 포커스 관리를 사용합니다. Sheet가 고정된 작업 패널이라면 Drawer는 터치 환경에서 손가락으로 닫거나 방향을 바꿀 수 있는 임시 작업 표면에 적합합니다.

컴포넌트	속성	타입	기본값	설명
`Drawer`	`swipeDirection`	`"down" \| "up" \| "left" \| "right"`	`"down"`	패널이 열리고 닫히는 방향과 swipe 방향을 지정합니다.
`Drawer`	`open / onOpenChange`	`boolean / (open: boolean) => void`	`—`	Drawer의 controlled 열림 상태를 관리합니다.
`Drawer`	`snapPoints`	`number[]`	`—`	필요할 때 중간 정지 지점을 구성합니다.
`DrawerTrigger`	`render`	`ReactElement`	`—`	기존 Button이나 다른 요소를 trigger로 합성합니다.
`DrawerContent`	`className`	`string \| (state) => string`	`—`	기본 방향·gesture 동작을 유지하면서 패널 스타일을 확장합니다.

미리보기

프로필 설정 드로어

설치

사용법

API 레퍼런스

접근성