Popover

Displays rich content in a portal, triggered by a button.

Open popover

Installation

npm

npx @galaxy-stack/nebula-cli@latest add popover

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add popover

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add popover

bun

bunx @galaxy-stack/nebula-cli@latest add popover

global

# If you have installed galaxy-design globally
galaxy-design add popover

Usage

API Reference

Props

Prop	Type	Default	Description	Frameworks
open	boolean	undefined	Controlled open state	React, Vue, Angular
defaultOpen	boolean	false	Uncontrolled initial open state	All
onOpenChange	(open: boolean) => void	-	Called when open state changes	React, Vue, Angular
modal	boolean	false	Whether popover is modal	All
side	'top' | 'bottom' | 'left' | 'right'	'bottom'	Side to render popover	React, Vue, Angular
sideOffset	number	4	Offset from side	React, Vue, Angular
align	'start' | 'center' | 'end'	'center'	Alignment along side	React, Vue, Angular
alignOffset	number	0	Offset from alignment	React, Vue, Angular
avoidCollisions	boolean	true	Whether to avoid collisions	All
className	string	''	CSS class names	React, React Native
class	string	''	CSS class names	Vue, Angular, Flutter

Subcomponents

PopoverTrigger

Prop	Type	Default	Description	Frameworks
asChild	boolean	false	Render as child element	React, Vue, Angular
className	string	''	CSS class names	React, React Native
class	string	''	CSS class names	Vue, Angular, Flutter

PopoverContent

Prop	Type	Default	Description	Frameworks
side	'top' | 'bottom' | 'left' | 'right'	'bottom'	Side to render content	React, Vue, Angular
sideOffset	number	4	Offset from side	React, Vue, Angular
align	'start' | 'center' | 'end'	'center'	Alignment along side	React, Vue, Angular
asChild	boolean	false	Render as child element	React, Vue, Angular
className	string	''	CSS class names	React, React Native
class	string	''	CSS class names	Vue, Angular, Flutter

Vue

<script setup lang="ts">
import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui'
</script>

<template>
  <Popover>
    <PopoverTrigger>Open</PopoverTrigger>
    <PopoverContent>
      <div class="space-y-2">
        <h4 class="font-medium">Dimensions</h4>
        <p class="text-sm">Set the dimensions for the layer.</p>
      </div>
    </PopoverContent>
  </Popover>
</template>

React

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

export default function PopoverDemo() {
  return (
    <Popover>
      <PopoverTrigger>Open</PopoverTrigger>
      <PopoverContent>
        <div className="space-y-2">
          <h4 className="font-medium">Dimensions</h4>
          <p className="text-sm">Set the dimensions for the layer.</p>
        </div>
      </PopoverContent>
    </Popover>
  )
}

Angular

import { Component } from '@angular/core';
import { PopoverComponent } from '@/components/ui';

@Component({
  selector: 'app-popover-demo',
  standalone: true,
  imports: [PopoverComponent],
  template: `
    <ui-popover>
      <button trigger>Open</button>
      <div content>
        <h4>Dimensions</h4>
        <p>Set the dimensions for the layer.</p>
      </div>
    </ui-popover>
  `
})
export class PopoverDemoComponent {}

Accessibility

• Keyboard Navigation: [TODO]
• Screen Reader: [TODO]
• Focus Management: [TODO]
• WCAG Compliance: WCAG 2.1 Level AA compliant

Author

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

License

MIT © 2025 Bùi Trọng Hiếu (kevinbui)