Skip to main contentSkip to navigation

Desktop Window

PreviousNext

A macOS-style draggable, resizable window component with minimize, maximize, and close controls

Component desktop-window-demo not found in registry.

Installation

Run the following command:

npx @libreapps/ui@latest add desktop

Usage

import { Window } from "@libreapps/ui/desktop"

export function WindowDemo() {
  return (
    <Window
      title="My Application"
      onClose={() => console.log("Window closed")}
      initialPosition={{ x: 100, y: 100 }}
      initialSize={{ width: 600, height: 400 }}
    >
      <div className="p-4">
        <h1>Window Content</h1>
        <p>Your content goes here...</p>
      </div>
    </Window>
  )
}

Props

PropTypeDefaultDescription
titlestring-Window title displayed in the title bar
onClose() => void-Callback when the close button is clicked
initialPosition{ x: number, y: number }{ x: 100, y: 100 }Initial window position
initialSize{ width: number, height: number }{ width: 800, height: 600 }Initial window dimensions
minWidthnumber200Minimum window width
minHeightnumber150Minimum window height
windowType'default' | 'dark' | 'light' | 'transparent''default'Window style variant
classNamestring-Additional CSS classes for the window
childrenReactNode-Window content

Variants

Default Window

<Window title="Default" windowType="default">
  <div className="p-4">Default window style</div>
</Window>

Dark Window

<Window title="Dark Mode" windowType="dark">
  <div className="p-4 text-white">Dark themed window</div>
</Window>

Transparent Window

<Window title="Transparent" windowType="transparent">
  <div className="p-4">Transparent background window</div>
</Window>

Features

  • Draggable: Click and drag the title bar to move the window
  • Resizable: Drag edges or corners to resize
  • Traffic Lights: macOS-style close, minimize, and maximize buttons
  • Maximize Toggle: Double-click title bar or click maximize button
  • Keyboard Support: Escape key to close (when focused)
  • Smooth Animations: Powered by Framer Motion

Examples

Application Window

import { Window } from "@libreapps/ui/desktop"
import { Settings, User, Bell } from "lucide-react"

export function SettingsWindow() {
  const [isOpen, setIsOpen] = useState(true)

  if (!isOpen) return null

  return (
    <Window
      title="Settings"
      onClose={() => setIsOpen(false)}
      initialSize={{ width: 500, height: 400 }}
    >
      <div className="flex h-full">
        <nav className="w-48 border-r p-4">
          <button className="flex items-center gap-2 p-2 w-full hover:bg-gray-100 rounded">
            <User className="h-4 w-4" />
            Profile
          </button>
          <button className="flex items-center gap-2 p-2 w-full hover:bg-gray-100 rounded">
            <Bell className="h-4 w-4" />
            Notifications
          </button>
        </nav>
        <main className="flex-1 p-4">
          <h2 className="text-lg font-semibold">Settings Content</h2>
        </main>
      </div>
    </Window>
  )
}

Multiple Windows

import { Window, useWindowManager } from "@libreapps/ui/desktop"

export function MultiWindowDemo() {
  const windows = useWindowManager()

  return (
    <div className="relative h-screen">
      {windows.isOpen('Settings') && (
        <Window
          title="Settings"
          onClose={() => windows.close('Settings')}
          initialPosition={{ x: 100, y: 100 }}
        >
          <div className="p-4">Settings content</div>
        </Window>
      )}

      {windows.isOpen('Editor') && (
        <Window
          title="Editor"
          onClose={() => windows.close('Editor')}
          initialPosition={{ x: 200, y: 150 }}
        >
          <div className="p-4">Editor content</div>
        </Window>
      )}

      <button onClick={() => windows.open('Settings')}>Open Settings</button>
      <button onClick={() => windows.open('Editor')}>Open Editor</button>
    </div>
  )
}