Popover

빠른 설정처럼 가까운 버튼에 연결된 작은 상호작용 패널에 사용합니다.

미리보기

알림 설정 패널

제목, 간단한 안내, 닫기 버튼을 갖춘 작은 패널을 엽니다.

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

설치

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

npx shadcn@latest add @neumorphism-ui/popover

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

알림 설정 패널

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

Registry JSON

사용법

PopoverTrigger와 PopoverContent를 짝짓고 제목이나 접근 가능한 이름을 제공하세요. 짧은 설정과 설명을 넣고 명시적인 닫기 동작이 필요하면 PopoverClose를 추가합니다.

"use client";

import { Button } from "@/components/ui/button";
import { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "@/components/ui/popover";

export default function Example() {
  return (
    <Popover>
      <PopoverTrigger render={<Button />}>Project details</PopoverTrigger>
      <PopoverContent>
        <PopoverTitle>Team workspace</PopoverTitle>
        <PopoverDescription>Eight members are collaborating.</PopoverDescription>
        <PopoverClose render={<Button />}>Close</PopoverClose>
      </PopoverContent>
    </Popover>
  );
}

API 레퍼런스

버튼 옆에서 맥락을 유지하는 작은 설정 패널. PopoverTitle과 설명을 제공하고 키보드로 닫기 동작을 확인하세요.

컴포넌트	속성	타입	기본값	설명
`Popover`	`open / defaultOpen`	`boolean`	`—`	제어 상태 또는 최초 상태를 지정합니다.
`PopoverContent`	`side / align`	`Positioner.Props`	`—`	화면 경계를 고려한 패널 위치와 간격입니다.
`PopoverTrigger`	`render`	`React.ReactElement \| function`	`—`	기존 요소와 이벤트·ref를 합성합니다.

미리보기

알림 설정 패널

설치

사용법

API 레퍼런스

접근성