# Popover

An accessible popup anchored to a button.

## Installation

Start from a Svelte 5 application, then install the component package, shared theme, and Bits UI peer:

```bash
pnpm add coss-svelte @coss-svelte/theme bits-ui
```

Import `@coss-svelte/theme/style-coss.css` after Tailwind from the application's global stylesheet.

## Usage

```svelte
<script lang="ts">
import {
	Button,
	Field,
	Form,
	Popover,
	PopoverDescription,
	PopoverPopup,
	PopoverTitle,
	PopoverTrigger,
	Textarea,
} from "coss-svelte";
</script>

<Popover>
	<PopoverTrigger>Open Popover</PopoverTrigger>
	<PopoverPopup class="w-80">
		<div class="mb-4">
			<PopoverTitle class="text-base">Send us feedback</PopoverTitle>
			<PopoverDescription>Let us know how we can improve.</PopoverDescription>
		</div>
		<Form class="flex w-full flex-col gap-4">
			<Field>
				<Textarea aria-label="Send feedback" placeholder="How can we improve?" />
			</Field>
			<Button type="submit">Send feedback</Button>
		</Form>
	</PopoverPopup>
</Popover>

```

## Anatomy

- `Popover`
- `PopoverClose`
- `PopoverDescription`
- `PopoverPopup`
- `PopoverTitle`
- `PopoverTrigger`

## API Reference

### Popover

An accessible popup anchored to a button.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `bind:open` | `boolean` | `false` | Open state for the popup or disclosure. Bind with `bind:open`. |
| `label` | `string` | `"Popover"` | Accessible label or fallback visible label for the control. |

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Bits UI Popover.Root](https://bits-ui.com/docs/components/popover#root).

### PopoverClose

Renders a control that closes the parent surface.

**Composition and refs**

- `children: Snippet<[]>`
- `child: Snippet<[{ props: Record<string, unknown> }]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Popover.Close](https://bits-ui.com/docs/components/popover#close).

### PopoverDescription

Provides supporting copy for the parent component.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte <p> attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### PopoverPopup

Renders the floating or modal surface for the parent component.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `portalProps` | `{ disabled?: boolean; to?: PortalTarget }` | `{}` | Configures the exact Bits Portal target (`to`) or renders inline when `disabled`. |

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Popover.Content](https://bits-ui.com/docs/components/popover#content).

### PopoverTitle

Names the parent surface or section.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte <h2> attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### PopoverTrigger

Renders the control that opens, closes, or selects related content.

**Composition and refs**

- `children: Snippet<[]>`
- `child: Snippet<[{ props: Record<string, unknown> }]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Popover.Trigger](https://bits-ui.com/docs/components/popover#trigger).

## Implementation Details

| Field | Value |
| --- | --- |
| Status | Stable |
| Foundation | bits |
| Category | Overlays & Popups |
| Particles | 3 |

## Status

Stable for the current coss-svelte surface.

## Agent Notes

- Import Svelte exports directly from `coss-svelte`.
- This is Svelte 5 code: use `class`, lowercase event properties, runes, snippets, and documented `bind:*` contracts. Do not emit JSX, React hooks, `className`, `asChild`, or Base UI imports.
- Prefer this route's example and generated API table over React COSS snippets; COSS React particles are design references only.
- The copy-and-own registry is a preview. Inspect `/r/popover.json` for the complete local file and dependency closure.
- Popover is stable in the current source catalog.