Popover

설치 확인

요소에 붙어 뜨는 작은 창

1. 목적과 출처

요소에 붙어 뜨는 작은 창

출처: shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
프로젝트: src/components/ui/popover.tsx
Registry: @adcapsule/popover

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

Popover 위치
side	열어 보기
아래 bottom
오른쪽 right

3. 속성 바꿔 보기

side

align

<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>이름 바꾸기</PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>보기 이름</PopoverTitle>
    </PopoverHeader>
    <Input aria-label="보기 이름" />
  </PopoverContent>
</Popover>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/popover

npm 패키지: @base-ui/react
함께 설치: @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>이름 바꾸기</PopoverTrigger>
  <PopoverContent>…</PopoverContent>
</Popover>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

side·align·sideOffset
className으로 너비(기본 w-72)
PopoverHeader·Title·Description
짧은 입력이나 선택에만. 긴 폼은 Dialog로

공통으로 유지할 토큰

surface.raised (창, --popover)
radius.lg (창 10px)
border (ring-foreground/10)

Popover

설치 확인

요소에 붙어 뜨는 작은 창

1. 목적과 출처

요소에 붙어 뜨는 작은 창

출처: shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
프로젝트: src/components/ui/popover.tsx
Registry: @adcapsule/popover

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

Popover 위치
side	열어 보기
아래 bottom
오른쪽 right

3. 속성 바꿔 보기

side

align

<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>이름 바꾸기</PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>보기 이름</PopoverTitle>
    </PopoverHeader>
    <Input aria-label="보기 이름" />
  </PopoverContent>
</Popover>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/popover

npm 패키지: @base-ui/react
함께 설치: @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>이름 바꾸기</PopoverTrigger>
  <PopoverContent>…</PopoverContent>
</Popover>

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