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 { Popover, Button, View, Stack, SidebarItem, Icon, Divider } from 'biibaos'
import { User, Settings, 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 { Popover, Button, Text, Divider, Icon } from 'biibaos'
import { Zap } from 'lucide-react'

export default function App() {
  return (
    <Popover 
      trigger={<Button variant="secondary">Open Popover</Button>}
    >
      <div style={{ padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
          <Icon icon={Zap} size={16} color="var(--biiba-primary)" />
          <Text weight="bold">Adaptive Menu</Text>
        </div>
        <Text variant="body-sm" color="muted" style={{ display: 'block', marginBottom: 12 }}>
          This content is a dropdown on desktop and a bottom-sheet on mobile.
        </Text>
        <Divider style={{ margin: '12px 0' }} />
        <Button size="sm" variant="primary" 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