Overlays

Popover

Adaptive floating panel that opens relative to a trigger — dropdown on desktop, sheet on mobile.

Floating Panels

Popovers are used for non-critical overlays like user menus or information tooltips. Like Modals, they transform into bottom sheets on mobile.

'use client'

import React from 'react'
import { Button, Stack, View, Divider, Popover, SidebarItem, Icon } from 'biibaos'
import { Menu, Settings, User, Zap } from 'lucide-react'

export default function App() {
  return (
    <Popover
          trigger={<Button variant="secondary">Open User Menu</Button>}
          width={280}
        >
          <View p={8}>
            <Stack direction="column" gap={4}>
              <SidebarItem icon={<Icon icon={User} size={16} />}>My Profile</SidebarItem>
              <SidebarItem icon={<Icon icon={Settings} size={16} />}>Account Settings</SidebarItem>
              <Divider style={{ margin: '4px 0' }} />
              <SidebarItem icon={<Icon icon={Zap} size={16} />} style={{ color: 'var(--biiba-danger)' }}>Logout</SidebarItem>
            </Stack>
          </View>
        </Popover>
  )
}

Adaptive Menu

An adaptive floating panel that opens relative to a trigger. It automatically becomes a bottom-sheet on mobile devices.

'use client'

import React from 'react'
import { Button, Text, Divider, Popover } from 'biibaos'
import { Menu } from 'lucide-react'

export default function App() {
  return (
    <Popover
          trigger={<Button variant="secondary">Open Popover</Button>}
        >
          <div style={{ padding: 8 }}>
            <Text weight="bold" style={{ marginBottom: 8, display: 'block' }}>Adaptive Menu</Text>
            <Text variant="body-sm" color="muted">
              This content is a dropdown on desktop and a bottom-sheet on mobile.
            </Text>
            <Divider style={{ margin: '12px 0' }} />
            <Button size="sm" style={{ width: '100%' }}>Action</Button>
          </div>
        </Popover>
  )
}

Properties

Prop	Type	Default	Description
`trigger`	`React.ReactNode`	—	Visual trigger element that spawns the menu list
`children`	`React.ReactNode`	—	Main descriptive text or overlay children layout
`isOpen`	`boolean`	—	Controlled state of overlay visibility
`onOpenChange`	`(open: boolean) => void`	—	Configures the onOpenChange option
`placement`	`'bottom-start' \| 'bottom-end' \| 'top-start' \| 'top-end'`	'bottom-start'	Menu popup alignment position relative to trigger
`width`	`number \| string`	240	Horizontal width in pixels or CSS units
`minWidth`	`number \| string`	—	Configures the minWidth option
`maxHeight`	`number \| string`	—	Configures the maxHeight option
`closeOnOutsideClick`	`boolean`	true	Configures the closeOnOutsideClick option

Modal

Spotlight