YA Popover

A floating content panel that appears near a trigger element for displaying additional information or forms

The YaPopover is a floating panel component in the YaVendio Design System. It displays content in a panel that appears near its trigger element, perfect for forms, settings, tooltips with rich content, and contextual information.

Quick Start

pnpm dlx shadcn@latest add @yavendio/ya-popover

npx shadcn@latest add @yavendio/ya-popover

yarn dlx shadcn@latest add @yavendio/ya-popover

import {
  YaPopover,
  YaPopoverTrigger,
  YaPopoverContent,
  YaPopoverHeader,
  YaPopoverTitle,
  YaPopoverDescription,
  YaPopoverBody,
} from '@/components/ui/ya-popover'

export default function Example() {
  return (
    <YaPopover>
      <YaPopoverTrigger asChild>
        <button>Open Popover</button>
      </YaPopoverTrigger>
      <YaPopoverContent>
        <YaPopoverHeader>
          <YaPopoverTitle>Popover Title</YaPopoverTitle>
          <YaPopoverDescription>
            Popover description goes here.
          </YaPopoverDescription>
        </YaPopoverHeader>
        <YaPopoverBody>
          Your content here
        </YaPopoverBody>
      </YaPopoverContent>
    </YaPopover>
  )
}

Basic Usage

<YaPopover>
  <YaPopoverTrigger asChild>
    <YaButton variant="tertiary">Open Popover</YaButton>
  </YaPopoverTrigger>
  <YaPopoverContent>
    <YaPopoverHeader>
      <YaPopoverTitle>Dimensions</YaPopoverTitle>
      <YaPopoverDescription>
        Set the dimensions for the layer.
      </YaPopoverDescription>
    </YaPopoverHeader>
    <YaPopoverBody>
      <YaInput label="Width" placeholder="100%" orientation="horizontal" />
      <YaInput label="Max. width" placeholder="300px" orientation="horizontal" />
      <YaInput label="Height" placeholder="25px" orientation="horizontal" />
      <YaInput label="Max. height" placeholder="none" orientation="horizontal" />
    </YaPopoverBody>
  </YaPopoverContent>
</YaPopover>

With Close Button

Show a close button in the top-right corner:

<YaPopoverContent showCloseButton>
  <YaPopoverHeader>
    <YaPopoverTitle>Quick Settings</YaPopoverTitle>
    <YaPopoverDescription>
      Adjust your preferences here.
    </YaPopoverDescription>
  </YaPopoverHeader>
  <YaPopoverBody>
    {/* Your content */}
  </YaPopoverBody>
</YaPopoverContent>

Sizes

YaPopover supports multiple sizes:

Size	Width	Usage
`sm`	240px	Simple tooltips, small forms
`default`	320px	Standard popovers
`lg`	400px	Complex forms
`xl`	480px	Rich content

<YaPopoverContent size="sm">...</YaPopoverContent>
<YaPopoverContent size="default">...</YaPopoverContent>
<YaPopoverContent size="lg">...</YaPopoverContent>

Alignment

Control how the popover aligns relative to its trigger element. This is useful when you have wide trigger elements and want to control where the popover appears. Uses the standard Radix Popover alignment behavior.

{/* Aligns popover to the left edge of trigger */}
<YaPopoverContent align="start">...</YaPopoverContent>

{/* Centers popover relative to trigger (default) */}
<YaPopoverContent align="center">...</YaPopoverContent>

{/* Aligns popover to the right edge of trigger */}
<YaPopoverContent align="end">...</YaPopoverContent>

With Form

A common pattern for popovers with form inputs:

<YaPopover>
  <YaPopoverTrigger asChild>
    <YaButton variant="primary">Edit Dimensions</YaButton>
  </YaPopoverTrigger>
  <YaPopoverContent>
    <YaPopoverHeader>
      <YaPopoverTitle>Dimensions</YaPopoverTitle>
      <YaPopoverDescription>
        Set the dimensions for the layer.
      </YaPopoverDescription>
    </YaPopoverHeader>
    <YaPopoverBody>
      <YaInput label="Width" defaultValue="100%" orientation="horizontal" />
      <YaInput label="Height" defaultValue="25px" orientation="horizontal" />
    </YaPopoverBody>
  </YaPopoverContent>
