Popover

Installation

npx shadcn@latest add https://ui.timkit.cn/r/popover.json

Usage

import { Popover } from "@/components/ui/popover"

Examples

Structured API

Component

popover

Logic

zag / popover

Runtime Frameworks

ReactVueWeappHTML

Supported Platforms

WebWeChat Mini Program

Configuration

Prop	Type	Default	Description
logic.provider*	enum (zag \| native \| none)	zag	State and interaction provider used by this component.
logic.machine	string	popover	Underlying state machine identifier when provider is zag.
platforms*	array	Web, WeChat Mini Program	Platforms officially supported by this schema.
frameworks*	array	React, Vue, Weapp, HTML	Framework demos/code currently available in registry files.
dependencies	array	@timui/core, @zag-js/popper, @zag-js/react	Runtime package dependencies required by this registry item.
optionalPeerDependencies	array	-	Optional peer dependencies used by this registry item.
registryDependencies	array	use-machine	Dependent Timkit registry components/hook entries.

Props

Prop	Type	Default	Description
open	boolean	-	The controlled open state.
defaultOpen	boolean	-	The default open state.
modal	boolean	false	Whether the popover is modal.

Events

Prop	Type	Default	Description
onOpenChange	event	-	Event handler called when the open state changes.

Slots

Prop	Type	Default	Description
default	slot	-	The popover core components

Parts

Prop	Type	Default	Description
root*	root	-	The popover container
trigger	part	-	The toggle button
anchor	part	-	The anchoring element
content	part	-	The popover content

This API reference is generated from `/packages/core` component schemas to keep React/Vue/Weapp docs consistent.

Extended notes are not available for this component yet.

On This Page

Installation
Usage
Examples
API Reference