Popover
An overlay that displays additional information or options when triggered.
import { defineConfig } from '@pandacss/dev'
import { createPreset } from '@park-ui/panda-preset'
export default defineConfig({
preflight: true,
presets: [
'@pandacss/preset-base',
createPreset({
accentColor: '__ACCENT_COLOR__',
grayColor: '__GRAY_COLOR__',
borderRadius: '__BORDER_RADIUS__',
}),
],
include: ['./src/**/*.{js,jsx,ts,tsx}'],
jsxFramework: '__JS_FRAMEWORK__',
outdir: 'styled-system',
})
import { parkwindPlugin } from '@park-ui/tailwind-plugin'
import type { Config } from 'tailwindcss'
const config: Config = {
content: ['./src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}'],
theme: {
extend: {},
},
plugins: [parkwindPlugin],
parkUI: {
accentColor: '__ACCENT_COLOR__',
grayColor: '__GRAY_COLOR__',
borderRadius: '__BORDER_RADIUS__',
},
darkMode: ['class'],
}
export default config
An overlay that displays additional information or options when triggered.
import { XIcon } from 'lucide-react'
import { Box, Stack } from 'styled-system/jsx'
import { Button } from '~/components/ui/button'
import { IconButton } from '~/components/ui/icon-button'
import * as Popover from '~/components/ui/popover'
export const Demo = (props: Popover.RootProps) => {
return (
<Popover.Root {...props}>
<Popover.Trigger asChild>
<Button>Open Popover</Button>
</Popover.Trigger>
<Popover.Positioner>
<Popover.Content>
<Popover.Arrow>
<Popover.ArrowTip />
</Popover.Arrow>
<Stack gap="1">
<Popover.Title>Favorite Framework</Popover.Title>
<Popover.Description>
Tell us what is your favorite framework and why you love to use it.
</Popover.Description>
</Stack>
<Box position="absolute" top="1" right="1">
<Popover.CloseTrigger asChild>
<IconButton aria-label="Close Popover" variant="ghost" size="sm">
<XIcon />
</IconButton>
</Popover.CloseTrigger>
</Box>
</Popover.Content>
</Popover.Positioner>
</Popover.Root>
)
}
Insert code snippet into your project. Update import paths as needed.
import { Popover } from '@ark-ui/react/popover'
import type { ComponentProps } from 'react'
import { tv } from 'tailwind-variants'
import { createStyleContext } from '~/lib/create-style-context'
const styles = tv(
{
base: 'popover',
slots: {
arrow: 'popover__arrow',
arrowTip: 'popover__arrowTip',
anchor: 'popover__anchor',
trigger: 'popover__trigger',
indicator: 'popover__indicator',
positioner: 'popover__positioner',
content: 'popover__content',
title: 'popover__title',
description: 'popover__description',
closeTrigger: 'popover__closeTrigger',
},
variants: {},
},
{ twMerge: false },
)
const { withProvider, withContext } = createStyleContext(styles)
export const Root = withProvider(Popover.Root)
export const Anchor = withContext(Popover.Anchor, 'anchor')
export const Arrow = withContext(Popover.Arrow, 'arrow')
export const ArrowTip = withContext(Popover.ArrowTip, 'arrowTip')
export const CloseTrigger = withContext(Popover.CloseTrigger, 'closeTrigger')
export const Content = withContext(Popover.Content, 'content')
export const Description = withContext(Popover.Description, 'description')
export const Indicator = withContext(Popover.Indicator, 'indicator')
export const Positioner = withContext(Popover.Positioner, 'positioner')
export const Title = withContext(Popover.Title, 'title')
export const Trigger = withContext(Popover.Trigger, 'trigger')
export type RootProps = ComponentProps<typeof Root>
export interface AnchorProps extends ComponentProps<typeof Anchor> {}
export interface ArrowProps extends ComponentProps<typeof Arrow> {}
export interface ArrowTipProps extends ComponentProps<typeof ArrowTip> {}
export interface CloseTriggerProps extends ComponentProps<typeof CloseTrigger> {}
export interface ContentProps extends ComponentProps<typeof Content> {}
export interface DescriptionProps extends ComponentProps<typeof Description> {}
export interface IndicatorProps extends ComponentProps<typeof Indicator> {}
export interface PositionerProps extends ComponentProps<typeof Positioner> {}
export interface TitleProps extends ComponentProps<typeof Title> {}
export interface TriggerProps extends ComponentProps<typeof Trigger> {}
import { Popover } from '@ark-ui/solid'
import type { ComponentProps } from 'solid-js'
import { tv } from 'tailwind-variants'
import { createStyleContext } from '~/lib/create-style-context'
const styles = tv(
{
base: 'popover',
slots: {
arrow: 'popover__arrow',
arrowTip: 'popover__arrowTip',
anchor: 'popover__anchor',
trigger: 'popover__trigger',
indicator: 'popover__indicator',
positioner: 'popover__positioner',
content: 'popover__content',
title: 'popover__title',
description: 'popover__description',
closeTrigger: 'popover__closeTrigger',
},
variants: {},
},
{ twMerge: false },
)
const { withProvider, withContext } = createStyleContext(styles)
export const Root = withProvider(Popover.Root)
export const Anchor = withContext(Popover.Anchor, 'anchor')
export const Arrow = withContext(Popover.Arrow, 'arrow')
export const ArrowTip = withContext(Popover.ArrowTip, 'arrowTip')
export const CloseTrigger = withContext(Popover.CloseTrigger, 'closeTrigger')
export const Content = withContext(Popover.Content, 'content')
export const Description = withContext(Popover.Description, 'description')
export const Indicator = withContext(Popover.Indicator, 'indicator')
export const Positioner = withContext(Popover.Positioner, 'positioner')
export const Title = withContext(Popover.Title, 'title')
export const Trigger = withContext(Popover.Trigger, 'trigger')
export type RootProps = ComponentProps<typeof Root>
export interface AnchorProps extends ComponentProps<typeof Anchor> {}
export interface ArrowProps extends ComponentProps<typeof Arrow> {}
export interface ArrowTipProps extends ComponentProps<typeof ArrowTip> {}
export interface CloseTriggerProps extends ComponentProps<typeof CloseTrigger> {}
export interface ContentProps extends ComponentProps<typeof Content> {}
export interface DescriptionProps extends ComponentProps<typeof Description> {}
export interface IndicatorProps extends ComponentProps<typeof Indicator> {}
export interface PositionerProps extends ComponentProps<typeof Positioner> {}
export interface TitleProps extends ComponentProps<typeof Title> {}
export interface TriggerProps extends ComponentProps<typeof Trigger> {}
Not yet available
Previous
Pin InputNext
Radio Button Group