Overlays

Spotlight

Adaptive command palette for quick navigation and actions, optimized for both keyboard and touch.

Command Palette

The Spotlight component provides a professional command palette for quick actions and navigation. It is keyboard-optimized and adapts to a touch-friendly sheet on mobile.

'use client'

import { useState, useEffect } from 'react'
import { Spotlight, Button, Icon, Text } from 'biibaos'
import { Search, User, Settings, Plus } from 'lucide-react'

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

  const items = [
    { 
      id: 'profile', 
      title: 'View Profile', 
      icon: <Icon icon={User} size={16} />,
      onSelect: () => console.log('Profile') 
    },
    { 
      id: 'settings', 
      title: 'Settings', 
      icon: <Icon icon={Settings} size={16} />,
      shortcut: ['⌘', ','],
      onSelect: () => console.log('Settings') 
    },
    { 
      id: 'new-project', 
      title: 'Create New Project', 
      icon: <Icon icon={Plus} size={16} />,
      onSelect: () => console.log('New Project') 
    },
  ]

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
        e.preventDefault()
        setOpen(true)
      }
    }
    window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
  }, [])

  return (
    <>
      <Button onClick={() => setOpen(true)} leftIcon={<Icon icon={Search} size={16} />}>
        Search Commands (⌘K)
      </Button>

      <Spotlight
        isOpen={open}
        onClose={() => setOpen(false)}
        items={items}
        placeholder="Type to search..."
      />
    </>
  )
}

Properties

Prop	Type	Default	Description
`isOpen`	`boolean`	—	Controlled state of overlay visibility
`onClose`	`() => void`	—	Callback function triggered when closing the overlay
`items`	`SpotlightItem[]`	—	Array of item configurations with label, icon, actions, and active states
`placeholder`	`string`	'Type to search...'	Ghost placeholder text displayed inside empty inputs
`emptyMessage`	`string`	'No results found.'	Configures the emptyMessage option

Popover

Table