행동과 오버레이@neumorphism-ui/popover

Popover

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

@neumorphism-ui/popover

Registry JSON

미리보기

설치

npx shadcn@latest add @neumorphism-ui/popover

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

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

Import

"use client";

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

Example

export default function Example() {

  return (<Popover><PopoverTrigger render={<Button />}>{"알림 설정"}</PopoverTrigger><PopoverContent><PopoverTitle>{"알림을 조절하세요"}</PopoverTitle><PopoverDescription>{"중요한 업데이트만 받아 집중을 유지하세요."}</PopoverDescription><PopoverClose render={<Button variant="primary" />}>{"닫기"}</PopoverClose></PopoverContent></Popover>);
}

API 레퍼런스

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

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성