</YaPopover>

Controlled State

Control the popover programmatically:

State: Closed

'use client'

import { useState } from 'react'

export default function ControlledPopover() {
  const [open, setOpen] = useState(false)

  return (
    <YaPopover open={open} onOpenChange={setOpen}>
      <YaPopoverTrigger asChild>
        <YaButton>Help</YaButton>
      </YaPopoverTrigger>
      <YaPopoverContent>
        <YaPopoverHeader>
          <YaPopoverTitle>Need Help?</YaPopoverTitle>
        </YaPopoverHeader>
        <YaPopoverBody>
          <p>You can control this popover programmatically.</p>
          <YaPopoverClose asChild>
            <YaButton variant="secondary" size="sm">
              Got it
            </YaButton>
          </YaPopoverClose>
        </YaPopoverBody>
      </YaPopoverContent>
    </YaPopover>
  )
}

Custom Content

Add any custom content to the popover:

<YaPopoverBody>
  <div className="border border-dashed border-primary rounded-lg p-6 flex items-center justify-center">
    <span className="text-sm text-muted-foreground italic">
      Your custom content here
    </span>
  </div>
</YaPopoverBody>

Without Header

Simple popover without header structure:

<YaPopoverContent size="sm">
  <div className="p-4">
    <p className="text-sm">
      A simple popover without header, just content.
    </p>
  </div>
</YaPopoverContent>

Props

YaPopover

Extends Radix Popover.Root props.

Prop	Type	Default	Description
`open`	`boolean`	-	Controlled open state
`onOpenChange`	`(open: boolean) => void`	-	Callback when open state changes
`defaultOpen`	`boolean`	`false`	Initial open state (uncontrolled)
`modal`	`boolean`	`false`	Whether to render as modal

YaPopoverContent

Prop	Type	Default	Description
`size`	`'sm' \| 'default' \| 'lg' \| 'xl'`	`'default'`	Popover width
`showCloseButton`	`boolean`	`false`	Show the X close button
`sideOffset`	`number`	`4`	Distance from trigger
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Alignment relative to trigger
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	Preferred side
`className`	`string`	-	Additional classes

YaPopoverHeader

Prop	Type	Default	Description
`className`	`string`	-	Additional classes

YaPopoverTitle

Prop	Type	Default	Description
`className`	`string`	-	Additional classes

YaPopoverDescription

Prop	Type	Default	Description
`className`	`string`	-	Additional classes

YaPopoverBody

Prop	Type	Default	Description
`className`	`string`	-	Additional classes

YaPopoverClose

Wraps any element to make it a close trigger. Use asChild to compose with your own button.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Merge props onto child

Accessibility

Best Practices

Do	Don't
Use for contextual forms and settings	Use for critical confirmations (use Dialog)
Keep content focused and scannable	Nest popovers within popovers
Provide clear trigger affordance	Use for long-form content
Use appropriate sizes	Force users to scroll extensively

TypeScript

import { type VariantProps } from 'class-variance-authority'
import { yaPopoverContentVariants } from '@/components/ui/ya-popover'

type PopoverSize = VariantProps<typeof yaPopoverContentVariants>['size']

YA Popover

Quick Start

Basic Usage

With Close Button

Sizes

Alignment

With Form

Controlled State

Custom Content

Without Header

Props

YaPopover

YaPopoverContent

YaPopoverHeader

YaPopoverTitle

YaPopoverDescription

YaPopoverBody

YaPopoverClose

Accessibility

Best Practices

TypeScript

YA Dialog

YA Tooltip

YA Popover Bottom

On this page

YA Popover

Keyboard Navigation

Focus Management

ARIA Attributes

YA Dialog

YA Tooltip

YA Popover Bottom

On this page